vue cli 4 添加、移除typescript
在Vue CLI 4中添加TypeScript,你需要在创建项目时选择TypeScript,或者对现有的Vue 2项目进行升级。
如果是在创建新项目时添加TypeScript,请按照以下步骤操作:
- 安装Vue CLI(如果尚未安装):
npm install -g @vue/cli
# 或者
yarn global add @vue/cli
- 创建一个新的Vue项目并添加TypeScript:
vue create my-project
# 在提示选择预设时,可以选择默认设置或手动选择特性,包括是否使用TypeScript
如果你想在一个已经建立的Vue 2项目中添加TypeScript,你可以按照以下步骤操作:
- 安装TypeScript依赖:
npm install --save-dev typescript
# 或者
yarn add --dev typescript
- 在项目根目录下创建一个
tsconfig.json
文件:
{
"compilerOptions": {
"target": "es5",
"module": "esnext",
"strict": true,
"jsx": "preserve",
"importHelpers": true,
"moduleResolution": "node",
"experimentalDecorators": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"sourceMap": true,
"baseUrl": ".",
"types": [
"webpack-env"
],
"paths": {
"@/*": [
"src/*"
]
}
},
"include": [
"src/**/*.ts",
"src/**/*.tsx",
"src/**/*.vue",
"tests/**/*.ts",
"tests/**/*.tsx"
],
"exclude": [
"node_modules"
]
}
- 修改Vue项目的webpack配置,以支持TypeScript。
- 将现有的JavaScript文件改写为TypeScript文件,并添加相应的类型注释。
移除TypeScript的步骤如下:
- 移除TypeScript相关的依赖:
npm uninstall --save-dev typescript ts-loader tslint
# 或者
yarn remove --dev typescript ts-loader tslint
- 删除
tsconfig.json
和项目中的所有TypeScript文件。 - 修改webpack配置,移除与TypeScript加载器和插件相关的部分。
- 将TypeScript文件改回为JavaScript文件。
评论已关闭