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

使用create-vue创建vue3项目

2023年03月01日 发布 阅读(680) 作者: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...
  7. success Installed "create-vue@3.6.1" with binaries:
  8. - create-vue
  9. Done in 4.19s.
  10. root create-vue
  11. Vue.js - The Progressive JavaScript Framework
  12. Project name: vue3-demo
  13. Add TypeScript? No / Yes
  14. Add JSX Support? No / Yes
  15. Add Vue Router for Single Page Application development? No / Yes
  16. Add Pinia for state management? No / Yes
  17. Add Vitest for Unit Testing? No / Yes
  18. Add an End-to-End Testing Solution? Cypress
  19. Add ESLint for code quality? No / Yes
  20. Add Prettier for code formatting? No / Yes
  21. Scaffolding project in /root/vue3-demo...
  22. Done. Now run:
  23. cd vue3-demo
  24. npm install
  25. npm run format
  26. npm run dev
  27. 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'
  2. import { defineConfig } from 'vite'
  3. import vue from '@vitejs/plugin-vue'
  4. import vueJsx from '@vitejs/plugin-vue-jsx'
  5. // https://vitejs.dev/config/
  6. export default defineConfig({
  7. plugins: [vue(), vueJsx()],
  8. resolve: {
  9. alias: {
  10. '@': fileURLToPath(new URL('./src', import.meta.url))
  11. }
  12. },
  13. // 本地服务配置
  14. // server的参数配置:https://cn.vitejs.dev/config/server-options.html
  15. server: {
  16. // 端口
  17. port: 3000
  18. }
  19. })

引入文件分析插件- 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...
  9. success Saved lockfile.
  10. success Saved 11 new dependencies.
  11. info Direct dependencies
  12. └─ rollup-plugin-visualizer@5.9.0
  13. info All dependencies
  14. ├─ cliui@8.0.1
  15. ├─ define-lazy-prop@2.0.0
  16. ├─ get-caller-file@2.0.5
  17. ├─ is-docker@2.2.1
  18. ├─ is-wsl@2.2.0
  19. ├─ open@8.4.2
  20. ├─ require-directory@2.1.1
  21. ├─ rollup-plugin-visualizer@5.9.0
  22. ├─ y18n@5.0.8
  23. ├─ yargs-parser@21.1.1
  24. └─ yargs@17.7.1
  25. Done in 1.73s.
  26. root

设置vite.config.ts

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

stats.html打开如下图

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

安装vite-plugin-mockmockjs,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...
  11. success Saved lockfile.
  12. success Saved 3 new dependencies.
  13. info Direct dependencies
  14. ├─ mockjs@1.1.0
  15. └─ vite-plugin-mock@2.9.6
  16. info All dependencies
  17. ├─ commander@10.0.0
  18. ├─ mockjs@1.1.0
  19. └─ vite-plugin-mock@2.9.6
  20. Done in 3.40s.
  21. 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'
  7. // https://vitejs.dev/config/
  8. export default ({ command }: ConfigEnv): UserConfigExport => {
  9. console.log('command', command)
  10. return {
  11. plugins: [
  12. vue(),
  13. vueJsx(),
  14. // 分析,参考https://github.com/btd/rollup-plugin-visualizer
  15. // 执行npm run build时,会自动打开stats.html页面
  16. visualizer({
  17. emitFile: false,
  18. filename: 'stats.html', //分析图生成的文件名
  19. open: true //如果存在本地服务端口,将在打包后自动展示
  20. }),
  21. // 引入mock数据插件,参考https://github.com/vbenjs/vite-plugin-mock
  22. viteMockServe({
  23. // mock数据文件存放的文件夹,相对于项目根目录
  24. mockPath: 'mock',
  25. localEnabled: command === 'serve'
  26. })
  27. ],
  28. resolve: {
  29. alias: {
  30. '@': fileURLToPath(new URL('./src', import.meta.url))
  31. }
  32. },
  33. // 本地服务配置
  34. // server的参数配置:https://cn.vitejs.dev/config/server-options.html
  35. server: {
  36. // IP,default->localhost
  37. // 设置为0.0.0.0,允许局域网内访问
  38. host: '0.0.0.0',
  39. // 端口,default->5173
  40. port: 3000,
  41. // 自动从浏览器打开
  42. open: true
  43. }
  44. }
  45. }

安装自动导入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')
  4. module.exports = {
  5. root: true,
  6. extends: [
  7. 'plugin:vue/vue3-essential',
  8. 'eslint:recommended',
  9. '@vue/eslint-config-typescript',
  10. '@vue/eslint-config-prettier/skip-formatting',
  11. '.eslintrc-auto-import.json'
  12. ],
  13. overrides: [
  14. {
  15. files: ['cypress/e2e/**/*.{cy,spec}.{js,ts,jsx,tsx}'],
  16. extends: ['plugin:cypress/recommended']
  17. }
  18. ],
  19. parserOptions: {
  20. ecmaVersion: 'latest'
  21. },
  22. rules: {}
  23. }
  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...
  11. success Saved lockfile.
  12. success Saved 40 new dependencies.
  13. info Direct dependencies
  14. └─ unplugin-auto-import@0.15.0
  15. info All dependencies
  16. ├─ @antfu/utils@0.7.2
  17. ├─ @babel/standalone@7.21.2
  18. ├─ @nuxt/kit@3.2.3
  19. ├─ @nuxt/schema@3.2.3
  20. ├─ chownr@2.0.0
  21. ├─ consola@2.15.3
  22. ├─ create-require@1.1.1
  23. ├─ destr@1.2.2
  24. ├─ dotenv@16.0.3
  25. ├─ enhanced-resolve@4.5.0
  26. ├─ errno@0.1.8
  27. ├─ flat@5.0.2
  28. ├─ fs-minipass@2.1.0
  29. ├─ giget@1.1.2
  30. ├─ globby@13.1.3
  31. ├─ hash-sum@2.0.0
  32. ├─ hookable@5.4.2
  33. ├─ isarray@1.0.0
  34. ├─ knitwork@1.0.0
  35. ├─ lodash.template@4.5.0
  36. ├─ lodash.templatesettings@4.2.0
  37. ├─ memory-fs@0.5.0
  38. ├─ minizlib@2.1.2
  39. ├─ mkdirp@1.0.4
  40. ├─ mri@1.2.0
  41. ├─ node-fetch-native@1.0.2
  42. ├─ postcss-import-resolver@2.0.0
  43. ├─ process-nextick-args@2.0.1
  44. ├─ prr@1.0.1
  45. ├─ rc9@2.0.1
  46. ├─ readable-stream@2.3.8
  47. ├─ safe-buffer@5.1.2
  48. ├─ slash@4.0.0
  49. ├─ string_decoder@1.1.1
  50. ├─ tapable@1.1.3
  51. ├─ tar@6.1.13
  52. ├─ unctx@2.1.2
  53. ├─ unplugin-auto-import@0.15.0
  54. ├─ webpack-sources@3.2.3
  55. └─ webpack-virtual-modules@0.5.0
  56. Done in 8.19s.
  57. 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. // 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. // API自动导入
  29. AutoImport({
  30. imports: ['vue', 'vue-router'],
  31. resolvers: [],
  32. // 根目录下自动生成自动导入的文件auto-imports.d.ts
  33. dts: './auto-imports.d.ts',
  34. // Generate corresponding .eslintrc-auto-import.json file.
  35. // eslint globals Docs - https://eslint.org/docs/user-guide/configuring/language-options#specifying-globals
  36. eslintrc: {
  37. enabled: true, // Default `false`
  38. filepath: './.eslintrc-auto-import.json', // Default `./.eslintrc-auto-import.json`
  39. globalsPropValue: true, // Default `true`, (true | false | 'readonly' | 'readable' | 'writable' | 'writeable')
  40. },
  41. })
  42. ],
  43. resolve: {
  44. alias: {
  45. '@': fileURLToPath(new URL('./src', import.meta.url))
  46. }
  47. },
  48. // 本地服务配置
  49. // server的参数配置:https://cn.vitejs.dev/config/server-options.html
  50. server: {
  51. // IP,default->localhost
  52. // 设置为0.0.0.0,允许局域网内访问
  53. host: '0.0.0.0',
  54. // 端口,default->5173
  55. port: 3000,
  56. // 自动从浏览器打开
  57. open: true
  58. }
  59. }
  60. }

引入自动导入组件插件

安装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...
  11. success Saved lockfile.
  12. success Saved 1 new dependency.
  13. info Direct dependencies
  14. └─ unplugin-vue-components@0.24.0
  15. info All dependencies
  16. └─ unplugin-vue-components@0.24.0
  17. Done in 3.11s.
  18. 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'
  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. // APIs自动导入,参考https://github.com/antfu/unplugin-auto-import
  30. AutoImport({
  31. imports: ['vue', 'vue-router'],
  32. resolvers: [],
  33. // 根目录下自动生成自动导入的文件auto-imports.d.ts
  34. dts: './auto-imports.d.ts'
  35. }),
  36. // 按需自动引入组件,参考https://github.com/antfu/unplugin-vue-components
  37. AutoImportComponents({
  38. resolvers: []
  39. })
  40. ],
  41. resolve: {
  42. alias: {
  43. '@': fileURLToPath(new URL('./src', import.meta.url))
  44. }
  45. },
  46. // 本地服务配置
  47. // server的参数配置:https://cn.vitejs.dev/config/server-options.html
  48. server: {
  49. // IP,default->localhost
  50. // 设置为0.0.0.0,允许局域网内访问
  51. host: '0.0.0.0',
  52. // 端口,default->5173
  53. port: 3000,
  54. // 自动从浏览器打开
  55. open: true
  56. }
  57. }
  58. }

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

添加对less的支持

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

添加对postcss的支持

我们知道 postcss 可以对某些 css 属性(比如 user-select)自动添加浏览器前缀。
安装postcsspostcss-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 国际 许可协议,如需转载,请注明出处