vite 安装及创建项目

vite简介

与 Vue CLI 类似，Vite 也是一个提供基本项目脚手架和开发服务器的构建工具。 然而，Vite 并不是基于 Webpack 的，它有自己的开发服务器，利用浏览器中的原生 ES 模块。这种架构使得 Vite 比 Webpack 的开发服务器快了好几个数量级。Vite 采用 Rollup 进行构建，速度也更快。 Vite 先启动服务，按需加载 Webpack 则是先全部打包 再启动服务

安装vite

npm init vite@latest   npm构建vite项目
yarn create vite   yarn构建vite项目

搭建 Vite 项目

# npm 6.x
npm init @vitejs/app my-vue-app --template vue

# npm 7+, 需要额外的双横线：
npm init @vitejs/app my-vue-app -- --template vue

# yarn
yarn create @vitejs/app my-vue-app --template vue

支持的模板预设包括：

• vanilla
• vue
• vue-ts
• react
• react-ts
• preact
• preact-ts
• lit-element
• lit-element-ts
  查看 @vitejs/create-app 获取每个模板的更多细节。

运行项目

cd my-vue-app
yarn
yarn dev

or

cd my-vue-app
npm install
npm run dev

启动成功

vite v2.3.7 dev server running at:

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