项目偏管理类型,没有太复杂的交互设计。因此就选用了element-ui框架进行页面开发。
简单说下,首先第一步搭建vue工程。从vue官网,用命令搭建,记得配置node环境。
启动之后,修改 HelloWorld.vue
<template>
<div>
</div>
</template>
主要是体现element-ui---
项目中引入:
npm i element-ui -S
然后再 main.js
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
修改 HelloWorld.vue
<template>
<div>
<el-button type="success">测试</el-button>
</div>
</template>
element 插件较大,我们项目也就引用一些常用组件。可以只引入需要的组件,以达到减小项目体积的目的
例如:我们只引用 button 组件:
修改main.js
import {Button} from 'element-ui'
Vue.use(Button)
这个时候,页面虽然有button 标签,但是没有button 样式,
引入:
npm install babel-plugin-component -D
加载样式:
修改 .babelrc 文件 plugins 属性
"plugins": ["transform-vue-jsx", "transform-runtime", [
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]],
然后刷新下 界面 button 按钮 有样式了!