前言：21年2月17日，vite2 正式发布，它解决了 vite1 配置路径别名bug，并丰富了构建项目的内容，可以直接使用vite2构建 vue3+ts 的项目啦！
重点：vite现在有中文文档了！文档地址：vite.xilinglaoshi.com/
步骤一：初始化项目，选项介绍，项目目录介绍。
使用 NPM:
npm init @vitejs/app
复制代码
使用 Yarn:
yarn create @vitejs/app
复制代码
image
输入你想要的项目名称
image
这里我们选择vue3 + ts。至于最后一个说实话，我也孤陋寡闻了。
之后进入项目，然后install我就不多说了。
二、项目结构介绍
image
可以看到js文件全部变成ts文件，这里详细介绍两个文件。
shims-vue.d.ts：组件中导入.vue结尾的文件ts会报错，这个文件是声明一个ambient module(即:没有内部实现的 module声明)
vite.config.ts：这里是vite的配置项，相当于vue-cli的vue.config.js文件，这里可以配置路径别名，项目跨域代理配置等。
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
const path = require('path');
export default defineConfig({
plugins: [vue()],
alias: {
'@': path.resolve(__dirname, './src'),
},
server: {
proxy: {
// 如果是 /lsbdb 打头，则访问地址如下
'/sugrec': 'https://www.baidu.com',
// 如果是 /lsbdb 打头，则访问地址如下
'/lsbdb': {
target: 'https://www.baidu.com',
changeOrigin: true,
// rewrite: path => path.replace(/^\/lsbdb/, '')
},
},
},
});
复制代码
贴一份超简单的配置。
router、vuex、less、axios等各位就按照各自所需自行安装吧
npm install vue-i18n@next
npm install vue-router@4
npm install vuex@next --save
npm install ant-design-vue@next --save
npm install axios --save
npm install nprogress --save
npm install less less-loader --save-dev
三、安装格式校验工具。
npm install @typescript-eslint/eslint-plugin -S
npm install @typescript-eslint/parser -S
npm install eslint -S
npm install eslint-config-prettier@7.2.0 -S //这个一定要是7.2.0版本，其他版本配置会报错
npm install eslint-plugin-prettier -S
npm install eslint-plugin-vue -S
npm install prettier -S
npm install pretty-quick -S
npm install vue-eslint-parser -S
以上都是代码检查工具，可以通过配置让eslint对ts进行检查和美化，其中配置可自行根据需求更改。
prettier.config.js 的配置，这是prettier插件的配置项
module.exports = {
printWidth: 100,
tabWidth: 2,
useTabs: false,
semi: true,
vueIndentScriptAndStyle: true,
singleQuote: true,
quoteProps: 'as-needed',
bracketSpacing: true,
trailingComma: 'es5',
jsxBracketSameLine: false,
jsxSingleQuote: false,
arrowParens: 'always',
insertPragma: false,
requirePragma: false,
proseWrap: 'never',
htmlWhitespaceSensitivity: 'strict',
endOfLine: 'lf',
rangeStart: 0,
};
.eslintrc.js的配置项，导入了prettier.config.js的配置
module.exports = {
parser: 'vue-eslint-parser',
parserOptions: {
parser: '@typescript-eslint/parser',
ecmaVersion: 2020,
sourceType: 'module',
ecmaFeatures: {
jsx: true,
},
},
extends: [
'plugin:vue/vue3-recommended',
'plugin:@typescript-eslint/recommended',
'prettier/@typescript-eslint',
'plugin:prettier/recommended',
],
rules: {
'@typescript-eslint/ban-ts-ignore': 'off',
'@typescript-eslint/explicit-function-return-type': 'off',
'@typescript-eslint/no-explicit-any': 'off',
'@typescript-eslint/no-var-requires': 'off',
'@typescript-eslint/no-empty-function': 'off',
'vue/custom-event-name-casing': 'off',
'no-use-before-define': 'off',
'@typescript-eslint/no-use-before-define': 'off',
'@typescript-eslint/ban-ts-comment': 'off',
'@typescript-eslint/ban-types': 'off',
'@typescript-eslint/no-non-null-assertion': 'off',
'@typescript-eslint/explicit-module-boundary-types': 'off',
'@typescript-eslint/no-unused-vars': [
'error',
{
argsIgnorePattern: '^h$',
varsIgnorePattern: '^h$',
},
],
'no-unused-vars': [
'error',
{
argsIgnorePattern: '^h$',
varsIgnorePattern: '^h$',
},
],
'space-before-function-paren': 'off',
'vue/attributes-order': 'off',
'vue/one-component-per-file': 'off',
'vue/html-closing-bracket-newline': 'off',
'vue/max-attributes-per-line': 'off',
'vue/multiline-html-element-content-newline': 'off',
'vue/singleline-html-element-content-newline': 'off',
'vue/attribute-hyphenation': 'off',
// 'vue/html-self-closing': 'off',
'vue/require-default-prop': 'off',
'vue/html-self-closing': [
'error',
{
html: {
void: 'always',
normal: 'never',
component: 'always',
},
svg: 'always',
math: 'always',
},
],
},
};
具体配置可以查看我的github：github.com/TimmyYagami…
四、项目结构个人推荐
image
