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