10分钟阅读一篇关于Vue-cli3和Element-UI的文章

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