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

<template>
 <div id="app">
  <Creator content1="憧憬"/>
 </div>
</template>

<script>
import Creator from './components/Creator/Creator';

export default {
 name: 'app',
 components: {
  Creator
 }
}
</script>

我们首先先使用表格，将数据展示出来

Creator.vue

<template>
  <div class="Creator">
    <el-row :gutter="20">
      <el-col :span="6">
        <el-input v-model="content" placeholder="请输入内容"></el-input>
      </el-col>

      <el-col :span="2">
        <el-button type="primary">搜索</el-button>
      </el-col>
    </el-row>

    <div style="height: 20px"/>

    <el-row :gutter="10" type="flex" justify="center">
      <el-col :span="14">
        <el-table
            :data="tableData"    // 声明列表使用的数据
            :key="'zip'"      // 声明每一行的key
            border
            style="width: 100%">
          <el-table-column
              fixed
              prop="date"
              label="日期"
              width="150">
          </el-table-column>
          <el-table-column
              prop="name"     // 对应tableData里面的需要展示的键
              label="姓名"
              width="120">
          </el-table-column>
          <el-table-column
              prop="province"
              label="省份"
              width="120">
          </el-table-column>
          <el-table-column
              prop="city"
              label="市区"
              width="120">
          </el-table-column>
          <el-table-column
              prop="address"
              label="地址"
              width="300">
          </el-table-column>
          <el-table-column
              prop="zip"
              label="邮编"
              width="120">
          </el-table-column>
          <el-table-column
              fixed="right"
              label="操作"
              width="160"
              v-slot="scope" // 获取每一行的数据
           >
            <template>    
              <el-button @click="handleCreate(scope.row)"   type="text" size="small">添加</el-button>
              <el-popconfirm
                  confirmButtonText='好的'
                  cancelButtonText='不用了'
                  icon="el-icon-info"
                  iconColor="red"
                  title="这是一段内容确定删除吗？"
                  @onConfirm="handleDelete(scope.row)"
              >
                <el-button slot="reference" type="text" size="small">删除</el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>


    <el-dialog title="添加用户" :visible.sync="dialogFormVisible">
    // rules指定表单验证规则
      <el-form :model="form" status-icon ref="ruleForm" :rules="rules" :label-position="'right'">
        <el-row :gutter="10">
          <el-col :span="11">
            <el-form-item prop="name" label="姓名" :label-width="formLabelWidth">
              <el-input style="width: 200px" v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="10">
          <el-col :span="11">
            <el-form-item
                prop="dates"  // 需要验证的字段 需要对应rules里面的键
                label="日期"
                :label-width="formLabelWidth"
                :rules="[
                  {required: true, message: '必须选择一个日期', trigger: 'blur'},
                ]"     // 也可以直接写在item里面验证 也可以全放在rules。我这里是采取了两种方式
            >
              <el-date-picker
                  v-model="form.dates"
                  align="right"
                  type="date"
                  placeholder="选择日期"
                  format="yyyy 年 MM 月 dd 日" // 展示数据的格式
                  value-format="yyyy-MM-dd"    // 声明点击后的数据格式
                  :picker-options="pickerOptions">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="onOk">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  export default {
    props: {
      content1: {required: true, type: String}
    },

    data() {
    
      // 自定义验证函数 给name验证
      const validatName = (rule, value, callback) => {
        if (!value) return callback(new Error('名字不能为空'));
        if (value.length <= 0) return callback(new Error('最少一个字符'));
        return callback();
      };

      return {
        content: this.content1,
        tableData: [
          {
            date: '2016-05-02',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1518 弄',
            zip: 200331
          }, {
            date: '2016-05-04',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1517 弄',
            zip: 200332
          }, {
            date: '2016-05-01',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1519 弄',
            zip: 200333
          }, {
            date: '2016-05-03',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1516 弄',
            zip: 200334
          }],

        formLabelWidth: '120px',

        // 控制模态是否展示
        dialogFormVisible: false,
        form: {
          name: '',
          dates: null,
        },

        // 对picker组件的扩展
        pickerOptions: {
          // 将之后的时间禁用 不然选择
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
          
          // 增加 今天 昨天 一周前的快速选项
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },

        
        // 定义输入规则
        rules: {
          name: [
              // 指定验证函数       触发时机。这个是失去焦点触发
            {validator: validatName, trigger: 'blur'}
          ],
        },
      };
    },

    methods: {
      onOk() {
        
        // 使用ref进行验证 validate传入一个函数 返回一个验证是否成功的bool值
        this.$refs['ruleForm'].validate((valid) => {
          if (valid) {

            const {
              name,
              dates
            } = this.form;

          // 避免zip重复 zip++
            const maxZip = Math.max(...this.tableData.map(item => item.zip)) + 1;

            const obj = {
              name,
              date: dates,
              province: '北京',
              city: '普陀区',
              address: '上海市普陀区金沙江路 1518 弄',
              zip: maxZip
            };

        // push到数据里面
            this.tableData.push(obj);

        // 将模态隐藏
            this.dialogFormVisible = false;
          } else {
            return false;
          }
        });
      },

      // 删除数据
      handleDelete(row) {
        this.tableData.map((item, index) => {
          if (item.zip === row.zip) {
            this.tableData.splice(index, 1);
          }
        });
      },

      handleCreate() {
        // 模态展示
        this.dialogFormVisible = true;
      }
    }
  };
</script>

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

打包

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

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

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