最近需要新搭建一個前端項目,是以就參考 @PanJiaChen 的Github項目模闆 vue-admin-template做部分改動,搭建一套前端架構
推薦讀一下
手摸手,帶你用vue撸背景 系列
1. 使用vue-cli3快速建立模闆
具體vue-cli3的使用方式和注意事項可以參考
使用Vue-cli 3.0搭建Vue項目建立時引入以下特性:
-
Babel
-
Router
-
Vuex
-
CSS pre-processors
-
Linter / Formatter
其他配置
- 不使用
history mode
- CSS pre-processor 使用
LESS
個人對LESS比較熟悉,而且SCSS安裝時需要python和其他相關,比較麻煩
- Linter 使用
ESLint + Standard config
使用哪個标準看個人習慣,公司其他項目都使用 Standard,保持統一
- 儲存配置檔案(Babel、PostCSS、ESLint,etc),選擇 In dedicated config files
配置在指定的檔案中,不夾雜在package.json中,比較清晰,後續自定配置多了之後package.json也不會變得太大
2. 引入element-ui
以下是Element-UI官方提供的vue-cli@3的Element插件,
element-ui官方文檔我們為新版的 vue-cli 準備了相應的 Element 插件 ,你可以用它們快速地搭建一個基于 Element 的項目。
// 指令行中輸入vue ui, 啟動vue ui
vue ui
在項目管理器中導入項目
導入項目
切換到進入項目,切換到插件管理子產品,點選添加插件
插件管理
搜尋element,選中vue-cli-plugin-element,點選
安裝vue-cli-plugin-element
安裝插件
安裝完成後,可以對插件進行相應配置,這裡使用預設即可
配置插件
完成配置後,進入到檔案改動,可以選擇送出修改或者跳過
送出修改
啟動vue項目,頁面中如果有出現el-button按鈕,說明已經成功引入Element-ui
項目初始化後的頁面