Vite-Vue3构建工具

Vite-Vue3构建工具

Vite是Vue3.0新增的构建工具，目前仅支持Vue3.0。

1.创建项目

npm init vite-app myvitedemo
cd myvitedemo
npm install
npm run dev

执行过程如下：

D:\>npm init vite-app myvitedemo
Need to install the following packages:
  create-vite-app
Ok to proceed? (y)
npm WARN deprecated create-vite-app@1.21.0: create-vite-app has been deprecated. run `npm init @vitejs/app` or `yarn create @vitejs/app` instead.
Scaffolding project in E:\workspace_of_ws\demo\myvitedemo...
​
Done. Now run:
​
  cd myvitedemo
  npm install (or `yarn`)
  npm run dev (or `yarn dev`)
​
​
D:\>cd myvitedemo
​
D:\>npm install
​
added 285 packages, and audited 286 packages in 31s
​
33 packages are looking for funding
  run `npm fund` for details
​
3 moderate severity vulnerabilities
​
To address all issues (including breaking changes), run:
  npm audit fix --force
​
Run `npm audit` for details.
​
D:\>npm run dev
​
> myvitedemo@0.0.0 dev
> vite
​
[vite] Optimizable dependencies detected:
vue
​
  Dev server running at:
  > Network:  http://192.168.56.1:3000/
  > Network:  http://192.168.31.112:3000/
  > Local:    http://localhost:3000/

项目启动后，在浏览器中访问，如下图：

 

2.项目结构

生成的项目结构如下图：

 

项目中文件及文件夹的用途

文件或文件夹	用途
node_modules	项目依赖包目录
public	项目公有文件
--favicon.ico	网站地址栏前面的小图标
src	源代码文件目录
--assets	静态文件目录，图片图标等
--components	Vue3的自定义组件目录
--App.vue	项目的根组件
--index.css	项目的通用css样式
--main.js	项目入口文件
.gitgnore	git的管理配置文件，设置哪些目录和文件不在管理范围内
index.html	项目的默认首页
package.json	项目配置文件，包管理、项目名称、版本和命令
package-lock.json	项目包的锁定文件，用于防止包版本不一致导致的错误

3.项目构建

npm run build