一、初始化vite项目
// 2021.11.19 更新
$ npm init vite@latest
$ yarn create vite
然后就是安装依赖，运行启动项目
二、eslint+pretter
首先：安装以下5个依赖：
npm install eslint prettier eslint-config-prettier eslint-plugin-prettier eslint-plugin-vue --save-dev
其次：在项目根目录中创建以下文件
1、 .eslintrc.js文件
// 需要安装依赖: npm i eslint-define-config
const { defineConfig } = require('eslint-define-config')
module.exports = defineConfig({
root: true,
/* 指定如何解析语法。*/
parser: 'vue-eslint-parser',
/* 优先级低于parse的语法解析配置 */
parserOptions: {
parser: '@typescript-eslint/parser',
},
// https://eslint.bootcss.com/docs/user-guide/configuring#specifying-globals
globals: {
Nullable: true,
},
extends: [
// add more generic rulesets here, such as:
// 'eslint:recommended',
// 'plugin:vue/vue3-recommended',
// 'plugin:vue/recommended' // Use this if you are using Vue.js 2.x.
'plugin:vue/vue3-recommended',
// 此条内容开启会导致 全局定义的 ts 类型报 no-undef 错误，因为
// https://cn.eslint.org/docs/rules/
'eslint:recommended',
'plugin:@typescript-eslint/recommended', // typescript-eslint推荐规则,
'prettier',
'plugin:prettier/recommended',
],
rules: {
// 'no-undef': 'off',
// 禁止使用 var
'no-var': 'error',
semi: 'off',
// 优先使用 interface 而不是 type
'@typescript-eslint/consistent-type-definitions': ['error', 'interface'],
'@typescript-eslint/no-explicit-any': 'off',
'@typescript-eslint/explicit-module-boundary-types': 'off',
'@typescript-eslint/ban-types': 'off',
'@typescript-eslint/no-unused-vars': 'off',
'vue/html-indent': [
'error',
4,
{
attribute: 1,
baseIndent: 1,
closeBracket: 0,
alignAttributesVertically: true,
ignores: [],
},
],
// 关闭此规则 使用 prettier 的格式化规则， 感觉prettier 更加合理，
// 而且一起使用会有冲突
'vue/max-attributes-per-line': ['off'],
// 强制使用驼峰命名
'vue/component-name-in-template-casing': [
'error',
'PascalCase',
{
registeredComponentsOnly: false,
ignores: [],
},
],
},
})
2、 .prettierrc.js文件
module.exports = {
// 一行最多 100 字符
printWidth: 100,
// 使用 4 个空格缩进
tabWidth: 4,
// 不使用缩进符，而使用空格
useTabs: false,
// 行尾不需要有分号
semi: false,
// 使用单引号
singleQuote: true,
// 对象的 key 仅在必要时用引号
quoteProps: 'as-needed',
// jsx 不使用单引号，而使用双引号
jsxSingleQuote: false,
// 尾随逗号
trailingComma: 'all',
// 大括号内的首尾需要空格
bracketSpacing: true,
// jsx 标签的反尖括号需要换行
jsxBracketSameLine: false,
// 箭头函数，只有一个参数的时候，也需要括号
arrowParens: 'always',
// 每个文件格式化的范围是文件的全部内容
rangeStart: 0,
rangeEnd: Infinity,
// 不需要写文件开头的 @prettier
requirePragma: false,
// 不需要自动在文件开头插入 @prettier
insertPragma: false,
// 使用默认的折行标准
proseWrap: 'preserve',
// 根据显示样式决定 html 要不要折行
htmlWhitespaceSensitivity: 'css',
// 换行符使用 lf
endOfLine: 'lf',
}
3、.prettierignore和.eslintignore文件
/**
*.prettierignore文件
**/
/dist/*
.local
.output.js
/node_modules/**
**/*.svg
**/*.sh
/public/*
/**
*.eslintignore文件
**/
*.sh
node_modules
*.md
*.woff
*.ttf
.vscode
.idea
dist
/public
/docs
.husky
.local
/bin
.eslintrc.js
prettier.config.js
/src/mock/*
三、vscode格式化配置
settings.json文件配置如下
//settings.json文件
{
"editor.formatOnSave": true,
//代码保存时，自动执行ESlint格式化代码
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true,
},
"[html]": {
"editor.defaultFormatter": "vscode.html-language-features"
},
"explorer.confirmDelete": false,
"explorer.compactFolders": false,
"vetur.format.defaultFormatter.js": "none",
"[vue]": {
"editor.defaultFormatter": "octref.vetur"
},
"[javascript,react,javascriptreact,typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"eslint.workingDirectories": [
{"mode":"auto"}
],
"eslint.enable": true,
"eslint.validate": [
"javascript",
"javascriptreact",
"vue"
],
"vetur.validation.script": false,
}
配置成功之后，保存代码，即可自动格式化
四、antdV以及自定义组件按需引入
import Components from 'unplugin-vue-components/vite'
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'
export default defineConfig({
plugins: [
...
Components({
resolvers: [AntDesignVueResolver()]
})
]
})
使用的过程中发现，Vite 下的按需加载，不需要单独导入所需组件
而是直接在项目中使用所需的组件即可，在最后的打包 Vite 会选择性地打包使用过的组件
例如：HelloWorld组件无需导入，可直接使用
