首页 前端工程化

# Vue3 项目搭建

# 1. 项目搭建

​ 配置语法规范，忽略文件

eslint

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
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' //对模板中自定义组件强制执行属性命名样式
  }
}

忽略文件

1
2
dist
node_modules

stylelint

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
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 忽略文件

1
2
3
4
/node_module/*
/dist/*
/html/*
/public/*

Prettier

1
2
3
4
5
6
7
8
9
{
  "singleQuote": true,
  "semi": false,
  "bracketSpacing": true,
  "htmlWhitespaceSensitivity": "ignore",
  "endOfLine": "auto",
  "trailingComma": "all",
  "tabWidth": 2
}

prettierignore

1
2
3
4
5
6
7
/dist/*
/node_modules/**
/html/
.local
**/*.svg
**/*.sh
/public/*

配置 package.json

1
2
3
4
5
6
7
8
9
10
11
"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

1
git push -u origin 'master'

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

1
npm i husky -D

初始化文件

1
npx  husky-init

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

1
2
3
4
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
 
npm run format

配置提交规则

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

commitlint.config.cjs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
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

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

配置 husky

1
npx husky add .husky/commit-msg

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

1
npm commitlint

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

1. 冒号后面要加空格

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

# element-plus

........

# 环境配置

1. 开发环境（development）

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

2. 测试环境（testing）

由测试人员配置

3. 生产环境（production）

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

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

根目录添加

.env.development

1
2
3
4
NODE_ENV='development'
VITE_APP_TITLE='项目名称'
VITE_APP_BASE_API='/dev-api'
VITE_SERVE="服务地址"

.env.production

1
2
3
4
NODE_ENV='production'
VITE_APP_TITLE='项目名称'
VITE_APP_BASE_API='/dev-api'//代理前缀
VITE_SERVE="服务地址"

.env.test

1
2
3
4
NODE_ENV='test'
VITE_APP_TITLE='项目名称'
VITE_APP_BASE_API='/dev-api'//代理前缀
VITE_SERVE="服务地址"

package.json

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

# SVG 矢量图标

安装

1
npm i vite-plugin-svg-icons -D

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

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

引入全局

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

使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<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

1
@import url(reset.scss)

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

在 vite.config.ts 中配置

1
2
3
4
5
6
7
8
9
//scss全局变量的配置
 css: {
   preprocessorOptions: {
     scss: {
       javascriptEnable: true,
       additionalData: '@import "./src/styles/variable.scss";',
     },
   },
 },

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
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 配置虚拟数据就可以了

更新于 阅读次数 次

请我喝[茶]~(￣▽￣)~*

Xiao Yang Guo 微信支付

微信支付

Xiao Yang Guo 支付宝

支付宝

Xiao Yang Guo 贝宝

贝宝