# 开始一个Vue3项目
# 主要技术栈
# 安装
# Vue3、Typescript 基本环境
yarn create vite VueDemo --template vue-ts
1
# eslint prettier 代码风格
pnpm add -D eslint \
@typescript-eslint/eslint-plugin \
@typescript-eslint/parser \
eslint-config-prettier \
eslint-plugin-prettier \
eslint-plugin-vue \
eslint-plugin-html \
eslint-plugin-vue \
vue-eslint-parser \
vite-plugin-eslint \
@types/node \
prettier
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
.eslintrc.js
module.exports = {
parser: 'vue-eslint-parser',
parserOptions: {
ecmaVersion: 2020,
sourceType: 'module',
ecmaFeatures: {
jsx: true,
},
parser: '@typescript-eslint/parser',
},
extends: [
'plugin:vue/base',
'plugin:vue/vue3-recommended',
'plugin:vue/vue3-essential',
'plugin:vue/vue3-strongly-recommended',
'plugin:@typescript-eslint/recommended',
'prettier',
'vue-global-api',
],
globals: {
defineProps: 'readonly',
defineEmits: 'readonly',
defineExpose: 'readonly',
withDefaults: 'readonly',
},
plugins: ['pug', 'vue'],
rules: {
'prettier/prettier': 'error',
},
};
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
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
.prettierrc
{
"tabWidth": 2,
"semi": true,
"singleQuote": true,
"jsxSingleQuote": true,
"arrowParens": "avoid"
}
1
2
3
4
5
6
7
2
3
4
5
6
7
vite.config.ts
import eslintPlugin from 'vite-plugin-eslint';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue(), eslintPlugin()],
});
1
2
3
4
5
6
7
2
3
4
5
6
7
husky
pnpm add -D husky
npm set-script prepare "husky install"
npm set-script lint "eslint --fix --ext .ts,.js,.jsx,.tsx,.vue src/**/*.{vue,js,jsx,ts,tsx}"
pnpm add -D husky
npx husky add .husky/pre-commit 'pnpm lint'
1
2
3
4
5
6
2
3
4
5
6
# Pug,scss
pnpm add -D pug sass
1
src/assets/styles/_variable.scss
$primary-color: red;
1
vite.config.ts
import * as path from 'path';
export default defineConfig({
plugins: [vue(), eslintPlugin()],
resolve: {
alias: {
'@': path.resolve(__dirname, './src'),
},
},
css: {
preprocessorOptions: {
scss: {
additionalData: '@use "@/assets/styles/_variable.scss" as *;',
},
},
},
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
postcss.config.js
module.exports = {
plugins: {
autoprefixer: {},
},
};
1
2
3
4
5
2
3
4
5
# Element-plus
pnpm add element-plus unplugin-auto-import unplugin-element-plus unplugin-vue-components
1
vite.config.ts
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import ElementPlus from 'unplugin-element-plus/vite';
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
plugins: [
vue(),
eslintPlugin(),
AutoImport({
imports: ['vue', 'vue-router'],
resolvers: [ElementPlusResolver()],
dts: 'src/auto-imports.d.ts',
}),
ElementPlus(),
Components({
resolvers: [ElementPlusResolver()],
dts: 'src/components.d.ts',
}),
],
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# router
pnpm install vue-router@4
1