第170天学习打卡（项目 谷粒商城12 Vue整合ElementUI快速开发）

Vue整合ElementUI快速开发

出现的问题：

 Unknown custom element: <el-input> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

解决办法：

main.js

 // The Vue build version to load with the `import` command
 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 import Vue from 'vue'
 import App from './App'
 import router from './router'
 import ElementUI from 'element-ui' //element-ui的全部组件
 import 'element-ui/lib/theme-chalk/index.css'//element-ui的css
 Vue.use(ElementUI) //使用elementUI
 ​
 Vue.config.productionTip = false
 ​
 /* eslint-disable no-new */
 new Vue({
   el: '#app',
   router,
   components: { App },
   template: '<App/>'
 })
 ​

Hello.vue

 <template>
   <div>
     <h1>你好, Hello, {{ name }}</h1>
 ​
     <el-radio v-model="radio" label="1">备选项1</el-radio>
     <el-radio v-model="radio" label="2">备选项2</el-radio>
   </div>
 </template>
 ​
 <script>
 export default {
   data() {
     return {
       name: "张三",
       radio: "2"
     };
   }
 };
 </script>
 ​
 <style>
 </style>

当el-table元素中注入data对象数组后，在el-table-column中用prop属性来对应对象中的键名即可填入数据，用label属性来定义表格的列名。可以使用width属性来定义列宽。

vscode添加用户代码片段（快速生成vue模板）

模板

 // {
 //  // Place your 全局 snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and 
 //  // description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope 
 //  // is left empty or omitted, the snippet gets applied to all languages. The prefix is what is 
 //  // used to trigger the snippet and the body will be expanded and inserted. Possible variables are: 
 //  // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. 
 //  // Placeholders with the same ids are connected.
 //  // Example:
 //  // "Print to console": {
 //  //  "scope": "javascript,typescript",
 //  //  "prefix": "log",
 //  //  "body": [
 //  //      "console.log('$1');",
 //  //      "$2"
 //  //  ],
 //  //  "description": "Log output to console"
 //  // }
 // }
 {
     "生成vue模板": {
         "prefix": "vue",
         "body": [
             "<!-- $1 -->",
             "<template>",
             "<div></div>",
             "</template>",
             "",
             "<script>",
             "//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）",
             "//例如：import 《组件名称》 from '《组件路径》';",
             "",
             "export default {",
             "//import引入的组件需要注入到对象中才能使用",
             "components: {},",
             "props: {},",
             "data() {",
             "//这里存放数据",
             "return {",
             "",
             "};",
             "},",
             "//监听属性 类似于data概念",
             "computed: {},",
             "//监控data中的数据变化",
             "watch: {},",
             "//方法集合",
             "methods: {",
             "",
             "},",
             "//生命周期 - 创建完成（可以访问当前this实例）",
             "created() {",
             "",
             "},",
             "//生命周期 - 挂载完成（可以访问DOM元素）",
             "mounted() {",
             "",
             "},",
             "beforeCreate() {}, //生命周期 - 创建之前",
             "beforeMount() {}, //生命周期 - 挂载之前",
             "beforeUpdate() {}, //生命周期 - 更新之前",
             "updated() {}, //生命周期 - 更新之后",
             "beforeDestroy() {}, //生命周期 - 销毁之前",
             "destroyed() {}, //生命周期 - 销毁完成",
             "activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发",
             "}",
             "</script>",
             "<style  scoped>",
             
             "$4",
             "</style>"
         ],
         "description": "生成vue模板"
     }
 }
 ​

 

App.vue

 <template>
   <el-container style="height: 500px; border: 1px solid #eee">
     <el-aside width="200px" style=" color: rgb(17, 119, 0);">>
       <el-menu :default-openeds="['1', '3']" router>
         <el-submenu index="1">
           <template slot="title"
             ><i class="el-icon-message"></i>导航一</template
           >
           <el-menu-item-group>
             <template slot="title">分组一</template>
             <el-menu-item index="/table">用户列表</el-menu-item>
             <el-menu-item index="hello">Hello</el-menu-item>
           </el-menu-item-group>
           <el-menu-item-group title="分组2">
             <el-menu-item index="1-3">选项3</el-menu-item>
           </el-menu-item-group>
           <el-submenu index="1-4">
             <template slot="title">选项4</template>
             <el-menu-item index="1-4-1">选项4-1</el-menu-item>
           </el-submenu>
         </el-submenu>
         <el-submenu index="2">
           <template slot="title"><i class="el-icon-menu"></i>导航二</template>
           <el-menu-item-group>
             <template slot="title">分组一</template>
             <el-menu-item index="2-1">选项1</el-menu-item>
             <el-menu-item index="2-2">选项2</el-menu-item>
           </el-menu-item-group>
           <el-menu-item-group title="分组2">
             <el-menu-item index="2-3">选项3</el-menu-item>
           </el-menu-item-group>
           <el-submenu index="2-4">
             <template slot="title">选项4</template>
             <el-menu-item index="2-4-1">选项4-1</el-menu-item>
           </el-submenu>
         </el-submenu>
         <el-submenu index="3">
           <template slot="title"
             ><i class="el-icon-setting"></i>导航三</template
           >
           <el-menu-item-group>
             <template slot="title">分组一</template>
             <el-menu-item index="3-1">选项1</el-menu-item>
             <el-menu-item index="3-2">选项2</el-menu-item>
           </el-menu-item-group>
           <el-menu-item-group title="分组2">
             <el-menu-item index="3-3">选项3</el-menu-item>
           </el-menu-item-group>
           <el-submenu index="3-4">
             <template slot="title">选项4</template>
             <el-menu-item index="3-4-1">选项4-1</el-menu-item>
           </el-submenu>
         </el-submenu>
       </el-menu>
     </el-aside>
 ​
     <el-container>
       <el-header style="text-align: right; font-size: 12px">
         <el-dropdown>
           <i class="el-icon-setting" style="margin-right: 15px"></i>
           <el-dropdown-menu slot="dropdown">
             <el-dropdown-item>查看</el-dropdown-item>
             <el-dropdown-item>新增</el-dropdown-item>
             <el-dropdown-item>删除</el-dropdown-item>
           </el-dropdown-menu>
         </el-dropdown>
         <span>王小虎</span>
       </el-header>
 ​
       <el-main>
         <router-view></router-view>
       
       </el-main>
     </el-container>
   </el-container>
 </template>
 ​
 <script>
 export default {
   data() {
     const item = {
       date: "2016-05-02",
       name: "王小虎",
       address: "上海市普陀区金沙江路 1518 弄",
     };
     return {
       tableData: Array(20).fill(item),
     };
   },
 };
 </script>
 ​
 <style>
 .el-header {
   background-color: #b3c0d1;
   color: #333; 
  line-height: 60px; 
} 
​ 
.el-aside { 
  color: #333; 
} 
</style>

 

index.js

 import Vue from 'vue'
 import Router from 'vue-router'
 import HelloWorld from '@/components/HelloWorld'
 import Hello from '@/components/Hello'
 import MyTable from '@/components/MyTable'
 ​
 Vue.use(Router)
 ​
 export default new Router({
   routes: [
     {
       path: '/',
       name: 'HelloWorld',
       component: HelloWorld
     },
     {
       path: '/hello',
       name: "Hello",
       component: Hello
     },
     {
       path: '/table',
       name: "MyTable",
       component: MyTable
     },
   ]
 })
 ​
 ​

MyTable.vue

 ​
 <template>
 <div>
     <el-table :data="tableData">
           <el-table-column prop="date" label="日期" width="140">
           </el-table-column>
           <el-table-column prop="name" label="姓名" width="120">
           </el-table-column>
           <el-table-column prop="address" label="地址"> </el-table-column>
         </el-table>
 </div>
 </template>
 ​
 <script>
 //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
 //例如：import 《组件名称》 from '《组件路径》';
 ​
 export default {
 //import引入的组件需要注入到对象中才能使用
 components: {},
 props: {},
 data() {
     const item = {
       date: "2016-05-02",
       name: "王小虎",
       address: "上海市普陀区金沙江路 1518 弄",
     };
     return {
       tableData: Array(20).fill(item),
     };
 //这里存放数据
 ​
 },
 //监听属性 类似于data概念
 computed: {},
 //监控data中的数据变化
 watch: {},
 //方法集合
 methods: {
 ​
 },
 //生命周期 - 创建完成（可以访问当前this实例）
 created() {
 ​
 },
 //生命周期 - 挂载完成（可以访问DOM元素）
 mounted() {
 ​
 },
 beforeCreate() {}, //生命周期 - 创建之前
 beforeMount() {}, //生命周期 - 挂载之前
 beforeUpdate() {}, //生命周期 - 更新之前
 updated() {}, //生命周期 - 更新之后
 beforeDestroy() {}, //生命周期 - 销毁之前
 destroyed() {}, //生命周期 - 销毁完成
 activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
 };
 </script>
 <style  scoped>
 ​
 </style>

出现的错误

 vue.esm.js?efeb:628 [Vue warn]: Invalid prop: type check failed for prop "router". Expected Boolean, got String with value "true".

解决办法

页面显示

三级分类

B站学习网址：全网最强电商教程《谷粒商城》对标阿里P6/P7，40-60万年薪哔哩哔哩bilibili