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项目实战

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值