基於Element-UI的Vue管理後臺搭建

更多內容關注公眾號：SAP Technical 

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

專案初始化後的頁面

 

3. 引入其他常用的庫

$ yarn add axios js-cookie normalize.css nprogress