Vue3+Ant-design项目启用ts/typescript
要在Vue 3项目中启用TypeScript,请按照以下步骤操作:
- 确保你已经安装了Node.js和npm/yarn。
- 如果你还没有一个Vue 3项目,可以使用Vue CLI创建一个:
npm install -g @vue/cli
vue create my-vue3-project
- 进入项目目录:
cd my-vue3-project
- 添加TypeScript支持:
npm install -D typescript
- 初始化TypeScript配置文件:
npx tsc --init
这将生成一个tsconfig.json
文件,你可以根据需要进行编辑。
- 安装TypeScript兼容的Vue装饰器和类型:
npm install -D @vue/cli-plugin-typescript
- 修改
package.json
中的脚本部分,以便可以使用TypeScript编译器启动和构建项目:
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"types": "vue-cli-service types"
}
- 现在,你可以通过运行以下命令来启动Vue 3项目:
npm run serve
- 如果你使用的是Ant Design Vue库,你还需要安装对应的TypeScript类型:
npm install @ant-design/colors-benchmark
- 在
tsconfig.json
中配置对应Ant Design Vue的类型文件:
{
"compilerOptions": {
"types": [
"ant-design-vue/types/vue",
"ant-design-vue/es/global"
]
}
}
这样,你的Vue 3项目就成功启用了TypeScript。在添加TypeScript支持后,你可以开始在项目中使用TypeScript来编写你的Vue组件和其他脚本。
评论已关闭