安装流程
1.安装vite脚手架
npm install -g create-vite-app
# or
yarn add -g create-vite-app
2.项目初始化
yarn create vite-app
3.集成TS
yarn add --dev typescript
4.项目根目录创建配置文件:tsconfig.json:
{
"include": ["./**/*.ts"],
"compilerOptions": {
"jsx": "react",
"target": "es2020" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */,
"module": "commonjs" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */,
// "lib": ["es2017.object"] /* Specify library files to be included in the compilation. */,
// "declaration": true /* Generates corresponding '.d.ts' file. */,
// "declarationMap": true, /* Generates a sourcemap for each corresponding '.d.ts' file. */
"sourceMap": true /* Generates corresponding '.map' file. */,
// "outFile": "./", /* Concatenate and emit output to single file. */
"outDir": "./dist" /* Redirect output structure to the directory. */,
"strict": true /* Enable all strict type-checking options. */,
"noUnusedLocals": true /* Report errors on unused locals. */,
"noImplicitReturns": true /* Report error when not all code paths in function return a value. */,
"moduleResolution": "node" /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */,
"esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
}
}
5.集成eslint(如果不想安装,可以忽略5,6)
yarn add --dev eslint eslint-plugin-vue
6.项目根目录创建配置文件.eslintrc.js:
module.exports = {
parser: 'vue-eslint-parser',
parserOptions: {
parser: '@typescript-eslint/parser', // Specifies the ESLint parser
ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features
sourceType: 'module', // Allows for the use of imports
ecmaFeatures: {
// tsx: true, // Allows for the parsing of JSX
jsx: true,
},
},
// settings: {
// tsx: {
// version: "detect" // Tells eslint-plugin-react to automatically detect the version of React to use
// }
// },
extends: [
'plugin:vue/vue3-recommended',
'plugin:@typescript-eslint/recommended', // Uses the recommended rules from the @typescript-eslint/eslint-plugin
'prettier/@typescript-eslint', // Uses eslint-config-prettier to disable ESLint rules from @typescript-eslint/eslint-plugin that would conflict with prettier
'plugin:prettier/recommended', // Enables eslint-plugin-prettier and eslint-config-prettier. This will display prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array.
],
rules: {
// Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
// e.g. "@typescript-eslint/explicit-function-return-type": "off",
},
};
7.集成pritter
yarn add --dev prettier eslint-config-prettier eslint-plugin-prettier
8.项目根目录创建配置文件:.prettierrc.js:
module.exports = {
semi: true,
trailingComma: "all",
singleQuote: true,
printWidth: 100,
tabWidth: 2,
endOfLine:"auto"
};
到这一步,一个Vue3+TSX的项目就搭建起来了,以上配置文件的具体内容就不做解释了。
9.修改入口文件
因为默认项目模板是以src/main.js为入口的,我们需要把它修改为src/main.ts。
在根目录的index.html中修改入口文件的引用即可:
... ...
... ...