使用vue3+ts创建项目的两种方法

目录

1.基于vite的创建

2.基于vue脚手架 的创建

3.对比：

4.内容配置

5.配置插件

---

1.基于vite的创建

指令：

npm init vite@latest

由于我们这个项目是基于vite创建的，我们命名为vite-demo,框架选择vue,然后选择typeScript

接下来执行指令

cd vite-demo

进入文件夹vite-demo当中，执行指令

npm install

 安装项目相关依赖

执行指令

npm run dev

 可以看到

ctrl+鼠标左键打开网址

项目创建完毕。 

2.基于vue脚手架 的创建

指令：

npm init vue@latest

 由于我们这个项目是基于vue创建的，我们命名为vue-demo,然后,基本上都选择“是”

这样下来，项目就比较大，安装的依赖也比较多，也就是npm install的时候，耗费的时间会比较长了。最后跑起来的效果如下

3.对比：

选择哪一种都可以。

基于vue脚手架配置的是专门针对vue的，配置比较全，可以帮我们把router,pinia等一些东西都装进来。

纯vite构建的，支持多种框架，比如可以构建react项目，构建solid,构建vue都可以。

4.内容配置

两种方式创建的vue3+ts项目，都要配有env.d.ts文件，让ts能够解析以“.vue”结尾的文件。

1.在使用vite创建的项目中，没有这个文件，于是我们需要手动从根目录下创建这个文件，文件内容如下

/// <reference types="vite/client" />
declare module '*.vue'{
    import type { DefineComponent } from "vue";
    const component:DefineComponent<{},{},any>
    export default component
}

2.在使用vue创建的项目中，有env.d.ts文件，但是，没有配置解析vue文件的代码，只有一段

/// <reference types="vite/client" />

需要再添加一段

declare module '*.vue'{
    import type { DefineComponent } from "vue";
    const component:DefineComponent<{},{},any>
    export default component
}

 总之，无论是vite创建的项目还是vue创建的项目，都要有env.d.ts文件，并且文件内容一样。

5.配置插件

之前使用的插件是 vue Language Feature和TypeScript  Vue Plugin(volar)，但是，目前两个都不再使用，合并正式改名称为vue-official,也就是直接下载插件vue-official ( volar ) 就行。 如果之前写过vue2项目，那么你大概已经下载过插件 vetur 了，这里我们建议将vetur插件直接禁用或者是卸载，不然代码中会有一些冲突报错。同理，如果之后要写vue2项目，建议把volar禁用或者是卸载，同时解除对vetur的禁用或者是直接卸载volar。