10分鐘閱讀一篇關於Vue-cli3和Element-UI的文章

Vue-cli

Vue腳手架的基本用法，vue腳手架用於快速生成vue項目基礎架構：

地址：

https://cli.vuejs.org/zh/

使用方式，安裝3.x版本的vue腳手架

npm install -g @vue/cli

功能豐富

對 Babel、TypeScript、ESLint、PostCSS、PWA、單元測試和 End-to-end 測試提供開箱即用的支持。

易於擴展

它的插件系統可讓社區根據常見需求構建和共享可複用的解決方案。

無需 Eject

Vue CLI 徹底是可配置的，無需 eject。這樣你的項目就能夠長期保持更新了。

CLI 之上的圖形化界面

經過配套的圖形化界面建立、開發和管理你的項目。

即刻建立原型

用單個 Vue 文件即刻實踐新的靈感。

面向將來

爲現代瀏覽器輕鬆產出原生的 ES2015 代碼，或將你的 Vue 組件構建爲原生的 Web Components 組件。

基於交互式命令行的方式，建立vue項目

vue create my-project

基於圖形化界面的方式，建立vue項目

vue ui

基於2.x的方式，建立vue項目

npm install -g @vue/cli-init
vue init webpack my-project

npm run serve

vue腳手架的自定義配置

經過package.json配置項目

"vue":{
 "devServer":{
  "port":"8888",
  "open":true
  }
}

不推薦使用這種配置方式，由於package.json主要用來管理包的配置信息，推薦將vue腳手架相關的配置，單獨定義到vue.config.js配置文件中。

Element-UI的使用

它是一套爲開發者，設計師和產品經理準備的基於Vue2.0的桌面端組件庫。

地址：

http://element-cn.eleme.io/#/...

用命令行的方式手動安裝

安裝依賴包 npm i element-ui -S
導入 Element-UI 相關資源

// 導入組件庫
import ElementUI from 'element-ui';
// 導入組件相關樣式
import 'element-ui/lib/theme-chalk/index.css';
// 配置vue插件
Vue.use(ElementUI);

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'

// 手動配置element-ui
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

Vue.config.productionTip = false

new Vue({
 router,
 render: h=>h(App)
}).$mount('#app')

用圖形化界面自動安裝

運行vue ui命令，打開圖形化界面，經過vue項目管理器，進入具體的項目配置面板，點擊插件，添加插件，進入插件查詢面板，搜索vue-cli-plugin-element，而後安裝。

插件配置

參考資料：

https://cli.vuejs.org/zh/

在博客平臺裏，將來的路還很長，也但願本身之後的文章你們能多多支持，多多批評指正，咱們一塊兒進步，一塊兒走花路。

很是感謝讀者能看到這裏，若是這個文章寫得還不錯，以爲「達達」我有點東西的話，以爲我可以堅持的學習，以爲此人能夠交朋友的話， 求點贊👍 求關注❤️ 求分享👥 對暖男我來講真的

很是有用！！！

❤️ 不要忘記留下你學習的腳印 [點贊 + 收藏 + 評論]

做者Info：

【做者】：Jeskson
【原創公衆號】：達達前端小酒館。
【福利】：公衆號回覆 「資料」 送自學資料大禮包（進羣分享，想要啥就說哈，看我有沒有）！
【轉載說明】：轉載請說明出處，謝謝合做！~

大前端開發，定位前端開發技術棧博客，PHP後臺知識點，web全棧技術領域，數據結構與算法、網絡原理等通俗易懂的呈現給小夥伴。謝謝支持，承蒙厚愛！！！

---

若本號內容有作得不到位的地方（好比：涉及版權或其餘問題），請及時聯繫咱們進行整改便可，會在第一時間進行處理。

---

請點贊！由於大家的贊同/鼓勵是我寫做的最大動力！

歡迎關注達達的CSDN！

這是一個有質量，有態度的博客