Vue 腳手架j基本配置——vue/cli以及 Element-UI 的基本使用

1. Vue 腳手架的基本用法

Vue 腳手架用於快速生成 Vue 項目基礎架構，其官網地址爲：https://cli.vuejs.org/zh/

1.1 安裝3.x版本的Vue腳手架

npm install -g @vue/cli

1.2 基於3.x版本的腳手架創建Vue項目

1.2.1 使用命令創建Vue項目

• 命令：vue create my-project
• 選擇Manually select features(選擇特性以創建項目)
• 勾選特性可以用空格進行勾選。
• 是否選用歷史模式的路由：no (使用hash url 會更好 )
• ESLint選擇：ESLint + Standard config
• 何時進行ESLint語法校驗：Lint on save
• babel，postcss等配置文件如何放置：In dedicated config files(單獨使用文件進行配置)
• 是否保存爲模板：y( y:yes,n:no;這個看個人了，保存成模板，在下次就會直接調用，不用再配置了)
• 使用哪個工具安裝包：npm

1.2.2 基於ui界面創建Vue項目

• 命令：vue ui
  會自動在網頁打開界面,順着步驟配置，跟命令行，配置一樣
  
• 其他配置的頁面
  

1.2.3 基於 2.x 的舊模板，創建 舊版 vue 項目

npm install -g @vue/cli-init
vue init webpack my-project

2. Vue腳手架生成的項目結構

• node_modules:依賴包目錄
• public：靜態資源目錄
• src：源碼目錄
• src/assets:資源目錄
• src/components：組件目錄
• src/views:視圖組件目錄
• src/App.vue:根組件
• src/main.js:入口js
• src/router.js:路由js
• babel.config.js:babel配置文件
• .eslintrc.js:格式效驗文件
• .gitignore git提交時忽略文件（直接把文件名寫在其中即可）

3. Vue 腳手架的自定義配置

3.1 通過 package.json 配置項目

// 必須是符合規範的json語法
"vue": {
	"devServer": {
	"port": "8888",//與後端對接的端口
	"open" : true//是否開放
	}
}

注意：不推薦使用這種配置方式。因爲 package.json 主要用來管理包的配置信息；爲了方便維護，推薦將 vue 腳手架相關的配置，單獨定義到 vue.config.js 配置文件中。

3.2 通過單獨的配置文件配置項目

• 在項目的跟目錄創建文件 vue.config.js
• 在該文件中進行相關配置，從而覆蓋默認配置

// vue.config.js
module.exports = {
	devServer: {
	port: 8888,
	open: true
	} 
}

4. Element-UI 的基本使用

Element-UI：一套爲開發者、設計師和產品經理準備的基於 Vue 2.0 的桌面端組件庫。
官網地址爲： http://element-cn.eleme.io/#/zh-CN

4.1 基於命令行方式手動安裝

• 安裝依賴包 npm i element-ui –S 項目依賴
• 導入 Element-UI 相關資源

  // 導入vue
	import Vue from 'vue'
	//按需使用element組件
   import { Button } from 'element-ui'
   
   Vue.use(Button)

4.2 基於圖形化界面自動安裝

① 運行 vue ui 命令，打開圖形化界面
② 通過 Vue 項目管理器，進入具體的項目配置面板
③ 點擊 插件 -> 添加插件，進入插件查詢面板
④ 搜索 vue-cli-plugin-element 並安裝
⑤ 配置插件，實現按需導入，從而減少打包後項目的體積