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，加入如下配置

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

以上就是Vue使用Element实现增删改查+打包的步骤的详细内容，更多关于vue 增删改查+打包的资料请关注考高分网其它相关文章！