vue3 项目初始化

新建 vue3 项目，支持ts, airbnb, mock, element 按需加载和 git 提交规范

1. 新建项目

   npm init vite@latest project
   
   cd project
   npm i
   npm run dev
   

2. 安装基础插件

   npm i vue-router@test pinia axios
   

3. 配置 eslint

   1. 安装依赖

      npm i eslint prettier eslint-config-prettier -D
      
      // eslint 初始化 选择 vue + ts + airbnb
      eslint --init 
      

   2. 配置规则

      // .eslintrc.js
      module.exports = {
      	env: {
                      browser: true,
                      es2021: true,
      		// 解决 defineProps 等生成的 no-undef 警告
      	  	'vue/setup-compiler-macros': true, 
      	},
      	extends: [
      		// 替换为 加上强制执行主观社区默认值的规则
      		'plugin:vue/vue3-recommended',
      		'airbnb-base',
      		'prettier'
      	],
      	parserOptions: {
      		ecmaVersion: 'latest',
      		parser: '@typescript-eslint/parser',
      		sourceType: 'module',
      	},
      	plugins: ['vue', '@typescript-eslint'],
      	rules: {
      		'import/no-unresolved': 0,
      		'import/no-extraneous-dependencies': [
      			'error',
      			{
      				devDependencies: true,
      			},
      		],	
      		// 这个是解决不写后缀报错的问题
      		'import/extensions': [
      			'error',
      			'ignorePackages',
      			{
      				js: 'never',
      				jsx: 'never',
      				ts: 'never',
      				tsx: 'never',
      				json: 'never',
      			},
      		],
      	},
      	settings: {
      		'import/resolver': {
      			// 这个是解决引入时没后缀查不到的问题
      			node: {
      				extensions: [
      					'.js',
      					'.jsx',
      					'.ts',
      					'.tsx',
      					'.json'
      				],
      			},
      		},
      	},
      };
      

4. 安装 postcss

   1. 安装依赖

      npm i postcss autoprefixer postcss-import tailwindcss -D
      

   2. 配置

   // vite.config.ts import postcssImport from 'postcss-import'; import tailwindcss from 'tailwindcss'; import autoprefixer from 'autoprefixer';

    css: {
    postcss: {
    	plugins: [
    		postcssImport(),
    		tailwindcss(),
    		autoprefixer()
    	],
    },
    ```
   

   3. 初始化 tailwindcss

    ```js
    // 配置只会读取 tailwind.config.js 文件
    
    // 生成配置文件
    npx tailwindcss init
   
    // 在css 文件中引入样式, 在 main.ts 中引入就好
    @import 'tailwindcss/base';
    @import 'tailwindcss/components';
    @import 'tailwindcss/utilities';
    ```
   

5. element-plus

   1. 安装依赖

      npm i unplugin-vue-components unplugin-icons -D
      npm i -D @iconify/json
      npm i element-plus
      

   2. 添加配置

      import Components from 'unplugin-vue-components/vite';
      import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
      import Icons from 'unplugin-icons/vite';
      import IconsResolver from 'unplugin-icons/resolver';
      
      plugins: [
      	Components({
      		resolvers: [
      			ElementPlusResolver(),
      			IconsResolver({
      				// 设置 mdi icon 前缀
      				prefix: 'icon', 
      			}),
      		],
      	}),
      	Icons({
      		autoInstall: true,
      	}),
      ]	
      

   3. 使用

      1. element：在文件中直接使用即可
      2. icon：<icon-mdi-account />

6. mockjs

   1. 安装依赖

      npm i mockjs
      
      npm i vite-plugin-mock -D
      

   2. 配置

      // vite.config.ts
      import { viteMockServe } from 'vite-plugin-mock';
      
      plugin: [
      	viteMockServe({
      		mockPath: 'mock',
      		localEnabled: command === 'serve',
      		prodEnabled: command !== 'serve',
      		logger: true,
      	}),
      ]
      

   3. 使用：在根目录下创建 mock 文件夹即可

7. git 规范

   1. 安装依赖

      // 前置条件
      git init
      
      npm i husky lint-staged -D
      
      npm i @commitlint/cli @commitlint/config-conventional -D 
      

   2. 添加规范

      // 生成规范文件
      echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js
      
      // 修改内容
      module.exports = {
      	extends: ["@commitlint/config-conventional"],
      	rules: {
      		'type-enum': [
      			2,
      			'always',
      			[
      				'bug', // 此项特别针对bug号，用于向测试反馈bug列表的bug修改情况
      				'feat', // 新功能（feature）
      				'fix', // 修补bug
      				'docs', // 文档（documentation）
      				'style', // 格式（不影响代码运行的变动）
      				'refactor', // 重构（即不是新增功能，也不是修改bug的代码变动）
      				'test', // 增加测试
      				'chore', // 构建过程或辅助工具的变动
      				'revert', // feat(pencil): add ‘graphiteWidth’ option (撤销之前的commit)
      				'merge' // 合并分支， 例如： merge（前端页面）： feature-xxxx修改线程地址
      			]
      		]
      	}
      };
      

   3. 添加 lint

      // package.json
      "lint-staged": {
      	"src/**/*.{js,jsx,ts,tsx,json}": [
      		"prettier --write",
      		"eslint --fix",
      		"git add"
      	]
      }
      

   4. 配置 husky

      // 生成 husky 指令：
      npm set-script prepare "husky install"
      
      // 初始化 生成 .husky 文件夹
      npm run prepare
      
      // 配置 commit-msg
      npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'
      
      git add .husky/commit-msg
      
      // 配置 pre-commit
      npx husky add .husky/pre-commit "npx lint-staged --allow-empty $1"
      
      git add .husky/pre-commit
      

   5. 完成，提交代码 git commit -am 'feat: init'

补充

1. 使用路径别名导致的 ts 文件错误提示

 npm install eslint-import-resolver-alias
 
 // tsconfig.json
 compilerOptions: {
     "baseUrl": ".",
     "paths": {
         "@/*": ["src/*"]
     }
 }

// .eslintrc
settings: {
    'import/resolver': {
        alias: {
            map: [['@', './src/']],
            extensions: ['.tsx', '.ts', '.jsx', '.js'],
        },
    },
},