Chaoszhu'Blog

Appearance

vite+vue3项目搭建 ​

示例仓库

  • vite版本：2.6.4

sass配置 ​

vite天生支持scss、less、stylus语法，只需安装对应的依赖即可

  • yarn add sass -D

sass配置全局最高优先级的css ​

js
// vite.config.js
  css: {
    preprocessorOptions: {
      scss: {
        // *为sass语法，移除命名空间。适合引入全局变量
        additionalData: `
          @use "./src/style/xxx.scss" as *;
          @use "./src/style/xxx/reset.scss" as *;
        `,
        charset: false // sass编译时禁用css的编码(Element3 bug，后续可删除该配置)
      }
    }
  },

环境变量 ​

使用 process.env.NODE_ENV 区分构建时的环境变量

部署环境的变量配置 ​

安装cross-env依赖，yarn add cross-env -D

  • 配置npm脚本，例如：
js
"scripts": {
    "local": "cross-env CUR_ENV=local vite",
    "local:dev": "cross-env CUR_ENV=dev vite",
    "local:uat": "cross-env CUR_ENV=uat vite",
    "dev": "cross-env CUR_ENV=dev vite build",
    "uat": "cross-env CUR_ENV=uat vite build",
    "prod": "cross-env CUR_ENV=prod vite build",
    "serve": "vite preview --port 8888 --host"
  },
js
// vite.config.js
define: {
  'process.env': {
    // 项目中通过 process.env.CUR_ENV 访问
    CUR_ENV: process.env.CUR_ENV
  }
}

alias配置 ​

不需要使用path.resolve()函数

js
// vite.config.js
  resolve: {
    alias: {
      '@': '/src',
      'apis': '/src/apis',
      'assets': '/src/assets',
      'components': '/src/components',
      'plugins': '/src/plugins',
      'utils': '/src/utils',
      'style': '/src/style'
    }
  },

Element3按需引入 ​

安装依赖 ​

yarn add -S element-plus

yarn add -D unplugin-vue-components vite-plugin-style-import

vite配置 ​

  • 调用Components后，会将components文件下的所有组件注册为全局组件

  • ElementPlusResolver会自动按需注册ElementPlus组件

  • vite-plugin-style-import为按需引入样式

js
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import styleImport from 'vite-plugin-style-import'

// ...
  plugins: [
    // ...
    Components({
      resolvers: [
        ElementPlusResolver()
      ]
    }),
    styleImport({
      libs: [
        {
          libraryName: 'element-plus',
          esModule: true,
          resolveStyle: name => {
            if(name.includes('el-')) name = name.replace('el-', '')
            return `element-plus/theme-chalk/src/${ name }.scss` // 按需引入样式(支持自定义)
            // return `element-plus/theme-chalk/${ name }.css`(直接引入构建好的css，不支持自定义)
          }
        }
      ]
    })
  ]
// ...

Eslint配置 ​

安装依赖 ​

yarn add -D eslint @babel/core @babel/eslint-parser eslint-plugin-vue

vite开发时能抛出error的插件：yarn add -D vite-plugin-eslint

vite配置 ​

.eslintrc.js配置(vue3开发推荐)

js
// vite.config.js
  plugins: [
    eslintPlugin(),
    // ...
  ]

StyleLint配置 ​

.stylelintrc.js配置(通用)

  • 未找到合适的开发时能在控制台打印提示的vite插件。在项目根目录创建StyleLint配置文件，在Vscode下载StyleLint插件做本地开发提示

WARNING

测试v1版本以上的插件没带缩进功能，需降级安装v0.87.6版本

vscode自动按配置规范格式化配置 ​

js
// setting.json
  "editor.formatOnSave": false, // 关闭vscode自带的自动保存格式化，防止与eslint冲突
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true, // 保存自动按eslint格式修复
    "source.fixAll.stylelint": true // 保存自动按stylelint格式修复
  },
  // 添加eslint支持文件
  "eslint.validate": [
    "typescript",
    "javascript",
    "javascriptreact",
    "html",
    "vue"
  ],