2. 使用Vite搭建Vue3 + TypeScript项目 — 初始化

使用create-vite-app

  • 安装脚手架
# yarn
yarn global add create-vite-app

# npm
npm install -g create-vite-app
 
  • 创建项目
create-vite-app <app-name>
 
  • 运行项目
# yarn
yarn && yarn dev

# npm
npm install && npm run dev
 

PS: 进入create-vite-app的GitHub可以看到,该脚手架已经不再维护了,而是迁移到了@vitejs/create-app下, 所以这种方式不再建议使用

使用@vite/create-app

  • 创建项目
// 这里我们可以直接使用初始化指令来省略创建步骤
# npm 6.x
npm init @vitejs/app <app-name> --template <template-name>

# npm 7+
npm init @vitejs/app <app-name> -- --template <template-name>

# yarn
yarn create @vitejs/app <app-name> -- template <template-name>
 
  • PS 该方式需要Node版本 >= v12.0.0

另外,该脚手架所支持的模板并非只有Vue,直接执行yarn create @vuejs/app可以看到,有多种脚手架可供选择

image.png

  • 当选中脚手架之后,可以根据喜好选择使用js还是ts,这里建议使用ts

image.png

  • 然后,项目就创建完成了

image.png

  • 启动试一下

image.png

  • 这里我们可以看到,Vite创建的项目,默认的端口配置改成了3000,省出8080给服务端?“全栈”狂喜

image.png

  • 相较之前的HellowWorld组件,多了IDE和插件的安利,不知道有没有收广告费

原创文章,作者:我心飞翔,如若转载,请注明出处:https://www.pipipi.net/14635.html

发表评论

登录后才能评论