vue初始化一個項目

    vue create 項目名【element-ui-form】
    cd 項目名【element-ui-form】
    npm run serve 運行

安裝element-ui框架

    npm install --save element-ui

在main.js里面引入element-ui和

    // 引入兩個element-ui文件  ElementUI和index.css
    import ElementUI from 'element-ui'
    import 'element-ui/lib/theme-chalk/index.css'

    // 全局使用ElementUI
    Vue.use(ElementUI)

刪除home.vue/about.vue或者修改roter里面的index.js[about和home]

   刪除router文件夾下的home.vue和about.vue 

在router文件夾里添加新的內(nèi)容【index.vue和new.vue】商品列表和新增列表

  {//商品列表
    path: '/',
    name: 'Products',
    component: () => import('../views/form/index.vue')
  },
  {//商品新增
    path: '/new',
    name: 'New',
    component: () => import('../views/form/new.vue')
  },
  {// 商品編輯
    path: '/edit/:id',
    name: 'Edit',
    component: () => import('../views/form/edit.vue')
  }

商品新增頁面 new.vue

在element-ui 輸入table
選擇自己需要的組件 引入

html

  <template>
  <div class="new">
    <h1><router-link to="/new">新增列表</router-link></h1>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
    <el-form-item label="商品名稱" prop="name">
      <el-input v-model="ruleForm.name"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm('ruleForm')">立即創(chuàng)建</el-button>
      <el-button @click="resetForm('ruleForm')">重置</el-button>
    </el-form-item>
  </el-form>
  </div>
</template>

js

  <script>
export default {
  name: 'New',
   data() {
      return {
        list: [],
        ruleForm: {
          name: ''
        },
        rules: {
          name: [
            { required: true, message: '請輸商品名稱', trigger: 'blur' },
            { min: 3, max: 5, message: '長度在 3 到 15 個字符', trigger: 'blur' }
          ]
        }
      };
    },
    created() {
      this.list = [];
      try{
        if(localStorage.getItem('products')){
          this.list = JSON.parse(localStorage.getItem('products'))
        }
      }catch(err){
        console.log(err)
        }
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            // alert('submit!');
          this.list.push({
            ...this.ruleForm,
            id: Date.now()
          })
          localStorage.setItem('products', JSON.stringify(this.list));
          this.$router.push({
            name: 'Products'
          });
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
}
</script>

商品列表 index.vue

在element-ui里引入form組件

html

  <template>
    <div class="products">
      <h1><router-link to="/new">商品列表</router-link></h1>
      <h1><router-link to="/second">商品新增second</router-link></h1>
      <el-table
        :data="products"
        style="width: 100%">
        <el-table-column
          type="index"
          label="序號"
          width="180">
        </el-table-column>
        <el-table-column
          prop="name"
          label="商品名稱"
          width="180">
        </el-table-column>
        <el-table-column
          prop="address"
          label="地址">
        </el-table-column>
      </el-table>
    </div>
  </template>

js

  <script>
export default {
    name: 'Products',
    data() {
      return{
        products: []
      }
    },
    created() {
      try{
        if(localStorage.getItem('products')){
        this.products = JSON.parse(localStorage.getItem('products'))
      }
      }catch(err){
        console.log(err)
      }
    }
  }
</script>