最近需要新搭建一個前端項目接癌,因此就參考@PanJiaChen的Github項目模板vue-admin-template做部分改動坎拐,搭建一套前端框架
推薦讀一下 手摸手缕题,帶你用vue擼后臺 系列
1. 使用vue-cli3快速創(chuàng)建模板
具體vue-cli3的使用方式和注意事項可以參考使用Vue-cli 3.0搭建Vue項目
創(chuàng)建時引入以下特性:
Babel
Router
Vuex
CSS pre-processors
Linter / Formatter
其他配置
- 不使用
history mode
- CSS pre-processor 使用
LESS
個人對LESS比較熟悉朗儒,而且SCSS安裝時需要python和其他相關(guān)啥容,比較麻煩
- Linter 使用
ESLint + Standard config
使用哪個標(biāo)準(zhǔn)看個人習(xí)慣,公司其他項目都使用 Standard诵闭,保持統(tǒng)一
- 保存配置文件(Babel炼团、PostCSS澎嚣、ESLint,etc)瘟芝,選擇 In dedicated config files
配置在指定的文件中易桃,不夾雜在package.json中,比較清晰锌俱,后續(xù)自定配置多了之后package.json也不會變得太大
2. 引入element-ui
以下是Element-UI官方提供的vue-cli@3的Element插件,element-ui官方文檔
我們?yōu)樾掳娴?vue-cli 準(zhǔn)備了相應(yīng)的 Element 插件晤郑,你可以用它們快速地搭建一個基于 Element 的項目。
// 命令行中輸入vue ui贸宏, 啟動vue ui
vue ui
在項目管理器中導(dǎo)入項目
導(dǎo)入項目
切換到進(jìn)入項目造寝,切換到插件管理模塊,點擊添加插件
插件管理
搜索element吭练,選中vue-cli-plugin-element诫龙,點擊
安裝vue-cli-plugin-element
安裝插件
安裝完成后,可以對插件進(jìn)行相應(yīng)配置鲫咽,這里使用默認(rèn)即可
配置插件
完成配置后签赃,進(jìn)入到文件改動,可以選擇提交修改或者跳過
提交修改
啟動vue項目分尸,頁面中如果有出現(xiàn)el-button按鈕锦聊,說明已經(jīng)成功引入Element-ui
項目初始化后的頁面
3. 引入其他常用的庫
$ yarn add axios js-cookie normalize.css nprogress