以下是基于
Vue3、
Vite、TypeScript的
项目搭建步骤：
1. 安装 Node.js 和 npm
在官网下载并安装 Node.js，npm会随之安装。
2. 创建项目
打开命令行工具，使用以下命令创建一个新的
Vue3 项目：
```
npm init
vite-app <project-name>
cd <project-name>
npm install
```
3. 添加 TypeScript 支持
通过以下命令安装 TypeScript：
```
npm install --save-dev typescript
```
然后在项目根目录下创建一个 `tsconfig.json` 文件：
```json
{
"compilerOptions": {
"target": "es6",
"module": "esnext",
"strict": true,
"jsx": "preserve",
"importHelpers": true,
"moduleResolution": "node",
"experimentalDecorators": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"sourceMap": true,
"baseUrl": ".",
"paths": {
"@/*": ["src/*"]
},
"lib": ["esnext", "dom", "dom.iterable", "scripthost"]
},
"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.
vue", "tests/**/*.ts", "tests/**/*.tsx"]
}
```
4. 添加
Vue Router 和
Vuex
通过以下命令安装
Vue Router 和
Vuex：
```
npm install
vue-router
vuex --save
```
5. 添加 S
CSS 支持
通过以下命令安装 S
CSS：
```
npm install sass sass-loader fibers --save-dev
```
在 `src` 目录下创建一个名为 `
style.s
css` 的文件，并在 `main.ts` 中导入：
```s
css
@import './
style.s
css';
```
6. 添加 ES
Lint 和 Prettier
通过以下命令安装 ES
Lint 和 Prettier：
```
npm install es
lint es
lint-plugin-
vue @typescript-es
lint/parser @typescript-es
lint/es
lint-plugin prettier es
lint-config-prettier es
lint-plugin-prettier --save-dev
```
在项目根目录下创建一个 `.es
lintrc.js` 文件：
```js
module.exports = {
root: true,
env: {
node: true,
},
extends: [
"plugin:
vue/
vue3-essential",
"@
vue/typescript/recommended",
"prettier",
"prettier/@typescript-es
lint",
"prettier/
vue",
],
parserOptions: {
ecmaVersion: 2020,
},
rules: {
"no-console": process.env.NODE_ENV === "production" ? "error" : "off",
"no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
"@typescript-es
lint/no-explicit-any": "off",
"@typescript-es
lint/explicit-module-boundary-types": "off",
},
};
```
在项目根目录下创建一个 `.prettierrc.js` 文件：
```js
module.exports = {
semi: true,
trailingComma: "all",
singleQuote: true,
printWidth: 120,
tabWidth: 2,
};
```
7. 添加 Axios 支持
通过以下命令安装 Axios：
```
npm install axios --save
```
在 `src` 目录下创建一个名为 `api.ts` 的文件，并在其中定义一个 Axios 实例：
```typescript
import axios from 'axios';
const api = axios.create({
baseURL: process.env.
VUE_APP_API_BASE_URL,
timeout: 30000,
});
export default api;
```
8. 添加测试支持
通过以下命令安装 Jest 和
Vue Test Utils：
```
npm install jest @
vue/test-utils ts-jest
vue-jest babel-jest --save-dev
```
在项目根目录下创建一个 `jest.config.js` 文件：
```js
module.exports = {
preset: "ts-jest",
testEnvironment: "jsdom",
transform: {
"^.+\\.
vue$": "
vue-jest",
"^.+\\.(js|jsx|ts|tsx)$": "<rootDir>/node_modules/babel-jest",
},
moduleNameMapper: {
"^@/(.*)$": "<rootDir>/src/$1",
},
setupFilesAfterEnv: ["<rootDir>/tests/setup.ts"],
collectCoverage: true,
collectCoverageFrom: ["src/**/*.{ts,
vue}", "!**/node_modules/**"],
coverageReporters: ["text-summary", "lcov", "html"],
};
```
在项目根目录下创建一个 `tests/setup.ts` 文件：
```typescript
import { config } from "@
vue/test-utils";
config.global.mocks.$t = (key: string) => key;
```
9. 运行项目
使用以下命令启动项目：
```
npm run dev
```
此时，你已经成功搭建了一个基于
Vue3、
Vite、TypeScript 的项目！
安装依赖// 注意版本之间的依赖关系，升级最新版本后可能出现未知错误"devDependencies": { "stylelint": "^13.13.1", "stylelint-config-prettier": "^9.0.3", "stylelint-config-standard": "^22.0.0", "stylelint-order": "^5.0.0", "stylelint-scss": "^4.0.0" },配置 .stylelint
最低0.47元/天 解锁文章
850
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
