使用element ui进行开发,能vue完美的结合在一起。反正他们是这么说的🙄️
- npm安装element
npm i element-ui -S
- 引入element
- 在main.js中添加
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
Vue.use(ElementUI)
-
按需引入
- 安装babel-plugin-component,只引入需要的组件,以达到减小项目体积的目的。
npm install babel-plugin-component -D
- 将 .babelrc 修改为:
{ "presets": [ ["es2015", { "modules": false }] ], "plugins": [["component", [ { "libraryName": "element-ui", "styleLibraryName": "theme-default" } ]]] }
- 引入需要的组件
import Vue from 'vue' import { Button, Select } from 'element-ui' import App from './App.vue' Vue.component(Button.name, Button) //添加自己需要的组件button。。。 Vue.component(Select.name, Select) /* 或写为 * Vue.use(Button) * Vue.use(Select) */ new Vue({ el: '#app', render: h => h(App) })
开始使用
cnpm run dev
- webpack中route.js负责前端的路由分配,这里先来开始一个Login界面的搭建。