Element是由饿了么公司前端团队开源。样式精美、组件齐全、易于上手。
组件使用
我们利用vue-cli创建一个项目,然后只需要安装element-ui即可
安装:npm i element-ui -S
然后在main.js中引用一下样式即可,可以选择按需加载,我们这边因为是演示一下,所以不去进行调整,项目中如果使用到的组件不多,可以选择按需加载。
main.js
import Vue from 'vue';
import App from './App.vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.config.productionTip = false;
Vue.use(ElementUI);
new Vue({
render: h => h(App),
}).$mount('#app')然后我们在src/components下新建一个组件,用来写我们的展示组件,然后在app.vue中导入即可
app.vue
我们首先先使用表格,将数据展示出来
Creator.vue
搜索 添加 删除 // rules指定表单验证规则
一套基本的增删改查就可以了呀,Vue有一套admin模版,开箱即用。vue-element-admin非常不错,大家可以去使用一下子
打包
默认打包的话会导致静态资源引用存在问题,打开一片空白,所以我们打包前需要先配置一下静态资源
在package.json这个文件同级的目录,新建一个vue.config.js,加入如下配置
/**
* Created By 憧憬
*/
module.exports = {
publicPath: './' // 静态资源目录配置为./ 当前目录
};