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

本文轉載自查看原文 2020-01-02 00:20 665

file

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

file

npm run serve

file

vue腳手架的自定義配置

通過package.json配置項目

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

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

Element-UI的使用

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

地址：

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

file

用命令行的方式手動安裝

安裝依賴包 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')

file