首页
Javascript
Html
Css
Node.js
Electron
移动开发
小程序
工具类
服务端
浏览器相关
前端收藏
其他
关于
公司注册

使用create-vue创建vue3项目

2023年03月01日 发布 阅读(721) 作者：Jerman

create-vue github

https://github.com/vuejs/create-vue

全局安装create-vue

安装完create-vue后，执行create-vue命令

  1. ➜  root yarn global add create-vue
  2. yarn global v1.22.17
  3. [1/4] 🔍  Resolving packages...
  4. [2/4] 🚚  Fetching packages...
  5. [3/4] 🔗  Linking dependencies...
  6. [4/4] 🔨  Building fresh packages...
  8. success Installed "create-vue@3.6.1" with binaries:
  9.       - create-vue
  10. ✨  Done in 4.19s.
  11. ➜  root create-vue 
  13. Vue.js - The Progressive JavaScript Framework
  15. ✔ Project name: … vue3-demo
  16. ✔ Add TypeScript? … No / Yes
  17. ✔ Add JSX Support? … No / Yes
  18. ✔ Add Vue Router for Single Page Application development? … No / Yes
  19. ✔ Add Pinia for state management? … No / Yes
  20. ✔ Add Vitest for Unit Testing? … No / Yes
  21. ✔ Add an End-to-End Testing Solution? › Cypress
  22. ✔ Add ESLint for code quality? … No / Yes
  23. ✔ Add Prettier for code formatting? … No / Yes
  25. Scaffolding project in /root/vue3-demo...
  27. Done. Now run:
  29.   cd vue3-demo
  30.   npm install
  31.   npm run format
  32.   npm run dev
  34. ➜  root

初始化项目

安装依赖

  1. cd vue3-demo
  2. yarn install

配置server选项- 更改本地服务端口

打开vite.config.ts，配置server选项，参考：https://cn.vitejs.dev/config/server-options.html

  1. import { fileURLToPath, URL } from 'node:url'
  3. import { defineConfig } from 'vite'
  4. import vue from '@vitejs/plugin-vue'
  5. import vueJsx from '@vitejs/plugin-vue-jsx'
  7. // https://vitejs.dev/config/
  8. export default defineConfig({
  9.   plugins: [vue(), vueJsx()],
  10.   resolve: {
  11.     alias: {
  12.       '@': fileURLToPath(new URL('./src', import.meta.url))
  13.     }
  14.   },
  15.   // 本地服务配置
  16.   // server的参数配置：https://cn.vitejs.dev/config/server-options.html
  17.   server: {
  18.     // 端口
  19.     port: 3000
  20.   }
  21. })

引入文件分析插件- rollup-plugin-visualizer

安装rollup-plugin-visualizer

  1. ➜  root yarn add rollup-plugin-visualizer --save-dev
  2. yarn add v1.22.17
  3. [1/4] 🔍  Resolving packages...
  4. [2/4] 🚚  Fetching packages...
  5. [3/4] 🔗  Linking dependencies...
  6. warning " > @vue/test-utils@2.3.0" has unmet peer dependency "@vue/compiler-dom@^3.0.1".
  7. warning " > @vue/test-utils@2.3.0" has unmet peer dependency "@vue/server-renderer@^3.0.1".
  8. [4/4] 🔨  Building fresh packages...
  10. success Saved lockfile.
  11. success Saved 11 new dependencies.
  12. info Direct dependencies
  13. └─ rollup-plugin-visualizer@5.9.0
  14. info All dependencies
  15. ├─ cliui@8.0.1
  16. ├─ define-lazy-prop@2.0.0
  17. ├─ get-caller-file@2.0.5
  18. ├─ is-docker@2.2.1
  19. ├─ is-wsl@2.2.0
  20. ├─ open@8.4.2
  21. ├─ require-directory@2.1.1
  22. ├─ rollup-plugin-visualizer@5.9.0
  23. ├─ y18n@5.0.8
  24. ├─ yargs-parser@21.1.1
  25. └─ yargs@17.7.1
  26. ✨  Done in 1.73s.
  27. ➜  root

设置vite.config.ts

  1. import { fileURLToPath, URL } from 'node:url'
  3. import { defineConfig } from 'vite'
  4. import vue from '@vitejs/plugin-vue'
  5. import vueJsx from '@vitejs/plugin-vue-jsx'
  6. import { visualizer } from 'rollup-plugin-visualizer'
  8. // https://vitejs.dev/config/
  9. export default defineConfig({
  10.   plugins: [
  11.     vue(),
  12.     vueJsx(),
  13.     // 分析,参考https://github.com/btd/rollup-plugin-visualizer
  14.     // 执行npm run build时，会自动打开stats.html页面
  15.     visualizer({
  16.       emitFile: false,
  17.       filename: 'stats.html', //分析图生成的文件名
  18.       open: true //如果存在本地服务端口，将在打包后自动展示
  19.     })
  20.   ],
  21.   resolve: {
  22.     alias: {
  23.       '@': fileURLToPath(new URL('./src', import.meta.url))
  24.     }
  25.   },
  26.   // 本地服务配置
  27.   // server的参数配置：https://cn.vitejs.dev/config/server-options.html
  28.   server: {
  29.     // IP,default->localhost
  30.     // 设置为0.0.0.0，允许局域网内访问
  31.     host: '0.0.0.0',
  32.     // 端口，default->5173
  33.     port: 3000,
  34.     // 自动从浏览器打开
  35.     open: true
  36.   }
  37. })

stats.html打开如下图

引入mock数据插件- vite-plugin-mock

安装vite-plugin-mock，mockjs，vite-plugin-mock是依赖于mockjs的

  1. ➜  root yarn add mockjs vite-plugin-mock --save-dev
  2. yarn add v1.22.17
  3. [1/4] 🔍  Resolving packages...
  4. [2/4] 🚚  Fetching packages...
  5. [3/4] 🔗  Linking dependencies...
  6. warning " > @vue/test-utils@2.3.0" has unmet peer dependency "@vue/compiler-dom@^3.0.1".
  7. warning " > @vue/test-utils@2.3.0" has unmet peer dependency "@vue/server-renderer@^3.0.1".
  8. warning "vite-plugin-mock > @rollup/plugin-node-resolve@13.3.0" has unmet peer dependency "rollup@^2.42.0".
  9. warning "vite-plugin-mock > @rollup/plugin-node-resolve > @rollup/pluginutils@3.1.0" has unmet peer dependency "rollup@^1.20.0||^2.0.0".
  10. [4/4] 🔨  Building fresh packages...
  12. success Saved lockfile.
  13. success Saved 3 new dependencies.
  14. info Direct dependencies
  15. ├─ mockjs@1.1.0
  16. └─ vite-plugin-mock@2.9.6
  17. info All dependencies
  18. ├─ commander@10.0.0
  19. ├─ mockjs@1.1.0
  20. └─ vite-plugin-mock@2.9.6
  21. ✨  Done in 3.40s.
  22. ➜  root

设置vite.config.ts

  • UserConfigExport, ConfigEnv为新引入
  • export default 改为了导出方法
  • 项目根目录下创建mock文件夹，mock目录下创建index.ts，按照官方文档设置mock路径就OK
  1. import { fileURLToPath, URL } from 'node:url'
  2. import type { UserConfigExport, ConfigEnv } from 'vite'
  3. import vue from '@vitejs/plugin-vue'
  4. import vueJsx from '@vitejs/plugin-vue-jsx'
  5. import { visualizer } from 'rollup-plugin-visualizer'
  6. import { viteMockServe } from 'vite-plugin-mock'
  8. // https://vitejs.dev/config/
  9. export default ({ command }: ConfigEnv): UserConfigExport => {
  10.   console.log('command', command)
  11.   return {
  12.     plugins: [
  13.       vue(),
  14.       vueJsx(),
  15.       // 分析,参考https://github.com/btd/rollup-plugin-visualizer
  16.       // 执行npm run build时，会自动打开stats.html页面
  17.       visualizer({
  18.         emitFile: false,
  19.         filename: 'stats.html', //分析图生成的文件名
  20.         open: true //如果存在本地服务端口，将在打包后自动展示
  21.       }),
  22.       // 引入mock数据插件，参考https://github.com/vbenjs/vite-plugin-mock
  23.       viteMockServe({
  24.         // mock数据文件存放的文件夹，相对于项目根目录
  25.         mockPath: 'mock',
  26.         localEnabled: command === 'serve'
  27.       })
  28.     ],
  29.     resolve: {
  30.       alias: {
  31.         '@': fileURLToPath(new URL('./src', import.meta.url))
  32.       }
  33.     },
  34.     // 本地服务配置
  35.     // server的参数配置：https://cn.vitejs.dev/config/server-options.html
  36.     server: {
  37.       // IP,default->localhost
  38.       // 设置为0.0.0.0，允许局域网内访问
  39.       host: '0.0.0.0',
  40.       // 端口，default->5173
  41.       port: 3000,
  42.       // 自动从浏览器打开
  43.       open: true
  44.     }
  45.   }
  46. }

安装自动导入API插件

  • 安装unplugin-auto-import，参考https://github.com/antfu/unplugin-auto-import
  • 配置tsconfig.json的include包含auto-imports.d.ts，否则eslint会检测时会报警
  • eslint如果检测还出错，配置autoImport的eslintrc，同时在.eslintrc.cjs配置extend添加 ‘.eslintrc-auto-import.json’
  1. //.eslintrc.cjs
  2. /* eslint-env node */
  3. require('@rushstack/eslint-patch/modern-module-resolution')
  5. module.exports = {
  6.   root: true,
  7.   extends: [
  8.     'plugin:vue/vue3-essential',
  9.     'eslint:recommended',
  10.     '@vue/eslint-config-typescript',
  11.     '@vue/eslint-config-prettier/skip-formatting',
  12.     '.eslintrc-auto-import.json'
  13.   ],
  14.   overrides: [
  15.     {
  16.       files: ['cypress/e2e/**/*.{cy,spec}.{js,ts,jsx,tsx}'],
  17.       extends: ['plugin:cypress/recommended']
  18.     }
  19.   ],
  20.   parserOptions: {
  21.     ecmaVersion: 'latest'
  22.   },
  23.   rules: {}
  24. }
  1. {
  2.   "extends": "@vue/tsconfig/tsconfig.node.json",
  3.   "include": [
  4.     "vite.config.*",
  5.     "vitest.config.*",
  6.     "cypress.config.*",
  7.     "playwright.config.*",
  8.     // 自动导入引入，否则页面会报（提示未引入）
  9.     "auto-imports.d.*"
  10.   ],
  11.   "compilerOptions": {
  12.     "composite": true,
  13.     "types": ["node"]
  14.   }
  15. }
  1. ➜  root yarn add unplugin-auto-import --save-dev
  2. yarn add v1.22.17
  3. [1/4] 🔍  Resolving packages...
  4. [2/4] 🚚  Fetching packages...
  5. [3/4] 🔗  Linking dependencies...
  6. warning "vite-plugin-mock > @rollup/plugin-node-resolve@13.3.0" has unmet peer dependency "rollup@^2.42.0".
  7. warning "vite-plugin-mock > @rollup/plugin-node-resolve > @rollup/pluginutils@3.1.0" has unmet peer dependency "rollup@^1.20.0||^2.0.0".
  8. warning " > @vue/test-utils@2.3.0" has unmet peer dependency "@vue/compiler-dom@^3.0.1".
  9. warning " > @vue/test-utils@2.3.0" has unmet peer dependency "@vue/server-renderer@^3.0.1".
  10. [4/4] 🔨  Building fresh packages...
  12. success Saved lockfile.
  13. success Saved 40 new dependencies.
  14. info Direct dependencies
  15. └─ unplugin-auto-import@0.15.0
  16. info All dependencies
  17. ├─ @antfu/utils@0.7.2
  18. ├─ @babel/standalone@7.21.2
  19. ├─ @nuxt/kit@3.2.3
  20. ├─ @nuxt/schema@3.2.3
  21. ├─ chownr@2.0.0
  22. ├─ consola@2.15.3
  23. ├─ create-require@1.1.1
  24. ├─ destr@1.2.2
  25. ├─ dotenv@16.0.3
  26. ├─ enhanced-resolve@4.5.0
  27. ├─ errno@0.1.8
  28. ├─ flat@5.0.2
  29. ├─ fs-minipass@2.1.0
  30. ├─ giget@1.1.2
  31. ├─ globby@13.1.3
  32. ├─ hash-sum@2.0.0
  33. ├─ hookable@5.4.2
  34. ├─ isarray@1.0.0
  35. ├─ knitwork@1.0.0
  36. ├─ lodash.template@4.5.0
  37. ├─ lodash.templatesettings@4.2.0
  38. ├─ memory-fs@0.5.0
  39. ├─ minizlib@2.1.2
  40. ├─ mkdirp@1.0.4
  41. ├─ mri@1.2.0
  42. ├─ node-fetch-native@1.0.2
  43. ├─ postcss-import-resolver@2.0.0
  44. ├─ process-nextick-args@2.0.1
  45. ├─ prr@1.0.1
  46. ├─ rc9@2.0.1
  47. ├─ readable-stream@2.3.8
  48. ├─ safe-buffer@5.1.2
  49. ├─ slash@4.0.0
  50. ├─ string_decoder@1.1.1
  51. ├─ tapable@1.1.3
  52. ├─ tar@6.1.13
  53. ├─ unctx@2.1.2
  54. ├─ unplugin-auto-import@0.15.0
  55. ├─ webpack-sources@3.2.3
  56. └─ webpack-virtual-modules@0.5.0
  57. ✨  Done in 8.19s.
  58. ➜  root

配置vite.config.ts

  1. import { fileURLToPath, URL } from 'node:url'
  2. import type { UserConfigExport, ConfigEnv } from 'vite'
  3. import vue from '@vitejs/plugin-vue'
  4. import vueJsx from '@vitejs/plugin-vue-jsx'
  5. import { visualizer } from 'rollup-plugin-visualizer'
  6. import { viteMockServe } from 'vite-plugin-mock'
  7. import AutoImport from 'unplugin-auto-import/vite'
  9. // https://vitejs.dev/config/
  10. export default ({ command }: ConfigEnv): UserConfigExport => {
  11.   console.log('command', command)
  12.   return {
  13.     plugins: [
  14.       vue(),
  15.       vueJsx(),
  16.       // 分析,参考https://github.com/btd/rollup-plugin-visualizer
  17.       // 执行npm run build时，会自动打开stats.html页面
  18.       visualizer({
  19.         emitFile: false,
  20.         filename: 'stats.html', //分析图生成的文件名
  21.         open: true //如果存在本地服务端口，将在打包后自动展示
  22.       }),
  23.       // 引入mock数据插件，参考https://github.com/vbenjs/vite-plugin-mock
  24.       viteMockServe({
  25.         // mock数据文件存放的文件夹，相对于项目根目录
  26.         mockPath: 'mock',
  27.         localEnabled: command === 'serve'
  28.       }),
  29.       // API自动导入
  30.       AutoImport({
  31.         imports: ['vue', 'vue-router'],
  32.         resolvers: [],
  33.         // 根目录下自动生成自动导入的文件auto-imports.d.ts
  34.         dts: './auto-imports.d.ts',
  35.         // Generate corresponding .eslintrc-auto-import.json file.
  36.         // eslint globals Docs - https://eslint.org/docs/user-guide/configuring/language-options#specifying-globals
  37.         eslintrc: {
  38.           enabled: true, // Default `false`
  39.           filepath: './.eslintrc-auto-import.json', // Default `./.eslintrc-auto-import.json`
  40.           globalsPropValue: true, // Default `true`, (true | false | 'readonly' | 'readable' | 'writable' | 'writeable')
  41.         },
  42.       })
  43.     ],
  44.     resolve: {
  45.       alias: {
  46.         '@': fileURLToPath(new URL('./src', import.meta.url))
  47.       }
  48.     },
  49.     // 本地服务配置
  50.     // server的参数配置：https://cn.vitejs.dev/config/server-options.html
  51.     server: {
  52.       // IP,default->localhost
  53.       // 设置为0.0.0.0，允许局域网内访问
  54.       host: '0.0.0.0',
  55.       // 端口，default->5173
  56.       port: 3000,
  57.       // 自动从浏览器打开
  58.       open: true
  59.     }
  60.   }
  61. }

引入自动导入组件插件

安装unplugin-vue-components

  1. ➜  root yarn add unplugin-vue-components --save-dev
  2. yarn add v1.22.17
  3. [1/4] 🔍  Resolving packages...
  4. [2/4] 🚚  Fetching packages...
  5. [3/4] 🔗  Linking dependencies...
  6. warning "vite-plugin-mock > @rollup/plugin-node-resolve@13.3.0" has unmet peer dependency "rollup@^2.42.0".
  7. warning "vite-plugin-mock > @rollup/plugin-node-resolve > @rollup/pluginutils@3.1.0" has unmet peer dependency "rollup@^1.20.0||^2.0.0".
  8. warning " > @vue/test-utils@2.3.0" has unmet peer dependency "@vue/compiler-dom@^3.0.1".
  9. warning " > @vue/test-utils@2.3.0" has unmet peer dependency "@vue/server-renderer@^3.0.1".
  10. [4/4] 🔨  Building fresh packages...
  12. success Saved lockfile.
  13. success Saved 1 new dependency.
  14. info Direct dependencies
  15. └─ unplugin-vue-components@0.24.0
  16. info All dependencies
  17. └─ unplugin-vue-components@0.24.0
  18. ✨  Done in 3.11s.
  19. ➜  root

配置vite.config.ts

  1. import { fileURLToPath, URL } from 'node:url'
  2. import type { UserConfigExport, ConfigEnv } from 'vite'
  3. import vue from '@vitejs/plugin-vue'
  4. import vueJsx from '@vitejs/plugin-vue-jsx'
  5. import { visualizer } from 'rollup-plugin-visualizer'
  6. import { viteMockServe } from 'vite-plugin-mock'
  7. import AutoImport from 'unplugin-auto-import/vite'
  8. import AutoImportComponents from 'unplugin-vue-components/vite'
  10. // https://vitejs.dev/config/
  11. export default ({ command }: ConfigEnv): UserConfigExport => {
  12.   console.log('command', command)
  13.   return {
  14.     plugins: [
  15.       vue(),
  16.       vueJsx(),
  17.       // 分析,参考https://github.com/btd/rollup-plugin-visualizer
  18.       // 执行npm run build时，会自动打开stats.html页面
  19.       visualizer({
  20.         emitFile: false,
  21.         filename: 'stats.html', //分析图生成的文件名
  22.         open: true //如果存在本地服务端口，将在打包后自动展示
  23.       }),
  24.       // 引入mock数据插件，参考https://github.com/vbenjs/vite-plugin-mock
  25.       viteMockServe({
  26.         // mock数据文件存放的文件夹，相对于项目根目录
  27.         mockPath: 'mock',
  28.         localEnabled: command === 'serve'
  29.       }),
  30.       // APIs自动导入，参考https://github.com/antfu/unplugin-auto-import
  31.       AutoImport({
  32.         imports: ['vue', 'vue-router'],
  33.         resolvers: [],
  34.         // 根目录下自动生成自动导入的文件auto-imports.d.ts
  35.         dts: './auto-imports.d.ts'
  36.       }),
  37.       // 按需自动引入组件，参考https://github.com/antfu/unplugin-vue-components
  38.       AutoImportComponents({
  39.         resolvers: []
  40.       })
  41.     ],
  42.     resolve: {
  43.       alias: {
  44.         '@': fileURLToPath(new URL('./src', import.meta.url))
  45.       }
  46.     },
  47.     // 本地服务配置
  48.     // server的参数配置：https://cn.vitejs.dev/config/server-options.html
  49.     server: {
  50.       // IP,default->localhost
  51.       // 设置为0.0.0.0，允许局域网内访问
  52.       host: '0.0.0.0',
  53.       // 端口，default->5173
  54.       port: 3000,
  55.       // 自动从浏览器打开
  56.       open: true
  57.     }
  58.   }
  59. }

配置build选项

参考 https://vitejs.dev/config/build-options.html

具体的配置，参考下面build的注释

  1. import { fileURLToPath, URL } from 'node:url'
  2. import type { UserConfigExport, ConfigEnv } from 'vite'
  3. import vue from '@vitejs/plugin-vue'
  4. import vueJsx from '@vitejs/plugin-vue-jsx'
  5. import { visualizer } from 'rollup-plugin-visualizer'
  6. import { viteMockServe } from 'vite-plugin-mock'
  7. import AutoImport from 'unplugin-auto-import/vite'
  8. import AutoImportComponents from 'unplugin-vue-components/vite'
  10. // https://vitejs.dev/config/
  11. export default ({ command }: ConfigEnv): UserConfigExport => {
  12.   console.log('command', command)
  13.   return {
  14.     plugins: [
  15.       vue(),
  16.       vueJsx(),
  17.       // 分析,参考https://github.com/btd/rollup-plugin-visualizer
  18.       // 执行npm run build时，会自动打开stats.html页面
  19.       visualizer({
  20.         emitFile: false,
  21.         filename: 'stats.html', //分析图生成的文件名
  22.         open: true //如果存在本地服务端口，将在打包后自动展示
  23.       }),
  24.       // 引入mock数据插件，参考https://github.com/vbenjs/vite-plugin-mock
  25.       viteMockServe({
  26.         // mock数据文件存放的文件夹，相对于项目根目录
  27.         mockPath: 'mock',
  28.         localEnabled: command === 'serve'
  29.       }),
  30.       // APIs自动导入，参考https://github.com/antfu/unplugin-auto-import
  31.       AutoImport({
  32.         imports: ['vue', 'vue-router'],
  33.         resolvers: [],
  34.         // 根目录下自动生成自动导入的文件auto-imports.d.ts
  35.         dts: './auto-imports.d.ts'
  36.       }),
  37.       // 按需自动引入组件，参考https://github.com/antfu/unplugin-vue-components
  38.       AutoImportComponents({
  39.         resolvers: []
  40.       })
  41.     ],
  42.     resolve: {
  43.       alias: {
  44.         '@': fileURLToPath(new URL('./src', import.meta.url))
  45.       }
  46.     },
  47.     // 本地服务配置
  48.     // server的参数配置：https://cn.vitejs.dev/config/server-options.html
  49.     server: {
  50.       // IP,default->localhost
  51.       // 设置为0.0.0.0，允许局域网内访问
  52.       host: '0.0.0.0',
  53.       // 端口，default->5173
  54.       port: 3000,
  55.       // 自动从浏览器打开
  56.       open: true,
  57.       // 端口被占用时，是否直接退出
  58.       strictPort: false
  59.     },
  60.     // 打包选项,参考https://vitejs.dev/config/build-options.html
  61.     build: {
  62.       // 打包后的存放路径，默认就是dist
  63.       outDir: 'dist',
  64.       // 打包后表态资源存放路径，默认就是assets
  65.       assetsDir: 'assets',
  66.       // 小于此阈值的导入或引用资源将内联为 base64 编码，以避免额外的 http 请求,设置为0可禁用
  67.       // 默认4096
  68.       assetsInlineLimit: 4096,
  69.       // 设置为false，禁用css代码拆分，全部融合到一个CSS(特别是小项目)
  70.       // 默认为true
  71.       cssCodeSplit: false,
  72.       // 打包时，复制public中的文件到outDir（即dist目录）
  73.       copyPublicDir: true,
  75.       // 消除打包文件超过500KB的告警，最大允许1M
  76.       chunkSizeWarningLimit: 10000,
  77.       // Vite 2.6.x 以上需要配置 minify: "terser", terserOptions 才能生效
  78.       // terser比esbuild压缩的更小，其次可附带其他参数，如去掉注释
  79.       // 使用terser，需要安装terser依赖
  80.       minify: 'terser',
  81.       // 在打包代码时移除 console.log、debugger 和 注释
  82.       // 参考；https://terser.org/docs/api-reference#minify-options
  83.       terserOptions: {
  84.         compress: {
  85.           drop_console: false,
  86.           drop_debugger: true,
  87.           // 只删除console.log，保留其他如console.info
  88.           pure_funcs: ['console.log']
  89.         },
  90.         format: {
  91.           comments: false
  92.         }
  93.       },
  94.       // rollupOptions,参考https://rollupjs.org/configuration-options/
  95.       rollupOptions: {
  96.         // 打包后的文件名
  97.         output: {
  98.           // 处理表态文件，如css，图片,svg
  99.           // [ext]文件后缀，不包含点(.)，[extname]文件名后缀，包含点(.),[hash]文件内容的Hash值,[name]原文件名，不包含后缀
  100.           assetFileNames: 'assets/[ext]/[hash].[ext]',
  101.           // 处理JS
  102.           // [format]格式，[hash]文件内容的Hash值,[name]原文件名，不包含后缀
  103.           chunkFileNames: 'assets/js/[name]-[hash].js',
  104.           entryFileNames: 'assets/js/[name]-[hash].js',
  105.           // 手动分包，解决chunk碎片太多的问题，避免太多的js
  106.           // 默认情况下，一个vue页面会产生一个js
  107.           // 如下，非css的node_modules依赖生成一个js,其他的合并生成一个js(对于小项目来说，完全可这样做，甚至直接生成一个js即可)
  108.           manualChunks(id: any, { getModuleInfo }) {
  109.             const cssLangs = `\\.(css|less|sass|scss|styl|stylus|pcss|postcss)($|\\?)`
  110.             const cssLangRE = new RegExp(cssLangs)
  111.             const isCSSRequest = (request: string): boolean => cssLangRE.test(request)
  112.             // 分vendor包
  113.             if (id.includes('node_modules') && !isCSSRequest(id)) {
  114.               return 'vendor'
  115.             }
  116.             return 'manifest'
  117.           }
  118.         }
  119.       }
  120.     }
  121.   }
  122. }

添加对less的支持

直接安装less即可
在用Webpack 时，需要使用 less-loader 去加载 less 文件时，也需要依赖 less 这个包，所以必须先安装 less。只不过在 Vite 中，我们不再需要使用 less-loader 了，但 less 还是得安装

添加对postcss的支持

我们知道 postcss 可以对某些 css 属性（比如 user-select）自动添加浏览器前缀。
安装postcss和postcss-preset-env

  1. yarn add postcss postcss-preset-env -D

项目根目录下创建postcss.config.js

  1. /* eslint-disable no-undef */
  2. module.exports = {
  3.   plugins: [require('postcss-preset-env')],
  4. };

添加stylelint，支持检测css\less\scss\vue文件

官方：https://stylelint.io/

安装

  1. yarn add stylelint stylelint-config-standard  stylelint-config-standard-scss  stylelint-config-recommended-vue postcss-html postcss-less -D
  • stylelint-config-standard 标准配置
  • stylelint-config-standard-scss 用于支持scss\less
  • stylelint-config-recommended-vue用于支持vue
  • postcss-html 用于支持vue/html
  • postcss-less 用于支持less

创建配置文件..stylelintrc.js，内容如下

  1. // https://stylelint.io/user-guide/get-started
  2. module.exports = {
  3.   extends: [
  4.     'stylelint-config-standard',
  5.     'stylelint-config-standard-scss',
  6.     'stylelint-config-recommended-vue',
  7.   ],
  8.   rules: {
  9.     'unit-no-unknown': null,
  10.     // 禁用less @变量检测
  11.     'at-rule-no-unknown': null,
  12.     'scss/at-rule-no-unknown': null,
  13.   },
  14. };

配置package.json

  1. "scripts": {
  2.     "style-lint": "stylelint src/**/*.{css,less,vue,scss}",
  3.   },

如果需要匹配多级目录，要用下面的写法，否则检测不到

  1. "style-lint": "stylelint src/**/**/**/**/**/**/**/**/**/*.{css,less,vue,scss}",
版权声明：本站文章除特别声明外，均采用署名-非商业性使用-禁止演绎 4.0 国际 许可协议，如需转载，请注明出处

© 2018 IMQIANDUAN.COM 粤ICP备18143223号