1、Vue 腳手架的基本用法
Vue 腳手架用於快速生成 Vue 項目基礎架構，其官網地址https://cli.vuejs.org/zh/
使用步驟
1. 安裝 3.x 版本的 Vue 腳手架：
npm install -g @vue/cli
基於3.x版本的腳手架創建vue項目
// 1. 基於 交互式命令行 的方式，創建 新版 vue 項目
vue create my-project
// 2. 基於 圖形化界面 的方式，創建 新版 vue 項目
vue ui
// 3. 基於 2.x 的舊模板，創建 舊版 vue 項目
npm install -g @vue/cli-init
vue init webpack my-project
2、Vue 腳手架生成的項目結構分析
3、Vue 腳手架的自定義配置
1. 通過 package.json 配置項目
// 必須是符合規範的json語法
"vue": {
"devServer": {
"port": "8888",
"open" : true
}
},
注意：不推薦使用這種配置方式。因爲 package.json 主要用來管理包的配置信息;爲了方便維護，推薦將 vue 腳手架相關的配置，單獨定義到 vue.config.js 配置文件中。
2. 通過單獨的配置文件配置項目
1、 在項目的跟目錄創建文件 vue.config.js
2、 在該文件中進行相關配置，從而覆蓋默認配置
// vue.config.js
module.exports = {
devServer: {
port: 8888
}
}
Element-UI 的基本使用
Element-UI：一套爲開發者、設計師和產品經理準備的基於 Vue 2.0 的桌面端組件庫。官網地址爲： http://element-cn.eleme.io/#/zh-CN
1. 基於命令行方式手動安裝
1、安裝依賴包 npm i element-ui –S
2、導入 Element-UI 相關資源
// 導入組件庫
import ElementUI from 'element-ui';
// 導入組件相關樣式
import 'element-ui/lib/theme-chalk/index.css';
// 配置 Vue 插件
Vue.use(ElementUI);
2. 基於圖形化界面自動安裝
1、 運行 vue ui 命令，打開圖形化界面
2、 通過 Vue 項目管理器，進入具體的項目配置面板
3、 點擊 插件 -> 添加插件，進入插件查詢面板
4、 搜索 vue-cli-plugin-element 並安裝
5、 配置插件，實現按需導入，從而減少打包後項目的體積
