Vue使用Element实现增删改查+打包

在我们进行项目开发期间，避免不了使用各式各样的组件，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

一套基本的增删改查就可以了呀，Vue有一套admin模版，开箱即用。
vue-element-admin非常不错，大家可以去使用一下子

打包

默认打包的话会导致静态资源引用存在问题，打开一片空白，所以我们打包前需要先配置一下静态资源
在package.json这个文件同级的目录，新建一个vue.config.js，加入如下配置

/**
 *  Created By 憧憬
 */
module.exports = {
    publicPath: './'        // 静态资源目录配置为./ 当前目录
};

本文为作者原创，手码不易，允许转载，转载后请以链接形式说明文章出处。