element-ui简洁版

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文件夹里添加新的内容【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

js

商品列表 index.vue

在element-ui里引入form组件

html

js