【大项目】-商城管理系统

#2022/8/17

今天开始新的项目
一开始搭建Vue的环境的时候，创建脚手架还是比较顺利的，但是一到element uI的全局部署直接歇币，npm疯狂报错

处理完以后其实非常的简单。
原因其实不是什么权限，或者路径的问题，就是我当时NODE在C和F盘乱装，版本号不对，path一堆乱搞，全是报错，然后卸载干净去安装了nvm，下载的node和npm非常的干净，安装的非常的顺利（真的感觉身心解放）。

#2022/8/18

太难了，想试着用HbuilderX，内置终端这个沙🖊东西，还有内置代码块，搞了一个上午。
还是用webstorm香。
现在开始配置Router

第一步

先导入vue-router

npm install vue-router --save

新建一个JS文件在Src目录下

第二步

配置路由（虽然不知道这个配置的原理是什么）

import Vue from "vue";
import Router from "vue-router"
Vue.use(Router)
export default new Router({

    routes:[]
})

记得要导入到main.js里面

这里因为项目是VUE2,所以，在导入vue-router的时候一定要注意版本问题，vue-router@4.x是vue3，vue-router@3.x是vue2

路由个人感觉就像是一个快捷打开方式，通过router来打开其它导入的vue程序。一个路由对应的一个页面，那很多页面，router里面东西就很多，可以另外起一个js来存放路由。

let routes =[
    {
        path:'/',
        name:'layout',
        component:()=>import('../../views/layout'),
        children:[{
            path:'/index',
            name:'index',
            component:()=>import('../../views/index/index.vue')
        }]
    },
    {
        path:'/login',
        name:'login',
        component:()=>import('../../views/login/index.vue')
    }
]
//就像一个门，打开了routes就可以出去被别人使用
export default routes

如果没有 export default 就会报错。（报错我找了很久才发现没有e一下）

2022/8/19

昨天其实忘记一个很重要的点，就是目录存放的规律。就像是在家里整理东西，什么东西放在一起，要用的时候才会找到。
比如：视图类的文件放在一类
功能性文件放在一类
调试文件放在一类
感觉自己每次写东西，都是乱七八糟的

自动生成路由

通过递归遍历整个文件夹，对component的组件遍历

function creatRoutes(arr){
    for (let i = 0; i < arr.length; i++) {
        if(!arr[i].component)return
        //自动生成component
        let componentFun =import(`../../views/${arr[i].component}.vue`)
        arr[i].component= ()=>componentFun
        if(arr[i].children&&arr[i].children.length>0){
            creatRoutes(arr[i].children)
        }
    }
}

Ui界面的构建

2022/8/22

今天上午完成导航栏的设置

有几个要点吧，这两个导航栏要完成动态化的实现，不可以仅仅局限于页面的表面，将他们以数据的形式体现，这种动态化的实现方式方便后期的管理。

   <el-menu-item index="2-4-1">选项1</el-menu-item>
      <el-menu-item index="2-4-2">选项2</el-menu-item>
      <el-menu-item index="2-4-3">选项3</el-menu-item>
      //这里只显示了三种，比较直观的写出来，但是数量多了不好管理

通过循环遍历输出的方式，将每个标签都打印出来，默认显示首页
关于过滤器，一般会单独写一个文件出来配置，我是写到Mixins目录里面

 <el-menu-item :index="index|numToString" v-for="(item,index) in navBar.list" :key="index">{{item.name}}</el-menu-item>

   navBar:{
      active:'0',
      list:[
        {name:"首页"},
        {name:"商品"},
        {name:"订单"},
        {name:"会员"},
        {name:"设置"},
      ]
    }

现在遇到了一个问题，在for循环打印的过程中，我的icon没显示出来，离谱。
笑死，class原来也可以加v-bind，然后icon就显示出来了，我看了一下元素，icon-直接以字符串的形式显示，我就想bind一下，结果就出来了，离谱。

 <i :class="item.icon"></i>

面包屑导航，我真的要谢了，bro。
在首页，是一个主页面面板，不需要面包屑导航
类似和这个一样

所以，我们在获取path和name的时候，是要过滤index和layout的

 data.forEach((v,k)=>{
        //  过滤layout
        if(v.name==='index'||v.name ==='layout') return 0
        {
           arr.push({
                name:v.name,
                path:v.path
              }
          )}
      })

2022/8/25

今天大致的导航栏的功能做完了，中间遇到的问题实在令人头大。

2022/9/3

刚开学，考研的东西复习的多一点，每天就开始跟进一点点吧。
之前出现了一个非常细节的错误。

这里一定要用的花括号{}

ECHART的加入

导入echart的时候不可以使用

import echarts from "echarts"

替换成

import * as echarts from "echarts"