VUE3基础学习

文章参考 黑马程序员Vue全套视频教程 仅作学习与记录

一：前端工程化

1.小白前端开发 VS 实际前端开发

小白眼中的前端开发

• 会写 HTML+CSS+JavaScript 就会前端开发
• 需要美化界面样式，就拽一个bootstrap过来
• 需要操作DOM与Ajax，再拽一个JQuery过来
• 需要渲染模板结构，就用art-template等模板引擎

实际前端开发

• 模块化（js模块化 css模块化 其他资源模块化）
• 组件化（复用现有的UI结构、样式、行为）
• 规范化（目录结构、编码、接口、文档、Git分支管理）
• 自动化（自动化构建、自动部署、自动测试）

2.什么是前端工程化

前端工程化指的是：在企业级的前端项目开发中，把前端所需要的 工具、技术、流程、经验等进行规范标准化。最终落实在四个细节上，就实现前端的“4个现代化”：

模块化、组件化、规范化、自动化

3.前端工程的好处

1.前端工程化让前端开发能够“自成体系”，覆盖项目从创建到部署的方方面面

2.最大效率的提高了前端开发效率，降低技术选型、前后端联调等带来协调沟通成本

4.前端工程化解决方案

早期（已边缘化）：

• grunt ( https://www.gruntjs.net/ )
• gulp ( https://www.gulpjs.com.cn/)

目前主流的前端工程化解决方案:

• webpack ( webpack | webpack 中文文档 | webpack 中文网)
• 0parcel ( https://zh.parcelis.org/ )

二：webpack的基本使用

1.什么是webpack

webpack是前端项目工程化的具体解决方案。

主要功能：他提供了友好的前端规模化开发支持，以及代码压缩混淆、处理浏览器端JavaScript的兼容性、性能优化的功能。

好处：让程序员把工作重心放到具体功能的实现上，提高前端开发效率和项目的可维护性

注意：目前企业级的前端项目，绝大多数都是基于webpack进行打包构建的

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

1.前期准备

1. 新建项目空白目录，并运行 npm init -y 命令，初始化包管理配置文件 package.json
2. 新建 src 源代码目录
3. 新建 src ->index.html 首页和 src ->indexjs 脚本文件
4. 初始化首页基本的结构
5. 运行 npm install jquery -S 命令，安装jQuery
6. 通过 ES6 模块化的方式导入jQuery，实现列表隔行变色效果

2.在项目中安装webpack

在终端运行如下的命令，安装 webpack 相关的两个包：

 npm install webpack@5.5.1 webpack-cli@4.2.0 -D

3.在项目中配置webpack

1.在项目根目录中，创建名为 webpack.config.js 的 webpack 配置文件，并初始化如下的基本配置:

// mode 用来指定构建模式。可选值有 development 和 production
// 开发阶段一般使用 development 上线前改为production
module.exports = {
    mode:development’ 
 }

2.在 package.json 的 scripts 节点下，新增 dev 脚本如下:

 "scripts": {
    "dev":"webpack”// script 节点下的脚本，可以通过 npm run 执行。如 npm run dev
 }

 3.在终端中运行 npm run dev 命令，启动 webpack 进行项目的打包构建

3.mode的可选值

1.development

• 开发环境
• 不会对打包生成的文件进行代码压缩与性能优化
• 打包速度快，适合在开发阶段

2.production

• 生产环境
• 会对打包的文件进行代码压缩与性能优化
• 打包速度慢，仅适合在发布阶段使用

4.webpack.config.js 文件的作用

1. webpack.config,js 是 webpack 的配置文件。webpack 在真正开始打包构建之前，会先读取这个配置文件从而基于给定的配置，对项目进行打包。
2. 注意:由于 webpack 是基于 node.js 开发出来的打包工具，因此在它的配置文件中，支持使用 node.js 相关的语法和模块进行 webpack 的个性化配置。

5.webpack 中的默认约定

• 默认的打包入口文件为 src -> index.js
• 默认的输出文件路径为 dist -> main.js

       注意:可以在 webpack.config.js 中修改打包的默认约定

6.自定义打包的入口与出口

在 webpack.confiq.is 配置文件中，通过 entry 节点指定打包的入口。通过 output 节点指定打包的出口示例代码如下:

const path = require('path') // 导入 node.js 中专门操作路径的模块

module.exports = {
    entry: path.join(_dirname，'./src/index.js')，// 打包入口文件的路径
    output: {
        path: path.join(_dirname，'./dist')，// 输出文件的存放路径
        filename:bundle.js’// 输出文件的名称
    }
 }

三：webpack的插件

1.webpack 插件的作用

通过安装和配置第三方的插件，可以拓展 webpack 的能力，从而让 webpack 用起来更方便。最常用的webpack 插件有如下两个:

1.webpack-dev-server

• 类似于node.js 阶段用到的 nodemon 工具
• 每当修改了源代码，webpack 会自动进行项目的打包和构建

2.html-webpack-plugin

• webpack 中的 HTML 插件(类似于一个模板引擎插件)
• 可以通过此插件自定制index.html页面的内容

2.配置webpack-dev-server（实时打包）

1.修改 package.json -> scripts 中的 dev 命令如下:

"scripts": {
    "dev":"webpack serve",，// script 节点下的脚本，可以通过 npm run 执行
}

2.再次运行 npm run dev 命令，重新进行项目的打包

3.在浏览器中访问 http://localhost:8080（不唯一） 地址，查看自动打包效果

注意: webpack-dev-server 会启动一个实时打包的 http 服务器

3.打包生成的文件去哪儿了？

1.不配置webpack-dev-serve的情况下，webpack打包生成的文件，会放到实际的物理磁盘上

• 严格遵守开发者在 webpack.config.js 中指定配置
• 根据 output 节点指定路径进行存放

2.配置了 webpack-dev-server 之后，打包生成的文件存放到了内存中

• 不再根据output 节点指定的路径，存放到实际的物理磁盘上
• 提高了实时打包输出的性能，因为内存比物理磁盘速度快很多

4.生成到内存中的文件该如何访问?

webpack-dev-server 生成到内存中的文件，默认放到了项目的根目录中，而且是虚拟的、不可见的。

待续