VUE学习系列笔记day06

最新推荐文章于 2024-10-16 16:34:42 发布

fjnu_SuXianPeng

最新推荐文章于 2024-10-16 16:34:42 发布

阅读量543

点赞数

分类专栏： VUE学习系列笔记文章标签： vue java npm

本文链接：https://blog.csdn.net/qq_41522183/article/details/111605988

版权

VUE学习系列笔记专栏收录该内容

7 篇文章 0 订阅

订阅专栏

VUE中文官网：https://vuejs.bootcss.com/guide/custom-directive.html

1、模块化相关规范

模块化概述

传统开发模式存在问题：
因为没有使用模块化开发，所以存在1.命名冲突问题（多个js文件中如果与重名变量会发生变量覆盖问题）2.文件依赖问题（js文件之间无法实现相互的引用）

通过模块化可以解决上述问题：模块化即将单独的一个功能封装到一个模块（文件）中，模块之间相互间隔，但可以通过特定的接口公开内部成员，也可以依赖别的模块。
模块化开发的优点：方便代码重用，从而提升效率，方便后期维护（降低耦合）

浏览器端模块化规范

1.AMD

Require.js(http://www.requirejs.cn/)

2.CMD

Sea.js(http://seajs.github.io/seajs/docs/)

服务器端模块化规范

1.CommonJS

模块化分为单文件模块与包
模块成员导出：module.exports和exports
模块成员导入: require(‘模块标识符’)

ES6模块化规范

上述规范存在一定差异性与局限性，不是浏览器与服务器的通用模块化标准，而ES6模块化规范是浏览器端与服务器端通用的模块化开发规范。
ES6模块化开发规范定义：

每个js文件都是一个独立的模块
导入模块成员使用import关键字
暴露模块成员使用export关键字

ES6模块化

Babel安装步骤：（它可以将高级的有兼容性的js代码转换为低级的没有兼容性的js代码）

1.npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node （安装babel依赖包）
2.npm install --save @babel/polyfill （安装插件）、
3.项目根目录创建文件babel.config.js
4.babel.config.js文件添加代码:

const presets =[
    ["@babel/env", {
        targets: {
            edge: "17",
            firefox: "60",
            chrome: "67",
            safari: "11.1"
        }
    }]
]
module.exports = {}

5.通过npx babel-node index.js执行文件中的代码（index.js为文件名）

注：弄清为什么要用Babel
原因在Node中默认支持CommonJS服务器端模块化，对Node支持不是很好，所以需要借助Babel插件，在Node中体验高级的ES6特性

ES6模块化基本语法

1.默认导出与默认导入

默认导出语法：export defaul{} ;此法可以导出默认暴露的成员，在一个模块（JS）中只能有一个默认导出块。

let a = 10
let b = 20
let c = 30
function  show() {
    console.log("1111111")
}

export let d;//按需导出
d=40;

export default {//默认导出
    a,
    b,
    show
}

默认导入语法：import 接收名称 from ‘模块化标识’ ；接收名称可是自定义的任意合法名称。

import hello from "./hello.js" //默认
import {d} from "./hello.js" //按需
import hello,{d} from "./hello.js" //默认导入与按需导入
import "./demo1.js" //直接导入

console.log(hello,d);

注：使用babel插件进行执行JS文件的命令是：npx babel-node .\index.js

2.按需导出与按需导入

按需导出语法：export let s1=10 ；即在需要导出的变量，其定义的头部加上export关键字。
按需导入语法：import {s1} from ‘模块标识符’；在{}中进行需要导入变量的声明，名称要与变量名称一致，如果要起别名可以使用as关键字，即 {s1 as demo}，demo就是s1的别名了；如果要与默认导入一起使用则二者以 , 隔离开即可。

3.直接导入并执行模块代码

适用场景：当不需要导入变量成员只需要执行模块中的代码时，可以使用直接导入来执行模块中的代码。demo1.js中代码为：

for(let i=0;i<5;i++){
    console.log(i);
}

直接导入(即将from模块省略)：
运行结果为打印出值0-4

2.Webpack

Webpack概述

Webpack是前端项目构建工具（打包工具），提供了友好的模块化支持，以及代码压缩的混淆，js兼容、性能优化等强大功能。

Webpack的基本使用

以实现隔行变色demo为例

1.创建列表隔行变色项目

步骤为：
在这里插入图片描述

此处注意事项：
1.传统html中引入js依赖的方式是使用script标签，而在这次模块化标签中还是。
2.在第四点中初始化要引入隔行变色的js依赖。
3.在第五点中要通过模块化方式引用jQuery来实现隔行变色效果。
4.在所有步骤执行完毕之后，在浏览器上运行会发现没有实现隔行变色效果是因为ES6模块化语法浏览器不能识别存在JavaScript的兼容性问题，所以需要使用webpack将其兼容性问题取消解决。
Index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
	<script type="text/javascript" src="index.js"></script>
</head>
<body>
    <input type="text" placeholder="测试">
    <ul>
        <li>这是第1个li</li>
        <li>这是第2个li</li>
        <li>这是第3个li</li>
        <li>这是第4个li</li>
        <li>这是第5个li</li>
        <li>这是第6个li</li>
        <li>这是第7个li</li>
    </ul>
</body>

</html>

Index.js:

import $ from 'jquery'
//实现隔行变色
$(function () {
    $('li:odd').css('backgroundColor','red');//odd表示为奇数的li
    $('li:even').css('backgroundColor','yellow')//even表示为偶数的li
})

2.在项目中安装配置Webpack

步骤为：
在这里插入图片描述

此处注意事项：
1.在第三点中mode除了可以配置为development之外还可以配置为production。二者区别为development模式下，运行打包时不会对代码进行压缩与混淆，转换代码速度会更快，适用于开发阶段；production模式适用于产品发布使用，会对代码进行压缩与混淆，其转换速度较慢，但是在之后的使用，其文件大小更小，编译速度更快。
2.在第四点中进行配置是为了方便运行打包命令。
3.运行npm run dev之后会自动生成一个dist目录，目录下存放着打包好的main.js文件，此时使用在index.html中使用该文件即可实现隔行变色的效果（注：文件生成路径与名称可以自定义，自定义方式见下节，如何配置需要打包文件也见下节）
在这里插入图片描述

打包运行结果：
在这里插入图片描述

最后一行表示版本信息，此处webpack版本为5.11

3.配置打包入口与出口

步骤为：
在这里插入图片描述

注意事项为：
1.在entry中__dirname可以动态获取到当前目录的绝对路径,而path模块可以封装所需打包文件的绝对路径（注：path模块作用为封装请求路径；且这种配置并没有解决node_modules模块会自动打包问题）。
2.在output中，path属性指定输出文件路径，filename指定输出文件名称。

4.自动打包功能

因为每次修改完index.js代码，但是在html中引用的是打包后的代码，如果我们想让修改后的效果呈现，那么就要重新打包，这个过程比较繁琐，所以需要配置自动打包。
步骤为：
在这里插入图片描述

注意事项：
1.需要进行第三步的原因是webpack-dev-server 相当于开了一个服务器进行实时监听并打包，此时依赖是直接挂载到服务器根目录上，所以路径需要改为/bundle.js，值得注意的是其打包输出的文件虽然在根目录中但是访问地址却看不到，因为其是虚拟的，看不见的。
2.执行第四步出错，因为webpack-cli与webpack-dev-server版本依赖冲突，然后webpack安装的版本也太高了，最终的解决方法为卸载安装的局部依赖，安装成下图版本的依赖，问题解决。安装修改依赖的版本命令与卸载版本命令为（以webpack-dev-server为例）：安装为 npm install webpack-dev-server@3.1.14 -D 卸载为npm uninstall webpack-dev-server -D
在这里插入图片描述

终止webpack-dev-server启动程序的快捷键为 ctrl+c
3.执行命令后要观察控制台输出的访问地址，默认是localhost:8080

5.配置html-webpack-plugin生成预览页面

使用原因：运行webpack-dev-server后输入localhost:8080无法直接打开所想要的页面，此时就需要进行配置。
步骤为：

在这里插入图片描述

6.自动打包相关参数配置

实现执行npm run dev就打开指定网址。
配置步骤为：
在这里插入图片描述

注意事项为：可以通过配置host与port改变访问路径、端口

WebPack中的加载器

使用原因：因为webpack只能打包.js结尾的模块(是借用babel进行打包)，对于其它非.js结尾的模块无法打包处理（比如css，图片资源等），所以此时就需要使用到对应的加载器进行加载打包，否则会报错。所以简单来说loader加载器的作用就是协助webpack打包特定的文件模块。
下图为一些loader所对应打包的文件模块：
在这里插入图片描述

1.打包处理css文件

步骤为：
在这里插入图片描述

注意事项：
1.rules规则调用loader是由后往前，对应文件由前一个loader处理完之后再交给下一个loader，顺序不能改变。
2.此module是与之前的plugins评级的，具体见最后附录的webpack.config.js

2.打包处理less文件

步骤为：
在这里插入图片描述

3.打包scss文件

注：scss与less相同，都为样式的预编语言。
步骤为：
在这里插入图片描述

注意事项：修改配置文件中记得重新启动

4.配置postCSS自动添加css的兼容前缀

原因：有的浏览器不兼容一些jQuery选择器之类的功能，使用时要指定浏览器才行，但是人工指定过于麻烦，所以需要配置自动兼容。
在这里插入图片描述

注意事项：只需要在原有的.css的规则中多加一个处理loader即postcss-loader即可。

5.打包样式表中的图片和字体文件

步骤为：
在这里插入图片描述

注意事项：使用limit是为了将图片转换为base64格式存储的图片（这种图片加载速度更快）

6.打包js文件中的高级语法

原因：webpack处理不了js文件中高级的js语法，所以需要借助babel转换器相关的包。
步骤为：
在这里插入图片描述

注意事项：1.第二步中执行的命令为： npm i @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D
2.使用exclude可排除无需打包的js文件（node_modules是第三方库中的js，是已经打包编译好的了）
扩展：
3.分别打包多个js文件的方法：
Url1:博客1
Url2:博客2

3.Vue单文件组件

3.1传统组件问题及解决方案

在这里插入图片描述

3.2Vue单文件组件的用法

在这里插入图片描述

3.3配置Vue组件的加载器

步骤为：
在这里插入图片描述

注意事项：在第二步之后在index.js中导入App.vue时（主要目的是测试是否可用加载.vue文件）需要注意文件后缀名不能省略否则会报错。

3.4在webpack项目中使用vue

步骤为：
在这里插入图片描述

注意事项：render在此处作用就是将App.vue组件渲染到Vue实例所挂载的节点上，具体的render用法可用看博客：
https://blog.csdn.net/sansan_7957/article/details/83014838
（在此处虽然渲染上去了，但是有报错找不到挂载div #app，其原因网上大部分说的是放的位置有问题，要放在body里，尝试了一下并没有用，个人猜测应该是因为index.html页面的影响导致的，此处就不过多纠结了）