vue3的构建项目

一、初始化构建项目

1. 创建一个项目

npm install -g @vue/cli
vue create my-project

2. 默认预设配置/用户自定义配置

  Default ([Vue 2] babel, eslint)
  Default (Vue 3 Preview) ([Vue 3] babel, eslint)
> Manually select features

3. 自定义配置：选择需要的插件及编译工具

tips：上下操作+空格健可以选中

 (*) Choose Vue version
 (*) Babel
 (*) TypeScript
 (*) Progressive Web App (PWA) Support
 (*) Router
 (*) Vuex
 (*) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing


 Babel - 代码转换
 PWA - 渐进式网页[https://www.jianshu.com/p/7845a13a67d7]
 CSS Pre-processors - css预编译器
 Linter / Formatter - 代码格式化
 Unit Testing - 书写单元测试用的
 E2E Testing

? Use class-style component syntax? (Y/n)
# 是否使用class风格进行组件开发 Yes

? Use Babel alongside TypeScript for auto-detected polyfills? Yes
# 使用 babel 对 TypeScript 代码进行编译转换

? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
# 选择css预编译，这里我们选择less

# 选择代码格式化配置
? Pick a linter / formatter config: (Use arrow keys)
  ESLint with error prevention only [仅错误预防]
  ESLint + Airbnb config      [Airbnb配置]
  ESLint + Standard config    [标准配置- Standard标准它是一些前端工程师自定的标准]
> ESLint + Prettier           [推荐使用]
  TSLint (deprecated)


> Lint on save 保存时检查
  Lint and fix on commit 提交时检查

# 是否将配置放在单独的文件中 Babel,ESlint等
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files [单独保存在各自的配置文件中]
  In package.json

4. 运行

npm run serve

二、目录内容解析

assets：  是页面和组件中用到的静态资源，比如公共样式文件，字体文件，图片等，该文件夹与public的区别是：该文件夹中的资源会被webpack编译

├── .browserslistrc： 文件用于给开发者设置浏览器版本的范围；
├── .eslintrc.js： eslint配置文件；
├── .gitignore： 需要git忽略的文件；
├── .prettierrc.js:  用来自定义格式化的风格,配合eslint使用
├──  babel.config.js： babel的配置工具；
├──  package.json： 项目的描述文件，包括项目名、依赖的版本、作者、命令、入口文件等信息。
├──  package-lock.json： 记录项目依赖中各个依赖之间的关系和版本，防止npm包中有不遵守“相同大版本号的同一个库包，其接口符合兼容要求”这一规范，导致项目运行报错；
├──  README.md： 项目的说明文档，项目介绍、License、一些命令（例如：启动命令、打包命令、单元测试命令等）
├──  tsconfig.json
├──  vue.build.js
├──  vue.config.js  自定义配置

vue-cli3和vue-cli2的区别：

• 移除了配置文件目录 config 和 build 文件夹，如果需要自定义配置，需要自己新建vue.config.js文件
• 移除了 static 静态资源文件夹，新增 public 文件夹，静态资源转移到public目录中，通过/xx.xx可以直接访问， 并且 index.html 移动到 public 中
• 在 src 文件夹中新增了 views 文件夹，用于分类 视图组件 和 公共组件
• 安装项目时会自动下载node-model文件夹

三、修改基础配置

1. 编码风格

使用 ESLint+Prettier 的配置

当eslint配置未生效的时候，可以去setting，设置Automatic ESLint configuration

参见：https://eslint.org/docs/latest/user-guide/configuring/
参见：https://www.prettier.cn/docs/options.html

补充：
[腾讯云-开发者社区] https://cloud.tencent.com/developer/chapter/12617 
[ESLint机制浅析]  https://blog.csdn.net/jameszou707/article/details/121749796

以下是您可以在 ESLint 中配置的一些选项：

• 环境(env:) - 您的脚本设计用于运行的环境。每个环境都带有一组特定的预定义全局变量。
• 规则(rules:) - 启用哪些规则以及在什么错误级别。
• 插件(plugins:)- 第三方插件为 ESLint 定义了额外的规则、环境、配置等。
• 全局变量(globals:)- 您的脚本在执行期间访问的其他全局变量。

1 .eslintrc.js的设置

module.exports = {
  // 配置级联和层次结构
  root: true,
  // 配置-环境
  env: {
    browser: true,
    node: true,
  },
  // 配置-插件
  plugins: ['@typescript-eslint'], //定义了该eslint文件所依赖的插件
  extends: [
    'plugin:vue/essential',
    'eslint:recommended',
    '@vue/typescript/recommended',
    '@vue/prettier',
    '@vue/prettier/@typescript-eslint',
    'prettier/@typescript-eslint', // 使得@typescript-eslint中的样式规范失效，遵循prettier中的样式规范
    'plugin:prettier/recommended', // 使用prettier中的样式规范，且如果使得ESLint会检测prettier的格式问题，同样将格式问题以error的形式抛出
  ],
  // 配置-全局变量
  parser: 'vue-eslint-parser', //定义ESLint的解析器
  parserOptions: {
    parser: '@typescript-eslint/parser', //定义ESLint的解析器
    ecmaVersion: 2020,
  },
  // 配置-规则
  /*
   * "off" 或 0    ==>  关闭规则
   * "warn" 或 1   ==>  打开的规则作为警告（不影响代码执行）
   * "error" 或 2  ==>  规则作为一个错误（代码不能执行，界面报错）
  */
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    '@typescript-eslint/no-explicit-any': 'off',
    '@typescript-eslint/no-empty-function': 'off',
    '@typescript-eslint/no-this-alias': 'off',
    '@typescript-eslint/no-var-requires': 'off',
    'no-async-promise-executor': 'off',
    'no-case-declarations': 'off',
    'no-useless-catch': 'off',
    'prefer-const': 'off',
    'vue/no-v-model-argument': 'off',
  },
}

2.prettierrc设置 在项目根目录添加一个 .prettierrc.js，用来自定义格式化的风格，官网：prettier.io/docs/en/ind…

module.exports = {
  printWidth: 120, //一行的字符数换行
  tabWidth: 2, //一个tab代表几个空格数
  useTabs: false, //是否使用tab进行缩进
  singleQuote: true, //字符串是否使用单引号
  semi: false, //行尾是否使用分号，默认为true
  // "trailingComma": "all",
  // "bracketSpacing": false,
  // "jsxBracketSameLine": true,
  // "arrowParens": "avoid",
  // "insertPragma": true,
  // "useTabs": false
  trailingComma: 'none', //是否使用尾逗号
  bracketSpacing: true, //对象大括号直接是否有空格，默认为true，效果：{ foo: bar }
  endOfLine:"auto" // 保留在 Windows 和 Unix 下的换行符
}

2. 配置可选链的支持 ?.

babel.config.js 文件中可配置

module.exports = {
presets: ['@vue/cli-plugin-babel/preset'],
plugins: ['@babel/plugin-proposal-optional-chaining'],
}

3. 项目配置 Vue.config.js

解决方案：设置代理、打包配置、路径别名、全局引入样式

在项目根目录中添加vue.config.js文件，非src下，它会被 @vue/cli-service 自动加载。

Vue CLI： https://cli.vuejs.org/zh/config/#productionsourcemap

const path = require('path')
const resolve = (dir) => path.join(__dirname, dir) //拼接路径

module.exports = {
    // 构建多页面应用，页面的配置
    pages: entry(),

    publicPath: "/",
    outputDir: "dist",

    assetsDir: "",
    indexPath: "index.html",
    filenameHashing: true,

    lintOnSave: false,
    runtimeCompiler: false,
    transpileDependencies: [],
    productionSourceMap: true,

    //配置别名
    chainWebpack: (config) => {
        config.resolve.alias
            .set('@', resolve('src'))
            .set('assets', resolve('src/assets'))
            .set('components', resolve('src/components'))
            .set('router', resolve('src/router'))
            .set('utils', resolve('src/utils'))
            .set('store', resolve('src/store'))
            .set('views', resolve('src/views'))

    },

    parallel: require("os").cpus().length > 1,
    pwa: {},

    // 代理配置
    devServer: {
        host: "0.0.0.0",
        port: 8080,
        https: false,
        open: true, // 配置自动启动浏览器
        proxy: {
            "/api": {
                target: "https://mock.yonyoucloud.com/mock/5708",
                ws: true, //代理的WebSockets
                changeOrigin: true, // 允许websockets跨域
                pathRewrite: {
                    "^/api": ""
                }
            }
        }
    },

    // 第三方插件选项
    pluginOptions: {
        foo: {
        }
    },

   // css配置项
    css: {
        loaderOptions: {
            // 给 sass-loader 传递选项
            sass: {
                prependData: `
                @import "@/assets/css/common.scss";
                @import "@/assets/css/mixin.scss";
                @import "@/assets/css/reset.scss";
                @import "@/assets/css/var.scss";
                `
            }
        }
    },
};

publicPath: 部署应用包时,路径可指定
outputDir:  构建好的文件输出到哪里

assetsDir:  放置生成的静态资源(js、css、img、fonts)的目录
indexPath:  生成的 index.html 的输出路径
filenameHashing:  文件名中包含了 hash 以便更好的控制缓存

lintOnSave:  让 lint 错误在开发时直接显示在浏览器中
runtimeCompiler: false,
transpileDependencies: babel-loader会忽略所有 node_modules 中的文件
productionSourceMap:   是否需要生产环境的 source map

4. 修改package.json中

// 修改指定打包命令
"build": "node vue.build.js"

三、更多概念

1. SPA与MPA(多页)

老版本的分包方案：
基于vue-cli搭建多模块且各模块独立打包的项目
https://segmentfault.com/a/1190000014571631

项目地址
https://github.com/shuidian/vue-multipage

单页面应用（SinglePage Web Application，SPA）

组成：一个外壳页面和多个页面片段
刷新方式：页面局部刷新或更改
转场动画：容易实现
数据传递：数据传递

多页面应用（MultiPage Application，MPA）

组成：多个完整页面构成
刷新方式：整页刷新
转场动画：无法实现
数据传递：依赖 url传参、或者cookie 、localStorage等

juejin.cn/post/691343…

2. PWA 渐进式web

补充： Vue项目PWA化[registerServiceWorker.js文件] www.jianshu.com/p/7845a13a6…

四、分包

1. package.json中， 运行"build": "node vue.build.js"
2. vue.build.js中， 多个循环  execSync(`vue-cli-service build ${name}`)
3. vue.config.js中，获取 process.argv[3]来配置多页pages