【Vue】脚手架的一些个介绍

脚手架

• 脚手架 Vue CLI：用于快速生成 Vue 项目
• 安装 Vue CLI：npm i -g @vue/cli
• 查看 Vue CLI 版本：vue -V
• 创建项目：① vue create project-name、 ② cd XXX 进入项目所在目录、 ③ npm run serve 运行项目

项目创建过程

1. vue create vue-demo 创建 Vue 项目 vue-demo
2. Please pick a preset: (Use arrow keys) —— 选择预设
   1. Default ([Vue 3] babel, eslint) —— Vue3 的默认配置
      1. babel：可将代码中过高版本的 JS 语法转成浏览器能识别的语法（浏览器不能识别过高版本的 JS 语法）
      2. eslint：用于检查 JS 代码是否符合编写规范
   2. Default ([Vue 2] babel, eslint) —— Vue2 的默认配置
   3. Manually select features —— 自定义配置 ✔️
3. Please pick a preset: Manually select features —— 选择需要的功能
   Check the features needed for your project: (Press space to select, a to toggle all, i to invert selection, and enter to proceed)
   1. Babel —— 可将代码中过高版本的 JS 语法转成浏览器能识别的语法 ✔️
   2. TypeScript —— 是否支持 TS 语法
   3. Progressive Web App (PWA) Support —— 网页应用程序（应用的话，离线状态下也能访问网页，但兼容性较差）
   4. Router —— 用于配置路由 ✔️
   5. Vuex —— 用于管理数据 ✔️
   6. CSS Pre-processors —— CSS 预处理器 ( less、sass、styuls ) ✔️
   7. Linter / Formatter —— 检查 JS 语法 ✔️
   8. Unit Testing —— 单元测试模块
   9. E2E Testing —— 端到端测试模块
4. Choose a version of Vue.js that you want to start the project with (Use arrow keys) —— 选择 Vue.js 版本
   • 2.x ✔️
   • 3.x
5. Use history mode for router? (Requires proper server setup for index fallback in production) —— 路由是否使用 history 模式 n
6. Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): —— 选择 CSS 预处理器
   1. Sass/SCSS (with dart-sass)
   2. Less ✔️
   3. Stylus
7. Pick a linter / formatter config: (Use arrow keys) —— 选择工具，用于检查代码编写规范
   1. ESLint with error prevention only
   2. ESLint + Airbnb config
   3. ESLint + Standard config
   4. ESLint + Prettier ✔️
8. Pick additional lint features: —— 在什么时候检查代码编写规范
   1. Lint on save —— 在保存代码的时候 ✔️
   2. Lint and fix on commit —— 在 commit 代码的时候
9. Where do you prefer placing config for Babel, ESLint, etc.? —— 将 Babel、ESLint… 的配置编写在哪里
   1. In dedicated config files —— 创建各自的配置文件编写配置 ✔️
   2. In package.json —— 将配置都编写在 package.json 中
10. Save this as a preset for future projects? (y/N) —— 是否存为预设 N

项目结构分析

1. node_modules：用于存放依赖的目录
2. public：用于存放静态资源的目录；使用 webpack 打包时，会将该文件夹中的静态资源 原封不动地打包到 dist 目录下
   1. favicon.ion：网页的图标
   2. index.html：渲染的模板，可使用 webpack 进行配置
3. src：用于存放源码的目录
   1. assets：用于存放静态资源的目录（一般放置多个组件共用的静态资源）
      webpack 打包时，会把该目录下的静态资源 当作一个模块，编译、打包到 JS 文件中
   2. components：用于存放组件的目录
   3. router：用于存放路由配置文件的目录
   4. store：用于存放 Vuex 配置文件的目录
   5. views：用于存放页面组件的目录
   6. App.vue：根组件，是所有组件的父组件
   7. main.js：项目构建的入口文件，是整个程序中最先执行的文件 ❤
4. .eslintrc.js：EsLint 配置文件
5. .gitignore：用于配置不需要被 Git 管理的文件(夹)
6. babel.config.js：Babel 的配置文件
7. jsconfig.json：webpack 的配置文件
8. package.json：依赖包的配置文件
9. pack-lock.json：依赖包的版本控制文件。指定项目依赖包的版本号，可保证其他人在执行 npm i 时下载的依赖包与原版本一致
10. README.md：项目描述文件
11. vue.config.js：脚手架的配置文件

jsconfig.json

• webpack 的配置文件
• 与其他 JSON 文件不同的是，该 JSON 文件可以写注释

{
    // 编译配置
    "compilerOptions": {
        "target": "es5",
        "module": "esnext",
        "baseUrl": "./",
        "moduleResolution": "node",
        "paths": {
            "@/*": ["src/*"] // 设置路径简写 `@` → `src/`
        },
        "lib": ["esnext", "dom", "dom.iterable", "scripthost"]
    }
}

• 在 CSS 中也可以使用 @，但是要在前面加 ~

background: url('~@/assets/1.jpg');

main.js

// 引入 vue, 默认引入残缺版的 Vue (dist/vue.runtime.common.js), 残缺版的 Vue 没有 [模板解析器]
// 完整版的 Vue 在 vue/dist/vue.js, 可以在 package.json 中配置引入的版本
import Vue from 'vue';

// 引入 App.vue 组件
import App from './App.vue';

// 关闭生产版本的提示
Vue.config.productionTip = false;

// 创建 Vue 实例
new Vue({
    // 残缺版的 Vue 可以使用 render 渲染模版
    // render 为渲染函数, 接收 createElement 方法作为第 1 参数, 以创建 VNode
    // 若 render 函数存在, Vue 就不会根据 template / el 配置项渲染模板
    // // 1️⃣ render 的简写
    // render: h => h(App)
    // 2️⃣ render 的标准写法
    render(createElement) {
        // return createElement("h1", "大哥好") // 使用方法1：渲染节点
        return createElement(App); // 使用方法2：渲染组件
    },

    // 完整版的 Vue 才能根据 template 渲染模板, 因为根据 template 渲染需要 [模板解析器]
    // template: `<App></App>`,
    // components: { App }
}).$mount('#app');

/*
    使用残缺版 Vue 的理由:
    因为 [模版解析器] 的体积非常大，使用阉割版的 Vue 可以使项目打包后体积小一些
        假设我需要铺地砖，现有两种方法:
        第一种: 买 100 块地砖  &  买 3 个工人  =>  得到: 完整的装修 & 3 个工人
        第二种: 买 100 块地砖  &  雇 3 个工人  =>  得到: 完整的装修
    render 的使用就像好比第二种, 使用完工人(模版解析器)后即可抛弃
*/

vue.config.js

• 脚手架的配置文件
• 更新配置文件后需要重启项目

vue.config.js 会导出一个 [包含了各种配置选项的] 对象：

module.exports = {};

可以使用 @vue/cli-service 提供的 defineConfig 帮手函数，以获得更好的类型提示：

const { defineConfig } = require('@vue/cli-service');
module.exports = defineConfig({});

配置项 devServer.proxy

• 我们可以在 vue.config.js 中编写 devServer.proxy 来配置代理服务器，以解决跨域问题

  • 代理服务器所处的 [位置] 与前端页面的 [位置] 一样，所以没有跨域问题
  • 服务器之间使用传统的 HTTP 请求交互，不需要 Ajax，所以也没有跨域问题
  • 前后端交互的过程就变成：
    ① 前端 → 代理服务器（请求）、 ② 代理服务器 → 服务器（请求）
    ③ 服务器 → 代理服务器（响应）、 ④ 代理服务器 → 前端（响应）

• devServer.proxy 提供的代理功能，仅在开发调试阶段生效；
  项目上线时，仍需要 API 接口服务器开启 CORS 跨域资源共享

• devServer.proxy 有 2 种写法：String 写法 & Object 写法

① devServer.proxy 的 String 写法：值为 [需要代理的服务器地址]

const { defineConfig } = require('@vue/cli-service');

module.exports = defineConfig({
    devServer: { proxy: 'http://127.0.0.1:5000' /* 需要代理的服务器地址 */ },
});

此时，前端通过 http://127.0.0.1:XXX/url路径 获取数据即可，XXX 为项目启动时占用的端口号
代理服务器就会向 http://127.0.0.1:5000 的 url路径 发起请求，以获取数据

这种写法只能代理一台服务器！

② devServer.proxy 的 Object 写法：通过 [请求前缀] 配置需要代理的多台服务器

const { defineConfig } = require('@vue/cli-service');

module.exports = defineConfig({
    devServer: {
        proxy: {
            // 通过 [请求前缀] 设置需要代理的多台服务器
            '/students': { target: 'http://localhost:5000' },
            '/books': { target: 'http://localhost:5001' },
        },
    },
});

该写法中，[请求前缀] 既是区分服务器的标识，也是要请求的路径

• 也可以设置 [请求前缀] 仅为服务器的标识：

const { defineConfig } = require('@vue/cli-service');

module.exports = defineConfig({
    devServer: {
        proxy: {
            '/api1': {
                target: 'http://localhost:5000',
                pathRewrite: { '^/api1': '' }, // 隐藏 [请求前缀]，保证请求地址能正确使用
            },
            '/api2': {
                target: 'http://localhost:5001',
                pathRewrite: { '^/api2': '' }, // 隐藏 [请求前缀]，保证请求地址能正确使用
            },
        },
    },
});

此时，我们发送请求时，就需要带上 [请求前缀] 以选择发送请求的服务器 http://127.0.0.1:XXX/api1/url路径

配置项 lintOnSave

• 在开发环境下，是否在每次保存时都使用 eslint-loader 检查代码是否符合编写规范
• 这个值会在 @vue/cli-plugin-eslint 被安装之后生效
• 属性值可以为 <boolean> | 'warning' | 'default'(默认) | 'error'
  ① true / 'warning'：将错误输出为警告，不会影响编译
  ② 'default'：将错误输出，会影响编译
  ③ 'error'：把警告也输出为错误，会影响编译

module.exports = { lintOnSave: false }; // 关掉检查

• 可以配置 devServer.overlay 字段，让浏览器同时显示警告和错误

module.exports = {
    devServer: { overlay: { warnings: true, errors: true } },
};

• 当 lintOnSave 是一个 truthy 的值时，eslint-loader 在 [开发环境] 和 [生产环境] 下都会被启用
  如果想要在 [生产环境] 下禁用 eslint-loader，可以如下配置

module.exports = { lintOnSave: process.env.NODE_ENV !== 'production' };

webpack 在不同环境下的配置文件：[.env.development]-开发环境、 [.env.production]-生产环境、 [.env.staging]-测试环境
我们可以通过变量 process.env 得知当前环境，并获取对应配置文件内的数据

配置项 transpileDependencies

• 默认情况下，babel-loader 会忽略 node_modules 中的文件 (夹)

  为避免构建后的代码中出现未转译的第三方依赖，可以设置 transpileDependencies: true，表示对 node_modules 中的文件(夹)也进行编译。不过，对所有的依赖都进行转译会降低构建速度

const { defineConfig } = require('@vue/cli-service');
module.exports = defineConfig({ transpileDependencies: true });

• 如果对构建性能有所顾虑，可以只转译部分依赖：
  可传入一个 数组 作为属性值，列出需要转译的 [第三方包名] / [正则表达式] 即可

配置项 productionSourceMap

• 项目打包构建后，代码都是经过压缩的。如果项目上线后发现了错误，将无法通过抛出的错误直接定位到出问题的源码
• 配置 Source Map 后，可以在 [源码] 与 [构建后的代码] 之间建立映射关系，进而可以通过抛出的错误直接定位到出问题的源码
• 如果项目不需要配置 Source Map，可以设置 productionSourceMap: false

const { defineConfig } = require('@vue/cli-service');
module.exports = defineConfig({ productionSourceMap: false }); // 不需要 Source Map

关于基础模版

• 组件可由 template script style 标签组成，其中 script style 标签是可选的
• 为了使 VSCode 能支持 Vue 语法，并提供对应的高亮和提示，可以安装官方提供的插件：
  Vue2 对应的插件使 Vetur；Vue3 对应的插件使 Volar

<template></template>

<script>
export default {}; // 创建 Vue 实例，并暴露出去 (使用默认暴露)
</script>

<style></style>

配置项 data 必须为函数式声明

• 因为组件可能被用来创建多个实例。如果 data 仍是一个对象，则所有的实例将共享同一个数据对象！

<template></template>

<script>
export default {
    name: 'componentName',
    data() {
        return { msg: 'superman' };
    },
};
</script>

<style lang="less" scoped></style>

style 标签的 scoped 属性

• 默认情况下，写在 .vue 组件中的样式会全局生效。后面引入的样式会覆盖前面引用的样式

  ∵ 在单页面应用程序中，所有组件的 DOM 结构，都是在唯一的 index.html 中渲染的

  ∴ 每个组件中的样式，都会影响整个 index.html 中的 DOM 元素

• 可以给 style 标签设置 scoped 属性，来解决组件样式冲突的问题
  给 style 标签设置 scoped 属性后，Vue 就会为每个组件分配唯一的自定义属性，在编写组件样式时，通过属性选择器来控制样式的作用域。此时，只有当前组件会应用编写好的样式，当前组件的父子组件都不会应用。

• 注意：假设在 App.vue 给 style 标签设置了 scoped 属性，其子组件 Son.vue 的根节点会同时受 App.vue 和 Son.vue 的样式影响！！！

• 如果希望 scoped 样式中的一个选择器可以作用于其子组件，可以使用深度选择器：

<style scoped>
.a /deep/ .b {
    /* Vue2 深度选择器 */
}
.a :deep(.b) {
    /* Vue3 深度选择器 */
}
.a ::v-deep(.b) {
    /* Vue3 深度选择器 */
}
</style>

• 通过 v-html 创建的 DOM 不受 scoped 样式影响，但仍能通过深度作用选择器设置其样式
• 一般情况下，我们不会给 App.vue 设置 scoped。因为 App.vue 是根组件，在这里设置的样式，一般都是需要全局应用的

style 标签的 lang="less" 属性

lang="less" 表示使用 Less 编写样式，需要下载插件 less

<style lang="less">
/* 不设置 lang 则默认为 CSS */
</style>

Vue CLI 是使用 webpack 构建项目，还需要下载 less-loader 将 less 转换为 css

注意：less-loader 依赖于 webpack，需要下载对应的版本
webpack@4 ↔ less-loader@7；webpack@5 ↔ less-loader@8/9

我们可以查看 XXX 的所有版本：npm view XXX versions