vue3.0使用vite构建V3版本项目

准备工作：安装node.js

1.选择项目安装地址，例如：D:\test\v3在v3文件夹中

2.打开终端，输入npminitvite-app

3.项目初始化完成，看到

在终端中输入cd项目名，进入你项目中发现缺少node_modules（依赖包）

输入npminstall

4.依赖包安装成功，执行npmrundev即可运行项目啦

5.打包项目，执行npmbuild

Vue2.7+Vite项目搭建

需要在根目录创建vetur.config.js

或者改用volar插件

使用官方的@vitejs/plugin-vue2插件

vite创建vue项目后,把插件替换下就行了

vue2应该只支持vue-router3版本

使用unplugin-vue-components插件

使用办法(element-ui为例):

使用@vitejs/plugin-legacy插件

vue3+vite+ts搭建项目

我们使用vite来初始化项目，记得初始化的过程选择vue-ts哟，如此我们就能引入ts，后面不用额外单独对他引入

vite的配置项不少，具体的小伙伴能够到vite官网去看一下，这次我们就配置一下别名。那个别名@的配置有一个小小的坑，也不就是坑，算是要引入path的时候会报错，这可能是我自己对那个不熟，又没有认真看那个提示，就花了点时刻才解决那个咨询题。下面算是解决方案及具体能够看我另外一篇文章。

使用import方式引入的报错提示

使用require方式引入path的报错提示

(1)安装node依赖

(2)配置node模块

在ts.config.js中添加配置"types":["node"]

（3）配置别名

在src目录下创建plugins文件夹，再新建一个element3.ts,用于存放ui库引入的配置

vite+vue3+typescript搭建项目入门

尤大的vue3发布差不多有一段时刻了，其官方脚手架创建项目差不多默认使用vue3版本，看来是时候拥抱vue3用于正式的生产环境了。固然，因为vue3对typescript有着相比vue2更好的支持，本身vue3也是用typescript写的，喜欢折腾学习新知识的能够尝试使用typescript，还有尤大的vite，利用现代扫瞄器的特性能让咱们拥有无论项目大小都能快速刷新的神器。

基于以上种种，笔者尝试用vite+vue3+typescript搭建一个项目。

vite的使用办法能够看看官方文档，这个地方就不做过多的赘述。

稍具规模的项目确信少不了VueRouter、element-plus等插件和第三方UI框架。

笔者适应单独设置一个文件去配置，如router.ts，在定义routes的时候会提示设置数据类型，开始的时候比较懵，后来发现能够import需要的数据类型来配置，似乎如下：

element-plus支持自动导入，配置请自行查看element-plus文档，所以我适应单独import组件注册组件的ui.ts，只引入项目中使用到的组件，内容大致如下：

为了正常挂载router等，main.ts还需要做一番调整，改造后大致内容如下：

到此，基本差不多把咨询题解决的已经了，剩下的基本算是正常开辟业务需求了。

使用Vite创建项目

yarnglobaladdcreate-vite-app@1.18.0

或者

npmi-gcreate-vite-app@1.18.0

cva项目名

或

create-vite-app项目名

npmivue-router@4.0.0-beta.3

配置网站根路径

有的时候项目根目录并不是网站根路径，build出来的index.html中引用资源路径基本上“/xxx”，意思算是直截了当引用根目录下的xxx，造成资源无法引用

解决办法：在项目根目录下创建vite.config.js

内容：

重新build即可

创建Vue客户端项目步骤

1、使用npminitvue@latest创建项目，除了不支持TypeScript和JXT外都选支持

2、修改.eslintrc.cjs，增加windows下换行：

3、修改package.json中运行端口号，防止冲突：

"dev":"vite--port5149",

4、在vite.config.js中增加配置server：

5、安装其它支持包

npminstallbootstrap

npminstall@microsoft/signalr

npminstalloidc-client

vue3.0+vite+router搭建项目

（1）、去Node.js官网安装node

（2）、配置gitbash

（3）安装yarn（yarn比npm更加好用）

（4）、安装yarn淘宝源和npm淘宝源

yarn设置镜像:

vite创建vue项目(创建新的vue项目)

npm设置为淘宝镜像

（1）、安装全局vite

能够改成那个创建

（2）、创建项目（项目名：mangoUI）

创建成功之后有三个指令cdmangoUI和yarninstall，yarndev依次执行，项目创建成功。

注意：使用vscode打开最好安装一个插件：Vue3snippets，方便模板建立。

（1）、查看所有路由版本：

（2）、安装路由（vue-router>=4.0.0）

（3）、初始化路由

vite创建vue项目(创建新的vue项目)

情景一：打开main.js，初始化路由。

vite创建vue项目(创建新的vue项目)

情景二：（使用ts语法）将main.js改成main.ts，初始化路由。别忘了index.html引用main.js路径后续要改成main.ts。

这时组件引用路径会报一个错误，这是因为Typescript只能理解.ts文件，不能理解.vue文件。

解决报错办法：在根目录新建目录shims-vue.d.ts，告诉TS怎么理解.vue文件

假如关闭shims-vue.d.ts依然报错，再在根目录创建一个tsconfig.json文件

来源：今日热点