Vue3工程化#

1
  "scripts": {
2
    "dev": "vite --open",
3
    "build": "vue-tsc -b && vite build",
4
    "preview": "vite preview"
5
  },

1
"scripts": {
2
    "lint": "eslint src",
3
    "fix": "eslint --config ./eslint.config.js src --fix",
4
}

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

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

1
{
2
  "editor.codeActionsOnSave": {
3
    "source.fixAll.eslint": "explicit"
4
  },
5
  "eslint.format.enable": true,
6
  "editor.defaultFormatter": "esbenp.prettier-vscode",
7
  "editor.formatOnSave": true,
8
  "[typescript]": {
9
    "editor.defaultFormatter": "esbenp.prettier-vscode"
10
  },
11
  "[vue]": {
12
    "editor.defaultFormatter": "esbenp.prettier-vscode"
13
  }
14
}

1
// @see https://stylelint.bootcss.com/
2

3
module.exports = {
4
  extends: [
5
    'stylelint-config-standard', // 配置stylelint拓展插件
6
    'stylelint-config-html/vue', // 配置 vue 中 template 样式格式化
7
    'stylelint-config-standard-scss', // 配置stylelint scss插件
8
    'stylelint-config-recommended-vue/scss', // 配置 vue 中 scss 样式格式化
9
    'stylelint-config-recess-order', // 配置stylelint css属性书写顺序插件,
10
    'stylelint-config-prettier', // 配置stylelint和prettier兼容
11
  ],
12
  overrides: [
13
    {
14
      files: ['**/*.(scss|css|vue|html)'],
15
      customSyntax: 'postcss-scss',
16
    },
17
    {
18
      files: ['**/*.(html|vue)'],
19
      customSyntax: 'postcss-html',
20
    },
21
  ],
22
  ignoreFiles: [
23
    '**/*.js',
24
    '**/*.jsx',
25
    '**/*.tsx',
26
    '**/*.ts',
27
    '**/*.json',
28
    '**/*.md',
29
    '**/*.yaml',
30
  ],
31
  /**
32
   * null  => 关闭该规则
33
   * always => 必须
34
   */
35
  rules: {
36
    'value-keyword-case': null, // 在 css 中使用 v-bind，不报错
37
    'no-descending-specificity': null, // 禁止在具有较高优先级的选择器后出现被其覆盖的较低优先级的选择器
38
    'function-url-quotes': 'always', // 要求或禁止 URL 的引号 "always(必须加上引号)"|"never(没有引号)"
39
    'no-empty-source': null, // 关闭禁止空源码
40
    'selector-class-pattern': null, // 关闭强制选择器类名的格式
41
    'property-no-unknown': null, // 禁止未知的属性(true 为不允许)
42
    'block-opening-brace-space-before': 'always', //大括号之前必须有一个空格或不能有空白符
43
    'value-no-vendor-prefix': null, // 关闭 属性值前缀 --webkit-box
44
    'property-no-vendor-prefix': null, // 关闭 属性前缀 -webkit-mask
45
    'selector-pseudo-class-no-unknown': [
46
      // 不允许未知的选择器
47
      true,
48
      {
49
        ignorePseudoClasses: ['global', 'v-deep', 'deep'], // 忽略属性，修改element默认样式的时候能使用到
50
      },
51
    ],
52
  },
53
}

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

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

1
  "scripts": {
2
    "dev": "vite --open",
3
    "build": "vue-tsc -b && vite build",
4
    "preview": "vite preview",
5
    "lint": "eslint src",
6
    "fix": "eslint --config ./eslint.config.js src --fix",
7
    "format": "prettier --write \"./**/*.{html,vue,ts,js,json,md}\"",
8
    "lint:eslint": "eslint src/**/*.{ts,vue} --cache --fix",
9
    "lint:style": "stylelint src/**/*.{css,scss,vue} --cache --fix"
10
  },

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

1
module.exports = {
2
  extends: ['@commitlint/config-conventional'],
3
  // 校验规则
4
  rules: {
5
    'type-enum': [
6
      2,
7
      'always',
8
      [
9
        'feat',
10
        'fix',
11
        'docs',
12
        'style',
13
        'refactor',
14
        'perf',
15
        'test',
16
        'chore',
17
        'revert',
18
        'build',
19
      ],
20
    ],
21
    'type-case': [0],
22
    'type-empty': [0],
23
    'scope-empty': [0],
24
    'scope-case': [0],
25
    'subject-full-stop': [0, 'never'],
26
    'subject-case': [0, 'never'],
27
    'header-max-length': [0, 'always', 72],
28
  },
29
}

1
{
2
"scripts": {
3
    "commitlint": "commitlint --config commitlint.config.cjs -e -V"
4
  },
5
}

1
'feat',//新特性、新功能
2
'fix',//修改bug
3
'docs',//文档修改
4
'style',//代码格式修改, 注意不是 css 修改
5
'refactor',//代码重构
6
'perf',//优化相关，比如提升性能、体验
7
'test',//测试用例修改
8
'chore',//其他修改, 比如改变构建流程、或者增加依赖库、工具等
9
'revert',//回滚到上一个版本
10
'build',//编译相关的修改，例如发布版本、对项目构建或者依赖的改动

1
npx husky add .husky/commit-msg

1
#!/usr/bin/env sh
2
. "$(dirname -- "$0")/_/husky.sh"
3
pnpm commitlint

1
if (!/pnpm/.test(process.env.npm_execpath || '')) {
2
  console.warn(
3
    `\u001b[33mThis repository must using pnpm as the package manager ` +
4
    ` for scripts to work properly.\u001b[39m\n`,
5
  )
6
  process.exit(1)
7
}

1
"scripts": {
2
  "preinstall": "node ./scripts/preinstall.js"
3
}

1
{
2
  "compilerOptions": {
3
    "baseUrl": "./", // 解析非相对模块的基地址，默认是当前目录
4
    "paths": { //路径映射，相对于baseUrl
5
      "@/*": ["src/*"]
6
    }
7
  }
8
}

1
{
2
  "extends": "@vue/tsconfig/tsconfig.dom.json",
3
  "compilerOptions": {
4
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
5
    "baseUrl": "./", // 解析非相对模块的基地址，默认是当前目录
6
    "paths": {
7
      //路径映射，相对于baseUrl
8
      "@/*": ["src/*"]
9
    },
10
    /* Linting */
11
    "strict": true,
12
    "noUnusedLocals": false,
13
    "noUnusedParameters": true,
14
    "erasableSyntaxOnly": true,
15
    "noFallthroughCasesInSwitch": true,
16
    "noUncheckedSideEffectImports": true
17
  },
18
  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
19
}

1
.env.development
2
.env.production
3
.env.test

1
# 变量必须以 VITE_ 为前缀才能暴露给外部读取
2
NODE_ENV = 'development'
3
VITE_APP_TITLE = '硅谷甄选运营平台'
4
VITE_APP_BASE_API = '/dev-api'
5
VITE_SERVE="http://xxxx.com"

1
NODE_ENV = 'production'
2
VITE_APP_TITLE = '硅谷甄选运营平台'
3
VITE_APP_BASE_API = '/prod-api'
4
VITE_SERVE="http://xxxx.com"

1
# 变量必须以 VITE_ 为前缀才能暴露给外部读取
2
NODE_ENV = 'test'
3
VITE_APP_TITLE = '硅谷甄选运营平台'
4
VITE_APP_BASE_API = '/test-api'
5
VITE_SERVE="http://xxxx.com"

1
 "scripts": {
2
    "dev": "vite --open",
3
    "build:test": "vue-tsc && vite build --mode test",
4
    "build:pro": "vue-tsc && vite build --mode production",
5
    "preview": "vite preview"
6
  },

1
console.log(import.meta.env);
2
console.log(import.meta.env.BASE_URL);
3
console.log(import.meta.env.VITE_SERVE);

1
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
2
import path from 'path'
3
export default () => {
4
  return {
5
    plugins: [
6
      createSvgIconsPlugin({
7
        // Specify the icon folder to be cached
8
        iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
9
        // Specify symbolId format
10
        symbolId: 'icon-[dir]-[name]',
11
      }),
12
    ],
13
  }
14
}

1
<template>
2
  <div>
3
    <h2>SVG的使用</h2>
4
    <svg style="width: 100px; height: 100px;">
5
      <!-- xlink:href 执行用哪一个图标，属性值务必以#icon开头-图标名字 -->
6
       <!-- fill可以填充图标颜色 -->
7
      <use xlink:href="#icon-load" fill="red"></use>
8
    </svg>
9
  </div>
10
</template>
11

12
<script setup lang="ts">
13
</script>
14

15
<style scoped></style>

1
<template>
2
  <div>
3
    <svg :style="{ width: width, height: height }">
4
      <use :xlink:href="prefix + name" :fill="color"></use>
5
    </svg>
6
  </div>
7
</template>
8

9
<script setup lang="ts">
10
defineProps({
11
  //xlink:href属性值的前缀
12
  prefix: {
13
    type: String,
14
    default: '#icon-'
15
  },
16
  //svg矢量图的名字
17
  name: String,
18
  //svg图标的颜色
19
  color: {
20
    type: String,
21
    default: ""
22
  },
23
  //svg宽度
24
  width: {
25
    type: String,
26
    default: '16px'
27
  },
28
  //svg高度
29
  height: {
30
    type: String,
31
    default: '16px'
32
  }
33

34
})
35
</script>
36
<style scoped></style>

1
<template>
2
  <div>
3
    <h2>SVG的使用</h2>
4
    <SvgIcon name="home" color="red" width="100px" height="100px"></SvgIcon>
5
  </div>
6
</template>
7

8
<script setup lang="ts">
9
import SvgIcon from '@/components/SvgIcon/index.vue'
10
</script>
11

12
<style scoped></style>

1
<style scoped lang="scss"></style>

1
/**
2
 * ENGINE
3
 * v0.2 | 20150615
4
 * License: none (public domain)
5
 */
6

7
*,
8
*:after,
9
*:before {
10
  box-sizing: border-box;
11

12
  outline: none;
13
}
14

15
html,
16
body,
17
div,
18
span,
19
applet,
20
object,
21
iframe,
22
h1,
23
h2,
24
h3,
25
h4,
26
h5,
27
h6,
28
p,
29
blockquote,
30
pre,
31
a,
32
abbr,
33
acronym,
34
address,
35
big,
36
cite,
37
code,
38
del,
39
dfn,
40
em,
41
img,
42
ins,
43
kbd,
44
q,
45
s,
46
samp,
47
small,
48
strike,
49
strong,
50
sub,
51
sup,
52
tt,
53
var,
54
b,
55
u,
56
i,
57
center,
58
dl,
59
dt,
60
dd,
61
ol,
62
ul,
63
li,
64
fieldset,
65
form,
66
label,
67
legend,
68
table,
69
caption,
70
tbody,
71
tfoot,
72
thead,
73
tr,
74
th,
75
td,
76
article,
77
aside,
78
canvas,
79
details,
80
embed,
81
figure,
82
figcaption,
83
footer,
84
header,
85
hgroup,
86
menu,
87
nav,
88
output,
89
ruby,
90
section,
91
summary,
92
time,
93
mark,
94
audio,
95
video {
96
  font: inherit;
97
  font-size: 100%;
98

99
  margin: 0;
100
  padding: 0;
101

102
  vertical-align: baseline;
103

104
  border: 0;
105
}
106

107
article,
108
aside,
109
details,
110
figcaption,
111
figure,
112
footer,
113
header,
114
hgroup,
115
menu,
116
nav,
117
section {
118
  display: block;
119
}
120

121
body {
122
  line-height: 1;
123
}
124

125
ol,
126
ul {
127
  list-style: none;
128
}
129

130
blockquote,
131
q {
132
  quotes: none;
133
  &:before,
134
  &:after {
135
    content: '';
136
    content: none;
137
  }
138
}
139

140
sub,
141
sup {
142
  font-size: 75%;
143
  line-height: 0;
144

145
  position: relative;
146

147
  vertical-align: baseline;
148
}
149
sup {
150
  top: -0.5em;
151
}
152
sub {
153
  bottom: -0.25em;
154
}
155

156
table {
157
  border-spacing: 0;
158
  border-collapse: collapse;
159
}
160

161
input,
162
textarea,
163
button {
164
  font-family: inhert;
165
  font-size: inherit;
166

167
  color: inherit;
168
}
169

170
select {
171
  text-indent: 0.01px;
172
  text-overflow: '';
173

174
  border: 0;
175
  border-radius: 0;
176

177
  -webkit-appearance: none;
178
  -moz-appearance: none;
179
}
180
select::-ms-expand {
181
  display: none;
182
}
183

184
code,
185
pre {
186
  font-family: monospace, monospace;
187
  font-size: 1em;
188
}

1
@use './reset.scss' as *;

1
<style scoped lang="scss">
2
  .app {
3
    background-color: $bgColor;
4
  }
5
</style>