Vite-Vue3构建工具
Vite是Vue3.0新增的构建工具，目前仅支持Vue3.0。
1.创建项目
npm init vite-app myvitedemocd myvitedemonpm installnpm run dev执行过程如下：
D:\>npm init vite-app myvitedemoNeed to install the following packages: create-vite-appOk 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 myvitedemoD:\>npm installadded 285 packages, and audited 286 packages in 31s33 packages are looking for funding run `npm fund` for details3 moderate severity vulnerabilitiesTo address all issues (including breaking changes), run: npm audit fix --forceRun `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版权声明：内容来源于互联网和用户投稿 如有侵权请联系删除