vue
介绍：vue构建用户界面的渐进式框架
起步，使用vue必须搭建环境——node
nodejs下载
安装配置：node 安装配置

下载node 地址：node下载
选择window系统，建议安装 .msi安装包；
下一步——下一步——（中间会出现安装模式，和安装路径，自己根据需要安装）——完成

npm

npm其实是Node.js的包管理工具，npm安装插件 npm install +[name插件名字] [-g] [–save-dev]

node插件名称
-g：全局安装；
–save：将保存配置信息至package.json（package.json是nodejs项目配置文件）；
-dev：保存至package.json的devDependencies节点，不指定-dev将保存至dependencies节点；

但是：npm他是国外服务器下载，会有点慢，我们会使用国内淘宝镜像cnpm

安装cnpm：$ npm install -g cnpm --registry=https://registry.npm.taobao.org

安装完之后，就可以用cnpm 来替换npm

环境配置：

一般我们安装软件会安装到D或者E，而使用npm安装一个cluster模块他会出现在C盘默认的路径下面，所以我们要去修改它的默认路径

在node.js文件夹下创建两个文件夹
node_global; //全局模块目录
node_cecal； // 缓存目录
用管理员打开终端
输入下面两条命令：
npm/cnpm config set prefix “node_global文件的路径”
npm/cnpm config set cache “node_cache的文件路径”
环境配置
桌面上找到——> 我的电脑(此电脑) ——>右键点击——>高级系统配置——>环境变量——> 打开
点击新建——> 变量名：NODE-PATH 变量值node下面的node_global安装路径

配置Path :
配置路径 ：D:\nodejs\node_global

配置完重启电脑

首次搭建vue项目

1.新建一个文件夹 用打开软件打开
2.打开终端
3. vue init webpack + 项目名 回车
注：如果出现
‘vue’ 不是内部或外部命令，也不是可运行的程序
或批处理文件。----没有全局配置vue脚手架 vue-cli
安装vue-cli
以管理员身份打开终端
输入：npm install vue-cli -g 全局安装
如果输入之后还是出现错误，查看环境变量

回车：

? Project name （vue 新更改的） // 项目名称 回车默认你输入的项目名，如果更改名字就直接输入更改后的名字
? Project description A Vue.js project ————回车
? Author zhangyd zhangyd@hzcominfo.com ————回车 注：默认是yes
? Vue build standalone ————回车
? Install vue-router? Yes ————是否安装路由 一般项目都使用路由 yes 注：如果在这没有安装但是项目中需要使用，就按照安装插件方式安装
? Use ESLint to lint your code? No ————是否效验 一般输入n 可以选择yes ，可以规范自己的代码，但他会很苛刻，空格，逗号都会报错，有时候还找不到原因，如果你但是一直回车默认选择了yes 在bulid文件下面：\webpack.base.conf.js 中找到

const createLintingRule 对象，注释里面的内容 。项目就不会报错

萧山研发分部 > vue (vue搭建npm/cnpm，element-ui插件,jquery插件） > image2019-7-25_17-8-15.png

? Set up unit tests No ———— 是否设置单元测试 ？ yes/no 都可以但是一般no
? Setup e2e tests with Nightwatch? No ———— 是否设置e2e测试？ 这个no

? Should we run npm install for you after the project has been created? (recommended) npm

注：下载完之后会自己体现接下里的两句命令

cd +项目名   npm run dev

4.cd + 项目名 //注：在安装插件，都必须进入到项目名中才能安装，要不会报错
5.npm run dev 启动项目

安装插件：在cd到项目后： npm install + 插件名字
搭建项目
1.在开发软件打开终端
2. vue init webpck + 项目名字（名字规范小驼峰） 回车
生成项目

生成项目各个文件夹以及重要使用的文件
├── index.html 入口页面
├── build 构建脚本目录（webpack配置文件) 最终发布的代码存放位置
│ ├── build-server.js 运行本地构建服务器，可以访问构建后的页面
│ ├── build.js 生产环境构建脚本
│ ├── dev-client.js 开发服务器热重载脚本，主要用来实现开发阶段的页面自动刷新
│ ├── dev-server.js 运行本地开发服务器
│ ├── utils.js 构建相关工具方法
│ ├── webpack.base.conf.js wabpack基础配置
│ ├── webpack.dev.conf.js wabpack开发环境配置
│ └── webpack.prod.conf.js wabpack生产环境配置
├── config 项目配置
│ ├── dev.env.js 开发环境变量
│ ├── index.js 项目配置文件
│ ├── prod.env.js 生产环境变量
│ └── test.env.js 测试环境变量
├── mock mock数据目录
│ └── hello.js
├── package.json npm包配置文件，里面定义了项目的npm脚本，依赖包等信息

├── src 项目源码目录 ---- 我们写的内容都是在src文件下面
│ ├── main.js 入口js文件，核心文件，全局配置 --------------------------------
│ ├── app.vue 根组件（如果你全局使用，可以把内容写在app.vue中）
│ ├── components 公共组件目录--------------------------------------------------------
│ │ └── title.vue
│ ├── assets 资源目录，这里的资源会被wabpack构建------------------------------
│ │ └── images 一般assets放项目的图片、css、公共自定义js等
│ │ └── logo.png
│ ├── routes 前端路由,配置路由路径
│ │ └── index.js
│ ├── store 应用级数据（state）
│ │ └── index.js
│ └── views 页面目录
│ ├── hello.vue
│ └── notfound.vue

├── static 纯静态资源，不会被wabpack构建。
└── test 测试文件目录（unit&e2e）
└── unit 单元测试
├── index.js 入口脚本
├── karma.conf.js karma配置文件
└── specs 单测case目录
└── Hello.spec.js

vue element-ui
1.搭建vue
2.引入插件 npm install element-ui --save
3.在main.js 全局配置
import ElementUi from ‘element-ui’ //1.全局引入 import ‘element-ui/lib/theme-chalk/index.css’; //3.使用element中的css文件
Vue.use(ElementUi); //2.使用

注：所有使用插件的步骤都是一致的

在终端下载引入插件 npm install +引入插件名字 --save
在项目中的main.js 中全局配置 引入——>使用
import 自定义名字 from ‘插件名’
Vue.use(自定义名字)
引入插件中的css/js
import ’引入css/js的路径 ‘

vue中引入jquery

在终端下载jquery npm install jquery --save
 在main.js 引入 import ‘jquery’
 在项目中\build文件夹\webpack.base.conf.js 中配置jquery
 1.引入包 var webpack = require(‘webpack’)
 2.配置： 在module.exports对象下面
 plugins:[
 new webpack.ProvidePlugin({
 $:‘jquery’,
 jquery:‘jquery’,
 jQuery:‘jquery’,
 ‘window.jQuery’:‘jquery’
 })
 ],

萧山研发分部 > vue (vue搭建npm/cnpm，element-ui插件,jquery插件） > image2019-7-25_17-11-57.png