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