06-?Vue 家庭桶核心知识｜前端工程 [模块化相关规范、webpack、Vue 单文件组件、Vue 脚手架、Element-UI 的基本使用]。

最编程 2024-06-07 21:14:17

...

一、前言

本系列文章旨在，复习渐进式JavaScript框架:Vue全家桶。夯实移动大前端技术基本功。为后期搭建超级App的Hybrid框架、小程序开发、Web站点开发做知识储备

文章列表:

01-????Vue全家桶核心知识|Vue基础【Vue概述、Vue基本使用、Vue模板语法、基础案例、Vue常用特性、综合案例】
02-????Vue全家桶核心知识|Vue常用特性【表单操作、自定义指令、计算属性、侦听器、过滤器、生命周期、综合案例】
03-????Vue全家桶核心知识|组件化开发【组件化开发思想、组件注册、Vue调试工具用法、组件间数据交互、组件插槽、基于组件的
04-????Vue全家桶核心知识|多线程与网络【前后端交互模式、promise用法、fetch、axios、综合案例】
05-????Vue全家桶核心知识|Vue Router【基本使用、嵌套路由、动态路由匹配、命名路由、编程式导航、基于vue-router的案例】
06-????Vue全家桶核心知识|前端工程化【模块化相关规范、webpack、Vue 单文件组件、Vue 脚手架、Element-UI 的基本使用】
07-????Vue全家桶核心知识|Vuex【Vuex的基本使用、Vuex中的核心特性、vuex案例】

二、模块化相关规范

1. 模块化概述

传统开发模式的主要问题
- ① 命名冲突
- ② 文件依赖
通过模块化解决上述问题
- 模块化就是把单独的一个功能封装到一个模块（文件）中
  - 模块之间相互隔离
  - 但是可以通过特定的接口公开内部成员
  - 也可以依赖别的模块
- 模块化开发的好处:
  - 方便代码的重用，从而提升开发效率，并且方便后期的维护

2. 浏览器端模块化规范

1. AMD(Asynchronous Module Definition,异步模块定义) 代表产品为：Require.js
- Require.js (http://www.requirejs.cn/)
1. CMD(Common Module Definition,通用模块定义) 代表产品为：Sea.js
- Sea.js (https://seajs.github.io/seajs/docs/)

3. 服务器端模块化规范

服务器端的模块化规范是使用CommonJS规范：

① 模块分为 单文件模块 与 包 ，一个文件就是一个模块，都拥有独立的作用域
② 模块成员导出：module.exports 和 exports （使用exports或者module.exports导出模块成员）
③ 模块成员导入：require('模块标识符')（使用require引入其他模块或者包）

4. 大一统的模块化规范 – ES6模块化

在 ES6 模块化规范诞生之前，Javascript 社区已经尝试并提出了 AMD、CMD、CommonJS 等模块化规范。

但是，这些社区提出的模块化标准，还是存在一定的差异性与局限性、并不是浏览器与服务器通用的模块化标准，例如：

AMD 和 CMD 适用于浏览器端的 Javascript 模块化
CommonJS 适用于服务器端的 Javascript 模块化

因此，ES6 语法规范中，在语言层面上定义了 ES6 模块化规范，是浏览器端与服务器端通用的模块化开发规范。

ES6模块化规范中定义：

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

5. 在NodeJS中安装babel

Node.js 中通过 babel 体验 ES6 模块化

① 安装babel:
- 新建一个项目文件夹
- 进入这个文件夹,在终端输入一下指令:
- npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node
  - @babel/core : Babel的核心包，包含Babel的编译器和转换逻辑。
  - @babel/cli : Babel的命令行工具，用于在终端中执行Babel命令
  - @babel/preset-env:
    - @babel/preset-env是Babel的一个预设（preset），
    - 用于根据目标环境自动选择转换插件
    - 使开发者可以使用最新的JavaScript语法特性
    - 同时确保生成的代码在目标环境中可以正确运行
  - @babel/node:
    - @babel/node是Babel提供的一个工具，用于在命令行中直接运行使用了最新JavaScript语法的脚本。
    - 它类似于Node.js命令node，但可以在运行脚本之前使用Babel进行代码转换，使你可以在不支持最新JavaScript语法的Node.js版本中运行现代的JavaScript代码
  - --save-dev:选项表示将安装的包保存到开发依赖中，这意味着这些包只在开发过程中使用，不会在生产环境中使用
② 安装完毕之后，再次输入命令安装:npm install --save @babel/polyfill
- @babel/polyfill:`
  - @babel/polyfill `是Babel提供的一个工具，用于在目标环境中添加缺失的JavaScript特性和功能。
  - 它允许你在旧版本的浏览器或Node.js中使用新版JavaScript API和语法。

③ 创建babel.config.js:项目跟目录创建文件 babel.config.js

// 在项目目录中创建babel.config.js文件。
// 编辑js文件中的代码如下：
    const presets = [
        ["@babel/env",{
            targets:{
                edge:"17",
                firefox:"60",
                chrome:"67",
                safari:"11.1"
            }
        }]
    ]
    //暴露
    module.exports = { presets }

④ babel.config.js 文件内容如下代码
⑤ 创建index.js文件:通过 npx babel-node index.js 执行代码
在项目目录中创建index.js文件作为入口文件
在index.js中输入需要执行的js代码，例如：
console.log("ok");
⑥ 使用npx执行文件:
打开终端，输入命令：npx babel-node ./index.js

6. ES6 模块化的基本语法

6.1 默认导出与默认导入

默认导出语法 export default 默认导出的成员
默认导入语法 import 接收名称 from '模块标识符'
注意：每个模块中，只允许使用唯一的一次 export default，否则会报错！

默认导出

    export default {
        成员A,
        成员B,
        .......
    },如下：
    let num = 100;
    export default{
        num
    }

默认导入

import 接收名称 from "模块标识符"，如下：
import test from "./test.js"

注意：在一个模块中，只允许使用export default向外默认暴露一次成员，千万不要写多个export default。
如果在一个模块中没有向外暴露成员，其他模块引入该模块时将会得到一个空对象

6.2 按需导出与按需导入

按需导出语法export let s1 = 10
按需导入语法 import { s1 } from '模块标识符'
注意：每个模块中，可以使用多次按需导出

按需导出

export let num = 998;
export let myName = "jack";
export function fn(){ console.log("fn") }

按需导入

import { num,fn as printFn ,myName } from "./test.js"
//同时导入默认导出的成员以及按需导入的成员
import test,{ num,fn as printFn ,myName } from "./test.js"

注意：一个模块中既可以按需导入也可以默认导入，一个模块中既可以按需导出也可以默认导出

6.3 直接导入并执行模块代码

有时候，我们只想单纯执行某个模块中的代码，并不需要得到模块中向外暴露的成员，此时，可以直接导入并执行模块代码。

import "./test2.js";

7. 小结

配置|安装包脚本:

#- `@babel/core` : Babel的核心包，包含Babel的编译器和转换逻辑。
#        - `@babel/cli` : Babel的命令行工具，用于在终端中执行Babel命令
#        - `@babel/preset-env`:
#            -  `@babel/preset-env`是Babel的一个预设（preset），
#            - 用于根据目标环境自动选择转换插件
#            - 使开发者可以使用最新的JavaScript语法特性
#            - 同时确保生成的代码在目标环境中可以正确运行
#        - `@babel/node`:
#            - `@babel/node`是Babel提供的一个工具，用于在命令行中直接运行使用了最新JavaScript语法的脚本。
npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node
# 用于在目标环境中添加缺失的JavaScript特性和功能
npm install --save @babel/polyfill

三、webpack

当前 Web 开发面临的困境

文件依赖关系错综复杂
静态资源请求效率低
模块化支持不友好
浏览器对高级 Javascript 特性兼容程度较低
etc…

1. webpack 概述

webpack 是一个流行的 前端项目构建工具（打包工具），可以解决当前 web 开发中所面临的困境。
webpack 提供了友好的模块化支持，以及代码压缩混淆、处理 js 兼容问题、性能优化等强大的功能，从而让程序员把工作的重心放到具体的功能实现上，提高了开发效率和项目的可维护性。
目前绝大多数企业中的前端项目，都是基于 webpack 进行打包构建的。

2. webpack 的基本使用

2.1 创建列表隔行变色项目

① 创建项目目录并初始化:
新建项目空白目录，并运行 npm init –y 命令
初始化包管理配置文件 package.json
② 新建 src 源代码目录
③ 创建首页及js文件:
- 新建 src -> index.html 首页
- 在项目目录中创建js文件夹，并在文件夹中创建index.js文件
④ 初始化首页基本的结构
- 在页面中摆放一个ul，ul里面放置几个li

⑤ 安装jQuery: 打开项目目录终端，输入命令 npm install jquery –S 命令，安装 jQuery

导入jQuery

//打开index.js文件，编写代码导入jQuery并实现功能：
import $ from "jquery";
$(function(){
    //设置奇数行的css
    $("li:even").css("background","pink");
    //设置偶数行的css
    $("li:odd").css("background","cyan");
})

⑥ 通过模块化的形式，实现列表隔行变色效果

注意：

此时项目运行会有错误，因为import $ from "jquery";这句代码属于ES6的新语法代码，在浏览器中可能会存在兼容性问题:
所以我们需要webpack来帮助我们解决这个问题。

2.2 在项目中安装和配置 webpack

① 运行 npm install webpack webpack-cli –D 命令，安装 webpack 相关的包
② 在项目根目录中，创建名为 webpack.config.js 的 webpack 配置文件
- 注:手打文件名称,避免拷贝出错

③ 在 webpack 的配置文件中，初始化如下基本配置：

module.exports = {
    mode:"development"//可以设置为development(开发模式)，production(发布模式)
}
// 补充：mode设置的是项目的编译模式。
// 如果设置为development则表示项目处于开发阶段，不会进行压缩和混淆，打包速度会快一些
// 如果设置为production则表示项目处于上线发布阶段，会进行压缩和混淆，打包速度会慢一些

④ 在 package.json 配置文件中的 scripts 节点下，新增 dev 脚本如下：

"scripts":{
    "dev":"webpack"
 }
// 注意：scripts节点下的脚本，可以通过 npm run 运行，如：
// 运行终端命令：npm run dev
// 将会启动webpack进行项目打包

⑤ 在终端中运行 npm run dev 命令，启动 webpack 进行项目打包。
等待webpack打包完毕之后，找到默认的dist路径中生成的main.js文件，将其引入到html页面中。

2.3 配置打包的入口与出口

webpack 的 4.x 版本中默认约定：

打包的 入口文件 为 src -> index.js
打包的 输出文件 为 dist -> main.js

如果要修改打包的入口与出口，可以在 webpack.config.js 中新增如下配置信息：

const path = require("path");
module.exports = {
    mode:"development",
    //设置入口文件路径
    entry: path.join(__dirname,"./src/xx.js"),
    //设置出口文件
    output:{
        //设置路径
        path:path.join(__dirname,"./dist"),
        //设置文件名
        filename:"bundle.js"
    }
}

__dirname表示当前文件所在的目录

2.4 配置 webpack 的自动打包功能

默认情况下，我们更改入口js文件的代码，需要重新运行命令打包webpack，才能生成出口的js文件
那么每次都要重新执行命令打包，这是一个非常繁琐的事情，那么，自动打包可以解决这样繁琐的操作

① 安装自动打包功能的包:
运行 npm install webpack-dev-server –D 命令，安装支持项目自动打包的工具
② 修改 package.json -> scripts 中的 dev 命令如下:
③ 将 src -> index.html 中，将引入的js文件路径更改为：<script src="/bundle.js"></script>
④ 运行 npm run dev 命令，重新进行打包

⑤ 在浏览器中访问 http://localhost:8080 地址，查看自动打包效果

首次打开链接报错（Webpack 自动打包出现）: Cannot GET/
原因：这是因为webpack-dev-server默主从重项目下的 public 文件夹下的 index.html 中读取

由于我们没有public这个文件夹，所出现错误，下面这个结构是默认结构：

  webpack-demo
  |- node_modules
  |- public
    |- index.html
  |- main.js
  |- package.json
  |- webpack.config.js

修复问题:

步骤1: 在 webpack.config.js 文件中修改devServer配置项(若无,则直接增加这一项)：

devServer: { 
    static: "./src" 
}

const path = require('path')
module.exports = {
  mode: 'development',
  // 修改入口和出口
  entry: path.join(__dirname, './src/index.js'), //打包入口
  output: {                                      //打包出口
    path: path.join(__dirname, './dist'),
    filename: 'bundle.js'
  },
  devServer: {
    static: "./src"                              // 修改默认打开目录
  }
}

步骤2:重新跑指令:npm run dev

注意：

webpack-dev-server 会启动一个实时打包的 http 服务器
webpack-dev-server 打包生成的输出文件，默认放到了项目根目录中，而且是虚拟的、看不见的
在自动打包完毕之后，默认打开服务器网页，实现方式就是打开package.json文件，修改dev命令：
- "dev": "webpack-dev-server --open --host 127.0.0.1 --port 9999"

2.5 配置 `html-webpack-plugin` 生成预览页面

使用html-webpack-plugin 可以生成一个预览页面。
因为当我们访问默认的 http://localhost:8080/的时候，看到的是一些文件和文件夹，想要查看我们的页面
还需要点击文件夹点击文件才能查看，那么我们希望默认就能看到一个页面，而不是看到文件夹或者目录。

实现默认预览页面功能的步骤如下：

① 安装默认预览功能的包:html-webpack-plugin:
运行npm install html-webpack-plugin –D命令，安装生成预览页面的插件

② 修改 webpack.config.js 文件头部区域，添加如下配置信息:

//导入包
const HtmlWebpackPlugin = require("html-webpack-plugin");
//创建对象
const htmlPlugin = new HtmlWebpackPlugin({
    //设置生成预览页面的模板文件
    template:"./src/index.html",
    //设置生成的预览页面名称
    filename:"index.html"
})

③ 修改 webpack.config.js 文件中向外暴露的配置对象，新增配置节点,添加plugins信息:
```
module.exports = {
    ......
    plugins:[ htmlPlugin ]
}
```

2.6 配置自动打包相关的参数

2.7 小结

配置|安装包脚本:

#!bin/bash
# 安装 webpack 解决高级语法冲突
npm install webpack webpack-cli -D
# 配置 webpack 的自动打包功能(【npm install】也可写成【npm i】
npm install webpack-dev-server -D
# 安装默认预览功能的包
npm install html-webpack-plugin -D

配置文件设置|webpack.config.js:

const path = require("path");
module.exports = {
    mode:"development",
    //设置入口文件路径
    entry: path.join(__dirname,"./src/index.js"),
    //设置出口文件
    output:{
        //设置路径
        path:path.join(__dirname,"./dist"),
        //设置文件名
        filename:"bundle.js"
    },
    devServer: {
      static: "./src"                              // 修改默认打开目录
    }
}

配置文件设置|package.json:

"description": "",
"devDependencies": {
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^4.15.1"
},
"scripts": {
    "dev": "webpack"
}

3. webpack 中的加载器

3.1 通过 loader 打包非 js 模块

在实际开发过程中，webpack 默认只能打包处理以 .js 后缀名结尾的模块，其他非 .js 后缀名结尾的模块，webpack 默认处理不了，需要调用 loader 加载器才可以正常打包，否则会报错！

loader加载器包含：

1).less-loader
2).sass-loader
3).url-loader:打包处理css中与url路径有关的文件
4).babel-loader:处理高级js语法的加载器
5).postcss-loader
6).css-loader,style-loader 注意：指定多个loader时的顺序是固定的，而调用loader的顺序是从后向前进行调用

loader 加载器可以协助 webpack 打包处理特定的文件模块，比如：

less-loader 可以打包处理 .less 相关的文件
sass-loader 可以打包处理 .scss 相关的文件
url-loader 可以打包处理 css 中与 url 路径相关的文件

3.2 loader 的调用过程

3.3 webpack 中加载器的基本使用

CSS
LESS
SCSS
PostCSS
JavaScript
Image/Font
Vue

3.3.1 打包处理 css 文件

① 运行 npm i style-loader css-loader -D 命令，安装处理 css 文件的 loader

② 在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下：

module.exports = {
            ......
            plugins:[ htmlPlugin ],
            module : {
                rules:[
                    {
                        //test设置需要匹配的文件类型，支持正则
                        test:/\.css$/,
                        //use表示该文件类型需要调用的loader
                        use:['style-loader','css-loader']
                    }
                ]
            }
        }

其中，test 表示匹配的文件类型， use 表示对应要调用的 loader

注意：

use 数组中指定的 loader 顺序是固定的
多个 loader 的调用顺序是：从后往前调用

3.3.2 打包处理 less 文件

① 运行 npm i less-loader less -D 命令

② 在 webpack.config.js 的 module -> rules数组 中，添加 loader 规则如下：

module.exports = {
            ......
            plugins:[ htmlPlugin ],
            module : {
                rules:[
                    {
                        //test设置需要匹配的文件类型，支持正则
                        test:/\.css$/,
                        //use表示该文件类型需要调用的loader
                        use:['style-loader','css-loader']
                    },
                    {
                        test:/\.less$/,
                        use:['style-loader','css-loader','less-loader']
                    }
                ]
            }
        }

3.3.3 打包处理 scss 文件

① 运行 npm i sass-loader node-sass -D 命令

② 在 webpack.config.js 的 module -> rules 数组 中，添加 loader 规则如下：

 module.exports = {
            ......
            plugins:[ htmlPlugin ],
            module : {
                rules:[
                    {
                        //test设置需要匹配的文件类型，支持正则
                        test:/\.css$/,
                        //use表示该文件类型需要调用的loader
                        use:['style-loader','css-loader']
                    },
                    {
                        test:/\.less$/,
                        use:['style-loader','css-loader','less-loader']
                    },
                    {
                        test:/\.scss$/,
                        use:['style-loader','css-loader','sass-loader']
                    }
                ]
            }
        }
   // 补充：安装sass-loader失败时，大部分情况是因为网络原因，详情参考：
   // https://segmentfault.com/a/1190000010984731?utm_source=tag-newest

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

① 运行 npm i postcss-loader autoprefixer -D 命令

② 在项目根目录中创建 postcss 的配置文件 postcss.config.js，并初始化如下配置：

const autoprefixer = require("autoprefixer");
    module.exports = {
        plugins:[ autoprefixer ]
    }

③ 在 webpack.config.js 的 module -> rules 数组中，修改 css 的 loader 规则如下：

module.exports = {
        ......
        plugins:[ htmlPlugin ],
        module : {
            rules:[
                {
                    //test设置需要匹配的文件类型，支持正则
                    test:/\.css$/,
                    //use表示该文件类型需要调用的loader
                    use:['style-loader','css-loader','postcss-loader']
                },
                {
                    test:/\.less$/,
                    use:['style-loader','css-loader','less-loader']
                },
                {
                    test:/\.scss$/,
                    use:['style-loader','css-loader','sass-loader']
                }
            ]
        }
    }

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

① 运行 npm i url-loader file-loader -D 命令
② 在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下：

module.exports = {
        ......
        plugins:[ htmlPlugin ],
        module : {
            rules:[
                {
                    //test设置需要匹配的文件类型，支持正则
                    test:/\.css$/,
                    //use表示该文件类型需要调用的loader
                    use:['style-loader','css-loader']
                },
                {
                    test:/\.less$/,
                    use:['style-loader','css-loader','less-loader']
                },
                {
                    test:/\.scss$/,
                    use:['style-loader','css-loader','sass-loader']
                },{
                    test:/\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
                    //limit用来设置字节数，只有小于limit值的图片，才会转换
                    //为base64图片
                    use:"url-loader?limit=16940"
                }
            ]
        }
    }

其中 ? 之后的是 loader 的参数项。
limit 用来指定图片的大小，单位是字节(byte),只有小于 limit 大小的图片，才会被转为 base64 图片

3.3.6 打包处理 js 文件中的高级语法

打包js文件中的高级语法：在编写js的时候，有时候我们会使用高版本的js语法
有可能这些高版本的语法不被兼容，我们需要将之打包为兼容性的js代码
我们需要安装babel系列的包

① 安装babel转换器相关的包：npm i babel-loader @babel/core @babel/runtime -D
② 安装babel语法插件相关的包：npm i @babel/preset-env @babel/plugin-transformruntime @babel/plugin-proposal-class-properties –D

③ 在项目根目录中，创建 babel 配置文件 babel.config.js 并初始化基本配置如下：

module.exports = {
            presets:["@babel/preset-env"],
            plugins:[ "@babel/plugin-transform-runtime", "@babel/plugin-proposal-class-properties" ]
}

④ 在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下：

module.exports = {
        ......
        plugins:[ htmlPlugin ],
        module : {
            rules:[
                {
                    //test设置需要匹配的文件类型，支持正则
                    test:/\.css$/,
                    //use表示该文件类型需要调用的loader
                    use:['style-loader','css-loader']
                },
                {
                    test:/\.less$/,
                    use:['style-loader','css-loader','less-loader']
                },
                {
                    test:/\.scss$/,
                    use:['style-loader','css-loader','sass-loader']
                },{
                    test:/\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
                    //limit用来设置字节数，只有小于limit值的图片，才会转换
                    //为base64图片
                    use:"url-loader?limit=16940"
                },{
                    test:/\.js$/,
                    use:"babel-loader",
                    //exclude为排除项，意思是不要处理node_modules中的js文件
                    exclude:/node_modules/
                }
            ]
        }
    }

3.4 小结|脚本文件&&配置

前面提及的loader包的安装脚本如下(我们可以逐条执行,逐条配置；也可以集中处理)

脚本文件:

#!bin/bash
# 打包处理 css 文件loader
npm i style-loader css-loader -D
# 打包处理 less 文件 loader
npm i less-loader less -D
# 打包处理 scss 文件 loader
npm i sass-loader node-sass -D
# 配置 postCSS 自动添加 css 的兼容前缀 loader
npm i postcss-loader autoprefixer -D
# 打包样式表中的图片和字体文件 loader
npm i url-loader file-loader -D
# 打包处理 js 文件中的高级语法 loader:
# 安装babel转换器相关的包
npm i babel-loader @babel/core @babel/runtime -D
# 安装babel语法插件相关的包
npm i @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D

配置文件1: webpack.config.js

...
module.exports = {
    ...
    module : {
        rules:[
            {
                //test设置需要匹配的文件类型，支持正则
                test:/\.css$/,
                //use表示该文件类型需要调用的loader
                use:['style-loader','css-loader']
            },
            {
                test:/\.less$/,
                use:['style-loader','css-loader','less-loader']
            },
            {
                test:/\.scss$/,
                use:['style-loader','css-loader','sass-loader']
            },{
                test:/\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
                //limit用来设置字节数，只有小于limit值的图片，才会转换
                //为base64图片
                use:"url-loader?limit=16940"
            },{
                test:/\.js$/,
                use:"babel-loader",
                //exclude为排除项，意思是不要处理node_modules中的js文件
                exclude:/node_modules/
            }
        ]
    }
}

配置文件2: babel.config.js

module.exports = {
    presets:["@babel/preset-env"],
    plugins:[ "@babel/plugin-transform-runtime", "@babel/plugin-proposal-class-properties" ]
}

@babel/preset-env 是一个智能预设，它允许你使用最新的 JavaScript ，而无需对目标环境需要哪些语法转换进行各种繁琐细节的管理

4. 小结

1. 引入webpack构建工具
1. 进行webpack配置
- 打包入口、出口配置
- 自动打包配置
- 预览页面配置
- 各类加载器配置
- babel配置

四、Vue 单文件组件

1. 传统组件的问题和解决方案

问题

全局定义的组件必须保证组件的名称不重复
字符串模板缺乏语法高亮，在 HTML 有多行的时候，需要用到丑陋的
不支持 CSS 意味着当 HTML 和 JavaScript 组件化时，CSS 明显被遗漏
没有构建步骤限制，只能使用 HTML 和 ES5 JavaScript, 而不能使用预处理器（如：Babel）

解决方案

针对传统组件的问题，Vue 提供了一个解决方案:
使用 Vue 单文件组件。

2. Vue 单文件组件的基本用法

单文件组件的组成结构

.template 组件的模板区域
.script 业务逻辑区域
.style 样式区域

<!-- 组件代码区域 -->
<template>
    

</template>
<!-- js代码区域 -->
<script>
    

</script>
<!-- 样式代码区域 -->
<style scoped>

    

</style>

补充：安装Vetur插件可以使得.vue文件中的代码高亮

3. webpack 中配置 vue 组件的加载器

① 运行 npm i vue-loader vue-template-compiler -D 命令

② 在 webpack.config.js 配置文件中，添加 vue-loader 的配置项如下：

const VueLoaderPlugin = require("vue-loader/lib/plugin");
const vuePlugin = new VueLoaderPlugin();
module.exports = {
    ......
    plugins:[ htmlPlugin, vuePlugin],
    module : {
        rules:[
            ...//其他规则
            { 
                test:/\.vue$/,
                loader:"vue-loader",
            }
        ]
    }
}

4. 在 webpack 项目中使用 vue

上一节我们安装处理了vue单文件组件的加载器，想要让vue单文件组件能够使用，我们必须要安装vue 并使用vue来引用vue单文件组件。

① 安装Vue:
运行 npm i vue –S 安装 vue
② 在index.js中引入vue:
在 src -> index.js 入口文件中，通过 import Vue from 'vue' 来导入 vue 构造函数
③ 创建Vue实例对象并指定el，最后使用render函数渲染单文件组件:
```
const vm = new Vue({
    el:"#first",
    render:h=>h(app)
})
```
④ 通过 render 函数渲染 App 根组件

⑤ 我们这时候执行打包 npm run dev 会报错:

报错1:Cannot find module 'vue-loader/lib/plugin'
- 我们在工程的node_modules目录下去找,确实没找到有该路径的包;
- 原因:我们执行npm i vue-loader vue-template-compiler -D命令默认安装的 vue-loader 是版本较高的:
  - 在webpack.config.js中,vue-loader@16.0.0以上版本舍弃该引入方式:
```
const VueLoaderPlugin = require("vue-loader/lib/plugin");
```
  - 应该改为:
```
const { VueLoaderPlugin } = require("vue-loader");
```
报错2:Cannot find module 'webpack/lib/RuleSet'
小结:
对于 “vue-loader”: “^17.0.0” 的版本，要实现 webpack 打包时 .vue 文件的正常加载，需要的步骤为：
安装相关包
- ① npm i vue-loader -D
- ② npm add @vue/compiler-sfc -D
- ③ npm add vue@next
修改配置文件:

   ...
   //导入包
   const HtmlWebpackPlugin = require("html-webpack-plugin");
   //创建对象
   const htmlPlugin = new HtmlWebpackPlugin({
       //设置生成预览页面的模板文件
       template:"./src/index.html",
       //设置生成的预览页面名称
       filename:"index.html"
   });
   // const VueLoaderPlugin = require("vue-loader/lib/plugin");vue-loader@16.0.0以上版本舍弃 该引入方式
   const { VueLoaderPlugin } = require("vue-loader");
   const vuePlugin = new VueLoaderPlugin();

   module.exports = {
       ...
       plugins:[ htmlPlugin ,vuePlugin],
       ...
   }

   // 补充：mode设置的是项目的编译模式。
   // 如果设置为development则表示项目处于开发阶段，不会进行压缩和混淆，打包速度会快一些
   // 如果设置为production则表示项目处于上线发布阶段，会进行压缩和混淆，打包速度会慢一些

引入包注意:
- --force 会无视冲突，并强制获取远端npm库资源，当有资源冲突时覆盖掉原先的版本。
- --legacy-peer-deps标志是在v7中引入的，目的是绕过peerDependency自动安装；
- 它告诉 npm忽略项目中引入的各个modules之间的相同modules但不同版本的问题并继续安装
- 保证各个引入的依赖之间对自身所使用的不同版本modules共存

5. vue2.x与 vue3.x的构造函数的引入

vue2.x

// 1. 导入Vue函数库
// vue2.x的引入方式:
import Vue from 'vue'
// 2. 导入 App根组件
import App from '../components/App.vue'
...
console.log(Person.info);
// vue2.x的构造函数:
const vm = new Vue({
    el:'#app',
    render:h => h(App)
});

vue3.x

// 1. 导入Vue函数库
// vue3的引入方式
import { createApp } from 'vue'
// 2. 导入 App根组件
import App from '../components/App.vue'
...
// vue3.x的构造函数:
const vm = createApp({
    el:'#app',
    render:h => h(App)
})

6. webpack 打包发布

上线之前需要通过webpack将应用

上一篇：注释 | GWAS 程序 2-4：Harwin 平衡检验

下一篇：如何快速实施面部识别通道？在一篇文章中了解具体技巧