使用vite搭建vue3项目(一) 创建一个工程

vite目的是以后替代webpack，原理是利用浏览器现在已经支持es6的import了，遇到import会发送一个http请求去加载文件，vite拦截这些请求，做一些预编译，省去了webpack冗长打包的时间，提升开发体验。

 

1.  使用npm创建工程，node版本必须在12以上

npm init @vitejs/app

 输入工程名，选择vue框架，选择vue-ts即使用typescript版本开发vue

PS D:\workspace\test> npm init @vitejs/app

@vitejs/create-app is deprecated, use npm init vite instead

√ Project name: ... element-plus-ts
√ Select a framework: » vue
√ Select a variant: » vue-ts

Scaffolding project in D:\workspace\test\element-plus-ts...

Done. Now run:

  cd element-plus-ts
  npm install
  npm run dev

进入工厂目录，安装，运行

PS D:\workspace\test\element-plus-ts> npm run dev

> element-plus-ts@0.0.0 dev
> vite


  vite v2.6.14 dev server running at:

  > Local: http://localhost:3000/
  > Network: use `--host` to expose

  ready in 294ms.