搭建vue3+typescript+vite+yarn项目

前言：

vite是vue3推荐的打包工具，相较于webpack，Vite 是基于 native ES module —— 现代浏览器基本已经全部支持了import/export 语法。 在Vite中,启动本地服务器,是不需要提交编译文件的, 而是在浏览器请求对应URL时, 再提供文件,实现了真正的路由懒加载, 这个比起Webpack节省了不少时间。打包和响应速度提升10倍以上

安装项目

1. 全局安装vite

npm init @vitejs/app
// 或
yarn create @vitejs/app

2. 检查您的vue-cli版本

vue -V

若您的版本低于4.0
请使用 vue upgrade 命令更新cli

vue upgrade

我的环境：

  yarn -v  # 1.3.2
  node -v  # v16.14.0
  vue -V   # @vue/cli 5.0.1
  npm -v   # 8.3.1

3. 使用vite构建vue项目

npm init @vitejs/app app-name vue
// 或
yarn create @vitejs/app app-name vue

注意：app-name 是你的项目名称，可以随意取名

4. 然后跟随提示选择，选择的时候用上下键，确定的时候按回车键

我们选中vue，按回车确定

image.png

然后选择vue-ts，回车确认

image.png

5. 根据提示信息分三步操作，安装依赖后启动项目

image.png

这里的vue-app是我的项目名称
我用的是yarn 所以我的操作步骤就是：

cd vue-app
yarn install
yarn dev

启动后在浏览器输入：http://localhost:3000/
页面就像这样：

image.png

到这里，一个基础的vue+ts+vite的项目就搭建好了

重点：如果你对构建项目很熟悉，以上这些步骤，环境准备好后，只需要这条命令就可以了:

// 这条命令可以省去选择的步骤：
yarn create vite my-vue-app --template vue-ts

下一节我们讨论关于vite的配置