基于Element-UI的Vue管理后臺搭建

最近需要新搭建一個前端項目,因此就參考@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

使用哪個標準看個人習(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 準備了相應(yīng)的 Element 插件,你可以用它們快速地搭建一個基于 Element 的項目。

// 命令行中輸入vue ui, 啟動vue ui
vue ui

在項目管理器中導(dǎo)入項目

導(dǎo)入項目

切換到進入項目,切換到插件管理模塊,點擊添加插件
插件管理

搜索element,選中vue-cli-plugin-element,點擊安裝vue-cli-plugin-element
安裝插件

安裝完成后,可以對插件進行相應(yīng)配置,這里使用默認即可
配置插件

完成配置后,進入到文件改動,可以選擇提交修改或者跳過
提交修改

啟動vue項目,頁面中如果有出現(xiàn)el-button按鈕,說明已經(jīng)成功引入Element-ui
項目初始化后的頁面

3. 引入其他常用的庫

$ yarn add axios js-cookie normalize.css nprogress
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 前言 webpack2和vue2已經(jīng)不是新鮮東西了,滿大街的文章在講解webpack和vue,但是很多內(nèi)容寫的不是...
    技術(shù)宅小青年閱讀 6,686評論 4 43
  • 夏天…… 太陽……… 打工仔…… 中午…… 干了一上午的活,沒有地方午休,全在地板上或坐或躺的休息。 還好,我們還...
    火悠悠閱讀 302評論 0 1
  • 今天周三,天氣晴,晴空萬里。這就是我今下午的心情,心情愉悅! 今天是無作業(yè)日,老師的作業(yè)很少。我就讓兒...
    任俊宇閱讀 158評論 0 0
  • 徐銘鴻2018.8.24 5.0 W5周檢視(8.20~8.24) 目標是用來實現(xiàn)的! 第5個90天踐行3個小目標...
    銘鴻minghong閱讀 293評論 0 0

友情鏈接更多精彩內(nèi)容