Vue相关组件的安装

1. 快速搭建一个Vue-cli项目

1. 需要node环境

• http://nodejs.cn/download/

2. 更改node镜像源

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

-g：表示全局安装

3. 安装vue-cli

• cnpm install vue-cli -g

npm下载的文件位置：C:\Users\xxx\AppData\Roaming\npm

4. 查看是否成功

• vue list

5. 在cmd中找到要创建项目的位置

• cd E:\HBuilder\WorkSpace

6. 初始化项目

• vue init webpack projcetName

7. 依次输入上面黄色的命令

• cd hellovuecli
• npm install (安装的依赖在项目的node_modules文件夹中)
• npm run dev

2. WebPack安装与打包

1. npm安装

• npm install webpack -g
• npm install webpack-cli-g

2. 打包，先找到项目的文件夹

• cd E:\HBuilder\WorkSpace\webpack
• webpack --watch

–watch可以实现热部署

3. vue-router

vue-router是Vue.js官方的路由管理器，与Vue.js的核心深度集成，让构建单页面应用变得简单

1. 安装

• npm install vue-router --save-dev

4. 整合ElementUI

1. 安装

• npm i element-ui -S

2. 创建一个工程

• cd E:\HBuilder\WorkSpace
• vue init webpack vue-elementui

3. 部署运行

• cd vue-elementui
• npm install vue-router --save-dev
• npm i element-ui -S
• npm install sass-loader@7.3.1 node-sass --save-dev (安装SASS加载器)
• npm install
• npm run dev

4. 引入E-UI

• 在main.js中写入以下内容

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});