一、创建文件夹

npm init -y
生成package.json文件
npm install vue vue-renderer --save

、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、

二、动态路由权限

image-20230324120649179

三、递归拼接树形结构

要求实现如下图:

image-20230324162653904

变为下图这种树形结构

image-20230324162731049

1.筛选一级菜单

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>递归拼接树形结构</title>
</head>

<body>

    <script>
        const rootList = [
            { id: 1, parent: null, text: '菜单1' },
            { id: 11, parent: 1, text: '菜单1-1' },
            { id: 12, parent: 1, text: '菜单1-2' },
            { id: 2, parent: null, text: '菜单2' },
            { id: 21, parent: 2, text: '菜单2-1' },
        ]

        function getTreeList(rootList,id,list){
            //遍历
            for (let item of rootList){
                //传入的 id 和  parent 对比,相同就加入list
                if(item.parent == id){
                    list.push(item)
                }
            }
            console.log(list,'list')
        }

        const res = getTreeList(rootList,null,[])
        console.log(res,'res')

    </script>
</body>

</html>

image-20230324161627973

2.加入子菜单

function getTreeList(rootList,id,list){
    //遍历
    for (let item of rootList){
    if(item.parent == id){
    list.push(item)
    }
}


for(let i of list){
    i.children =[]
    getTreeList(rootList,i.id,i.children)
    if(i.children.length == 0){
    delete i.children
    }
}

return list

}

image-20230324162332963

四、解析移动端 rem 布局【CSS小知识】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 因为 1rem = html中的font-size 大小,
        所以只需要动态计算不同设备下的html的font-size大小 */
        html{
            font-size: 16px;
        }
        body{
            font-size: 1rem;
        }
    </style>
</head>
<body>
    <div>一段文字</div>
</body>
</html>

假设,设计稿是375px

image-20230324164130138

100vw == 375px :100的视口宽度,等于375px

那么100px =100/3.75 =26.6666667 vw

image-20230324163846600

当 屏幕切换为414px时,则会大于 26.666667vw, 那么div中的font-size就会相应的变大

image-20230324164706530

image-20230324164758172

五、Vue打包优化 - 加快首屏加载速度【Vue小技巧】

https://github.com/webpack-contrib/webpack-bundle-analyzer

image-20230324165112475

这个插件用来分析,webpack 打包后的结果的

image-20230324165343474

image-20230324165434685

image-20230324165532866

image-20230324165558785

image-20230324170328230

如果这些都不打包,怎么使用vue,vue-router这些呢?

答案是:通过引入CDN

image-20230324170551942

image-20230324170651319

image-20230324170738183

image-20230324170937154

六、图片懒加载

image-20230324172119143

image-20230324172306900

image-20230324172334592

七、Vue项目的性能优化

1、v-for 正确设置key
2、封装复用的模块(http请求)、组件(ui库)
3、路由懒加载:component:() => import('./xxx.vue')
4、productionSourceMap: false

在设置了productionSourceMap:false 之后,就不会生成map文件,map文件的作用在于:项目打包后,代码都是经过压缩加密的,如果运行时报错,输出的错误信息无法准确得知是哪里的代码报错。如果不需要定位问题,并且不想被看到源码,就把productionSourceMap 置为false,既可以减少包大小,也可以加密源码。

5、启用gzip压缩,打包体积更小
6、keep-alive 缓存不活跃组件
7、插件CDN方式引入,减小项目体积
8、图片使用CDN地址,图片懒加载

八、Vue组件数据传递

父组件:

image-20230324210828667

image-20230324210811056

子组件使用,this.$emit(“自定义事件名称”,参数)

image-20230324210541081

另一种写法:

image-20230324211358469

image-20230324211415125

image-20230324211710606

九、webpack的构建流程? ?

webpack启动后,从entry开始,递归解析entry依赖的所有module,找到每module.rules里配置的loader进行相应的转换处理,对module转换后,解析模块,解析的结果是一个一个的chunk,最后webpack会将所有chunk 转换,在整个构建过程中,webpack会执行plugin当中的插件,完成plugin的任务

entry: 模块入口,使得源文件加入到构建流程中

output: 配置如何输出最终的文件

module: 配置各种类型的模块的处理规则

plugin: 配置扩展插件的

devServer:实现本地服务: 包括 http 。模块热替换。 source map等服务

十、使用url-loader打包图片

安装url-loader

npm install url-loader -D

使用配置:

image-20230326010235355

image-20230326010138934

十一、Echarts 封装

image-20230409093052206

image-20230409103811967

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>ECharts</title>
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="echarts.js"></script>
  </head>
  <body>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
      // 基于准备好的dom,初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'));

      // 指定图表的配置项和数据
      var option = {
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
          data: ['销量']
        },
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    </script>
  </body>
</html>

image-20230409103958023

image-20230409104033420

image-20230409104153746

image-20230409104318176

自定义 style

image-20230409104456599

image-20230409104516988

image-20230409104544132

将 myChart 交给 data() 管理,而不是 var myCharts =。。。。。

image-20230409104728637

image-20230409104808867

image-20230409105009104

image-20230409105034807

image-20230409105129167

image-20230409105254895

image-20230409105339140

image-20230409105418183

image-20230409105506832

image-20230409105704472

image-20230409105848060

image-20230409110020313

十二、搭建组件库

image-20230410094530498

yarn start  启动项目

image-20230410094629199

十三、File

image-20230411212927260