用脚手架构建及配置Vue2.0+ElementUI项目

1、下载vscode --强大的前后端开发工具

2、下载nodejs --前端代码打包编译专用

3、下载git --强大的代码托管工具

4、使用npm搭建项目

1. 安装淘宝镜像（推荐国内线路，安装更加稳定，迅速，若使用报错，WIN+R打开PowerShell，输入set-ExecutionPolicy RemoteSigned，更改权限为A）

npm i -g cnpm --registry=https://registry.npm.taobao.org

2. 安装vue 脚手架（当前最火的MVVM前端架构，国人精心打造，推荐使用）

cnpm i -g vue-cli

3. 安装webpack

cnpm i -g webpack

4. 创建webpack模板项目

vue init webpack my-project

5. 进入项目，安装相关依赖，运行项目

cd my-project
cnpm i
cnpm run dev

6. 安装element-ui（GitHub上最火vue开源项目，饿了么精心打造，推荐使用）

cnpm i -S element-ui

7. 在main.js中引入element-ui

import ElementUI from 'element-ui'
Vue.use(ElementUI)
Vue.prototype.$ele = ElementUI

8. 在HelloWorld.vue的mounted（挂载成功回调）方法中使用element ui

mounted () {
    this.$ele.Message({
      message: '恭喜你，这是一条成功消息！',
      type: 'success'
    })
  }

 

 5、Demo项目GitHub地址

https://github.com/Rhyheart/rhyheart.web.demo.git

 

 6、npm常用指令说明

1. npm install

安装node_module以及还原package.json内声明的所有包

2. npm install xxxpackage

安装xxx包到node_module目录下，但是不会更新package.json文件，因此另外一个人拉取到代码后无法使用npm install进行包还原，需要手动指定重装

3. npm install --save xxxpackage

安装xxx包到node_module目录下，同时更新package.json的dependencies（生产/运行环境）配置，运行时如果需要就用这个

4. npm install --save-dev xxxpackage

安装xxx包到node_module目录下，同时更新package.json的devDependencies（开发/编译环境），但是不会更新dependencies（生产/运行环境）配置，仅编译时需要就用这个

5. npm install --global xxxpackage

安装xxx包到全局，不同项目之间可以共享该包，就无需每个项目都安装

6. 简写

install可以简写为i，例如：npm install 简写 npm i

--save可以简写为-S，例如：npm install --save xxxpackage 简写为 npm i -S xxxpackage

--save-dev可以简写为-D，例如：npm install --save-dev xxxpackage 简写为 npm i -D xxxpackage

 --global可以简写为-g，例如：npm install --global xxxpackage 简写为 npm i -g xxxpackage