vite3构建vue3项目

vite

什么是vite ？

vite是一个web开发构建工具，由于其原生ES模块导入方法，它允许快速提供代码。在开发环境下基于浏览器原生ES imports开发，在生成环境下基于Rollup打包。

通过在终端中运行一下命令，可以使用vite快速构建vue项目比webpack打包更加快速。

特点：

1、快速的冷启动

2、即时的模块热更新

3、真正的按需编译

 

一、 使用Vite创建Vue3项目

1. 全局安装vite，使用命令 npm install vite -g

当前版本 vite@4.1.4

2. 创建vue3项目，使用命令 npm create vite@latest ,确认项目名称，选择Vue

（我这里使用的nodejs 版本是14.21.3） 14版本兼容支持vue2,vue3项目下载的依赖和运行。

 

cd cec-ui-external  进入当前项目

npm install 下载依赖

npm run dev 跑起项目

 

 

 项目代码如下

 

 

 

接下来我们要下载使用到的相关的组件依赖

 

 

element-plus   介绍：（element）vue3版本

vue-i18n-next  介绍：国际化 vue3版本

vue-router@4       介绍：vue3路由

 后续可以加上

vxe-table         介绍：较好的表格组件有vue3版本

pinia   　　　 介绍：在Vue3中，可以使用传统的Vuex来实现状态管理，也可以使用最新的pinia来实现状态管理

 

相关资料

vscode vue3 插件

 

 

 

1、（关于node版本） 用npm view node  看到当前vite版本支持的node版本号。

 

 

 

 2、使用nvm管理(切换)node版本

使用管理员身份安装nvm，下载如下
https://nvm.uihtm.com/
安装包下载下来之后，要右键，点击“以管理员身份打开”，然后进行安装
3. 安装完nvm之后找到nvm下载路径对应的文件
如果没有看到，可以把隐藏的项目都打开
4. 使用管理员身份打开cmd，nvm install xxx（node的版本）,两个版本都执行一次下载命令
右键cmd,以管理员身份运行，
5. 执行完4之后，nvm路径下出现两个版本的node包
6. 到node的官网上将这两个node包下载下来，替换掉nvm目录下的对应版本的node包（nvm自动下载的node包有问题）node地址如下
https://nodejs.org/zh-cn/download/releases/
7. 重启电脑
8. 用管理员身份打开cmd，输入nvm list有打印node的版本即安装成功
9. 使用nvm use xxx(node版本) 切换node的版本

nvm相关命令

nvm list 查看当前安装的node版本

nvm install xxx 下载node版本

nvm use xxx  切换版本