搭建前端Vue框架需要以下步骤：
-
安装Node.js和npm
-
创建一个新的Vue项目
vue create my-project
- 安装TypeScript
npm install --save-dev typescript
- 配置TypeScript
在项目根目录下创建一个tsconfig.json文件，并添加以下内容：
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"strict": true,
"jsx": "preserve",
"moduleResolution": "node",
"esModuleInterop": true,
"sourceMap": true,
"baseUrl": ".",
"paths": {
"@/*": ["src/*"]
}
},
"include": ["src/**/*.ts", "src/**/*.tsx", "tests/**/*.ts", "tests/**/*.tsx", "typings/**/*.d.ts"],
"exclude": ["node_modules"]
}
- 安装ESLint和Prettier
npm install --save-dev eslint prettier eslint-plugin-prettier eslint-config-prettier eslint-plugin-node eslint-config-node
- 配置ESLint和Prettier
在项目根目录下创建一个.eslintrc.js文件，并添加以下内容：
module.exports = {
root: true,
env: {
node: true,
},
extends: [
'plugin:vue/vue3-essential',
'eslint:recommended',
'@vue/typescript/recommended',
'prettier',
'prettier/@typescript-eslint',
'prettier/vue',
],
parserOptions: {
ecmaVersion: 2020,
},
plugins: ['vue', '@typescript-eslint'],
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'vue/no-multiple-template-root': 'off',
'@typescript-eslint/no-explicit-any': 'off',
'@typescript-eslint/explicit-module-boundary-types': 'off',
},
};
在项目根目录下创建一个.prettierrc.js文件，并添加以下内容：
module.exports = {
semi: true,
trailingComma: 'all',
singleQuote: true,
printWidth: 120,
tabWidth: 2,
};
- 安装Vite
npm install --save-dev vite
- 配置Vite
在项目根目录下创建一个vite.config.ts文件，并添加以下内容：
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import path from 'path';
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'@': path.resolve(__dirname, 'src'),
},
},
});
- 运行项目
npm run dev
以上就是搭建前端Vue框架的步骤，包括TypeScript、ESLint、Prettier和Vite的配置。