vue3项目搭建企业级

1.项目搭建

配置语法规范，忽略文件

eslint

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
    jest: true
  },
  parser: 'vue-eslint-parser',
  parserOptions: {
    sourceType: 'module',
    ecmaVersion: 'latest',
    parser: '@typescript-eslint/parser',
    jsxPragma: 'React',
    ecmaFeatures: {
      jsx: true
    }
  },
  //规则继承
  extends: [
    'eslint:recommended', //开启推荐规则
    //vue3语法规则
    'plugin:@typescript-eslint/recommended',
    //ts语法规则
    'plugin:vue/vue3-essential',
    'plugin:prettier/recommended'
  ],
  plugins: ['@typescript-eslint', 'vue'],
  rules: {
    'no-var': 'error', //要求使用const或let
    'no-multiple-empty-lines': ['warn', { max: 1 }], //不允许多个空行
    'no-console': process.env.NODE_ENV == 'production' ? 'error' : 'off', //生产模式禁止console
    'no-debugger': process.env.NODE_ENV == 'production' ? 'error' : 'off', //生产模式禁止断点调试
    'no-unexpected-multiline': 'error', //禁止空余多行
    'no-useless-escape': 'off', //禁止不必要的转义字符

    //tseslint
    '@typescript-eslint/no-unused-vars': 'error', //禁止使用未定义的变量
    '@typescript-eslint/prefer-ts-expect-error': 'error', //禁止使用@ts-ignore
    '@typescript-eslint/no-explicit-any': 'off', //禁止使用any类型变量
    '@typescript-eslint/no-non-null-assertion': 'off',
    '@typescript-eslint/no-namespace': 'off', //禁止使用自定义的ts模块
    '@typescript-eslint/semi': 'off',

    //vue
    'vue/multi-word-component-names': 'off', //组件称始终为-连接的单词
    'vue/script-setup-uses-vars': 'error', //防止scriptsetup使用template的标签
    'vue/no-mutating-props': 'off', //不允许组件prop的改变
    'vue/attribute-hyphenation': 'off' //对模板中自定义组件强制执行属性命名样式
  }
}

忽略文件

dist
node_modules

stylelint

module.exports = {
  extends: [
    'stylelint-config-standard',
    'stylelint-config-html/vue',
    'stylelint-config-standard-scss',
    'stylelint-config-recommended-vue/scss',
    'stylelint-config-recess-order'
  ],
  overrides: [
    {
      files: ['**/*.(scss|css|vue|html)'],
      customSyntax: 'postcss-scss'
    },
    {
      files: ['**/*.(html|vue)'],
      customSyntax: 'postcss-html'
    }
  ],
  /**
   * numm=>关闭
   * always》必须
   */
  rules: {
    'value-keyword-case': null,
    'no-descending-specificity': null,
    'function-url-quotes': 'always',
    'no-empty-source': null,
    'selector-class-pattern': null,
    'property-no-unknown': null,
    'block-opening-brace-space-before': 'always',
    'value-no-vendor-prefix': null,
    'selector-psendo-class-no-unknow': [
      true,
      {
        ignorePseudoClasses: ['global', 'v-deep', 'deep']
      }
    ]
  }
}

stylelint忽略文件

/node_module/*
/dist/*
/html/*
/public/*

prettier

{
  "singleQuote": true,
  "semi": false,
  "bracketSpacing": true,
  "htmlWhitespaceSensitivity": "ignore",
  "endOfLine": "auto",
  "trailingComma": "all",
  "tabWidth": 2
}

prettierignore

/dist/*
/node_modules/**
/html/
.local
**/*.svg
**/*.sh
/public/*

配置package.json

 "scripts": {
    "dev": "vite --open",
    "build": "vue-tsc && vite build",
    "preview": "vite preview",
    "lint": "eslint src",
    "fix": "eslint src --fix",
    "format": "prettier --write \"./**/*.{html,vue,ts,js,json,md}\"",
    "lint:eslint": "eslint src/**/*.{ts,vue} --cache --fix",
    "lint:style": "stylelint src/**/*.{css,scss,vue} --cache --fix",
    "prepare": "husky install"
  },

配置git仓库git init git add . git commit -m '提交' 配置码云新建仓库，复制远程git连接到gitbash

git push

git push -u origin 'master'

配置git自动格式化代码插件husky

npm i husky -D

初始化文件

npx  husky-init

配置文件pre-commit每次提交时候都自动格式化代码

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npm run format

配置提交规则

npm add @commitlint/config-conventional @commitlint/cli -D

commitlint.config.cjs

module.exports = {
  extends: ['@commitlint/config-conventional'],
  //
  rules: {
    'type-enum': [
      2,
      'always',
      [
        'feat',//新功能
        'fix',//修改bug
        'docs',//文档修改
        'style',//代码格式
        'refactor',//代码重构
        'perf',//优化
        'test',//测试用例修改
        'chore',//其他修改
        'revrt',//回滚到上一个版本
        'build',//编译相关的修改
      ]
    ],
    'type-case': [0],
    'type-empty': [0],
    'scope-empty': [0],
    'scop-case': [0],
    'subject-full-stop': [0, 'never'],
    'subject-case': [0, 'never'],
    'header-max-length': [0, 'always', 72]
  }
}

配置package.json

"commitlint":"commitlint --config commitlint.config.cjs -e -v"

配置husky

npx husky add .husky/commit-msg

commit-msg里配置上面设置好的指令

npm commitlint

配置完后，提交信息时候不能随便写了，需要按照格式git commit -m 'fix: xxx'复合类型才可以

1.冒号后面要加空格

2.格式正确还是保存就删了.git文件·下的commit_de...的文件

element-plus

........

环境配置

1.开发环境（development）

开发使用的环境，每位开发人员在自己的dev分支上干活

2.测试环境（testing）

由测试人员配置

3.生产环境（production）

对外开放的，关掉错误报告，打开错误日志

一般情况下，一个环境对应一台服务器

根目录添加

.env.development

NODE_ENV='development'
VITE_APP_TITLE='Admin平台'
VITE_APP_BASE_API='/dev-api'
VITE_SERVE="http:mixin.com"

.env.production

NODE_ENV='production'
VITE_APP_TITLE='Admin平台'
VITE_APP_BASE_API='/dev-api'
VITE_SERVE="http:wwwwww.com"

.env.test

NODE_ENV='test'
VITE_APP_TITLE='Admin平台'
VITE_APP_BASE_API='/dev-api'
VITE_SERVE="http:1213123131.com"

package.json

 "build:test": "vue-tsc && vite build --mode test",
    "build:pro": "vue-tsc && vite build --mode production"

SVG矢量图标

安装

npm i vite-plugin-svg-icons -D

在打包管理文件中vite.config.ts中配置

createSvgIconsPlugin({
    iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
    symbolId: 'icon-[dir]-[name]',
  }),

引入全局

//icon全局配置
import 'virtual:svg-icons-register'

使用

<template>
  <div>
    <svg :style="{ width, height }">
      <use :xlink:href="prefix + name" :fill="color"></use>
    </svg>
  </div>
</template>

<script lang="ts" setup name="index">
defineProps({
  //前缀
  prefix: {
    type: String,
    default: '#icon-'
  },
  //后缀
  name: String,
  // 接收颜色样式
  color: {
    type: String,
    default: 'black'
  },
  width: {
    type: String,
    default: '50px'
  },
  height: {
    type: String,
    default: '50px'
  }
})
</script>
<style scoped></style>

注册自定义插件components/Svgicon/index.ts

引入全局格式化sass

新建styles/index.scss

在main.js中引入

引入完了去npm官网下载reset.scss

新建reset.scss

在index.scss中引入reset.scss

@import url(reset.scss)

然后创建module.scss用于配置全局sass变量

在vite.config.ts中配置

 //scss全局变量的配置
  css: {
    preprocessorOptions: {
      scss: {
        javascriptEnable: true,
        additionalData: '@import "./src/styles/variable.scss";',
      },
    },
  },

配置mockjs 还有vite-plugin-mock 直接npm install -D就可以了，然后配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
//svg图标用到的插件
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
//mock插件提供的方法
import { viteMockServe } from 'vite-plugin-mock'
// https://vitejs.dev/config/
export default defineConfig(({ command }) => {
  return {
    plugins: [
      vue(),
      createSvgIconsPlugin({
        iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
        symbolId: 'icon-[dir]-[name]',
      }),
      viteMockServe({
        localEnabled: command === 'serve',
      }),
    ],
    resolve: {
      alias: {
        '@': path.resolve('./src'),
      },
    },
    //scss全局变量的配置
    css: {
      preprocessorOptions: {
        scss: {
          javascriptEnable: true,
          additionalData: '@import "./src/styles/variable.scss";',
        },
      },
    },
  }
})

创建mock/xxx.ts配置虚拟数据就可以了