3.08-搭建VUE项目（使用vue-cli构建工具）

一、安装vue-cli

    1.一、安装npm

①命令行输入：npm -v    判断是否已经安装（出现版本号则已安装）

②未安装须要下载node软件包，下载地址： http://nodejs.cn/download/

③换源： npm config set registry https://registry.npm.taobao.org

④查看配置：npm config list

    1.二、全局安装webpack

①命令行：npm install -g webpack   或者    npm install webpack -g

②安装完成后输入：webpack -v    出现版本号即安装成功

    1.三、全局安装vue-cli

①命令行：npm install vue-cli -g    或者    npm install --global vue-cli

②安装后输入：vue -V（大写）    出现版本号即安装成功

③打开：C:\Users\Andminster（用户）\AppData\Roaming\npm,出现有下图所示

④打开node_modules 也能够看到vue-cli文件夹

二、搭建vue-cli项目

①、打开命令行（若使用idea，打开Terminal窗口输入命令），切换到要搭建项目的地址

②、输入命令：vue init webpack project-name

③、接下来会出现以下几个提示

• Project name                                                         --项目名称
• Project description                                                                                                        -- 项目描述
• Author                                                                                                                           -- 做者
• Vue build                                                                                                                       -- 构建模式，通常默认standalone
• Install vue-router                                                                                                           -- 是否安装vue的路由插件
• Use ESLint to lint your code                                                                                          -- 是否用ESLint限制代码错误和风格
• Set up unit tests                                                                                                            -- 是否安装单位测试
• Setup e2e tests with Nightwatch                                                                                  -- 是否安装e2e来进行用户行为模拟测试
• Should we run "npm install" for you after the project has been created                     -- yes，选择使用npm,no后续自选择

④、进入项目目录下输入命令：npm install

⑤、执行项目命令：npm run dev

三、整合Element-UI

① 命令行输入：npm i element-ui -S

② 在main.js引入：

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI);

四、 引入echarts

安装： npm i echarts -S

五、引入js-cookie工具

npm install js-cookie --save

六、mavonEditor-基于Vue的markdown编辑器插件

npm install mavon-editor --save

七、vue使用scss

npm install node-sass --save-dev

npm install sass-loader --save-dev

npm install style-loader --save-dev

八、Vu实现导出Excel表格功能

npm install -S file-saver 用来生成文件的web应用程序

npm install -S xlsx 电子表格格式的解析器

npm install -D script-loader 将js挂在在全局下

九、数字滚动插件

npm install vue-count-to

十、VUEX 

npm install vuex --save

十一、screenfull.js 实现全屏功能

 npm install --save screenfull