vite+vue3+ts开发项目构建过程

1、首先我们电脑需要安装node,并且我们需要先了解ts的基础以及了解一些vue2，了解这些的我们就可以本地搭建环境了，相信有了vue2的基础，node环境搭建应该很简单了吧。

mac安装node的话我建议大家安装一个nvm，当然如果以前安装过nvm的话就不用安装了，或者不想装nvm的大家也可以不安装直接装node对应的版本就行，我这边建议大家安装14版本的稳定版，如果想安装nvm的大家跟我往下看

//mac安装nvm 步骤
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.38.0/install.sh | bash
//下载安装完后我们使用 nvm --version检查是否安装成功，成功返回版本号说明安装成功
//安装成功后我们使用nvm管理node，不知道的大家可以搜下nvm的用处，他是一个node管理工具，非常方便，我们本地可以切换任意版本的node
//这里就不做演示了
nvm install 14.17.3   //这里我们直接安装14版本的node
//node安装成功后我们构建vite的这样一个项目
//npm命令
npm init vite@latest
//yarn命令(当然这个我们得本地安装yarn)
yarn create vite

然后我们输入项目名称vite-app-web回车后会 出现如下图

然后我们选择我们的技术栈vue然后放到相应位置回车出现如下

然后我们再选择vue-ts就安装成功了

然后我们依次按照如下命令运行

cd vite-app-web
npm install
npm run dev

然后我们在package.json中看到

"scripts": {
    "dev": "vite",  //这个是启动开发服务器
    "build": "vue-tsc --noEmit && vite build",  //这个是打包
    "preview": "vite preview" //这个是本地预览生产环境产物
  },

vite构建简单介绍
vite是冷服务，首先是通过esmodule形式帮我们引入文件的

而传统的webpack是通过在本地打个包然后再预览，因此vite的编译速度相当的快
HMR是速度特别快的模块热更新
Rollup打包，并且是预配置的，支持大部分Rollup插件

相信用过vue-cli的小伙伴都知道这两者在速度上的差别，我这里就不在一一对比了。

接下来我能看项目的目录结构跟之前的差别，首先我们看下vite构建的项目目录结构：

大致跟vue2中的vue-cli3、vue-cli4的结构差不多，除了index.html在3跟4是放在public而vite是放在根目录，并且我们cli3与cli4的相关配置文件是(webpack构建的)vue.config.js而vite构建的是vite.config,js
其他基本没啥差别。

今天先到这里
明天给大家更新vite+ts+vue3+pinia项目实战