LEGALGEEK

法律科技工作者的记事本

0%

使用官方构建工具 Vite 初始化 Vue 3 项目

发表于 更新于

摘要：使用官方推荐的安装流程，初始化 Vue 3 项目，厘清项目文件各部分功能与关系。

安装前提

已经安装合适的 Nodejs 环境，测试方法：node -v

1
2
3
4
$ node -v

//系统返回：
v16.14.0

创建项目

（1）新建项目文件夹，并进入

1
2
3
4
5
6
$ mkdir vue-demo

$ cd vue-demo

$ pwd
/Users/zhangminglei/Documents/git/vue-test/vue-demo

（2）使用项目初始化指令：npm init vue@latest

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$ npm init vue@latest

//系统交互式反馈，输入名称，选择使用【Router】，其余默认
Vue.js - The Progressive JavaScript Framework

✔ Project name: … vue-demo
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit Testing? … No / Yes
✔ Add Cypress for both Unit and End-to-End testing? … No / Yes
✔ Add ESLint for code quality? … No / Yes

Scaffolding project in /Users/zhangminglei/Documents/git/vue-test/vue-demo/vue-demo...

Done. Now run:

  cd vue-demo
  npm install
  npm run dev

（3）根据最后提示，进入文件夹，并安装项目

1
2
3
4
5
6
7
8
9
10
$ cd vue-demo
$ npm install

//系统反馈：
added 35 packages, and audited 36 packages in 19s

5 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

（4）运行npm run dev命令，开启开发预览

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$ npm run dev

//系统反馈：
> vue-demo@0.0.0 dev
> vite

Pre-bundling dependencies:
  vue
  vue-router
(this will be run only when your dependencies or config have changed)

  vite v2.8.6 dev server running at:

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

  ready in 588ms.

（5）打开 http://localhost:3000/ 查看结果，正常将显示You did it!

项目结构

使用 tree 命令，查看当前文件一级目录结构，如下：

1
2
3
4
5
6
7
8
9
10
11
12
$ tree -L 1
.
├── README.md
├── index.html
├── node_modules
├── package-lock.json
├── package.json
├── public
├── src
└── vite.config.js

3 directories, 5 files
序号 路径 说明
1 README.md 项目说明文档
2 index.html 项目入口文件【重要】
3 node_modules nodejs 模块存储文件夹
4 package-lock.json nodejs 模块使用详情文件
5 package.json nodejs 配置文件 【重要】
6 public 公共资源文件夹 【重要】
7 src 项目资源文件夹【重要】
8 vite.config.js vite 配置文件 【重要】

核心文件：index.html

作用：作为整个项目的入口文件，整合和引入相关资源模块

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html> //声明文件类型
<html lang="en">
  <head>
    //声明头信息（编码方式、图标、标题等）
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
  <body>
    //声明主体内容
    <div id="app"></div>
    //创建一个ID为“app”的div元素
    <script type="module" src="/src/main.js"></script>
    //以模块方式，引入核心js文件
  </body>
</html>

核心文件：package.json

作用：记录项目配置信息（名称、运行脚本、依赖模块等）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
  "name": "vue-demo",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite", // 以开发模式运行预览，
    "build": "vite build", //打包构建当前项目，输出最终发布文件
    "preview": "vite preview --port 5050" //启动本地静态文件服务器，展示发布文件内容
  },
  "dependencies": {
    "vue": "^3.2.31",
    "vue-router": "^4.0.12"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^2.2.2",
    "vite": "^2.8.4"
  }
}

核心目录：public

作用：存放不会被源码引用的静态文件，该目录中的资源在开发时能直接通过 / 根路径访问到，并且打包时会被完整复制到目标目录的根目录下。

1
2
3
4
5
$ cd public
$ ls

//系统反馈：
favicon.ico

例如，在目录下的文件 favicon.ico，在项目当中完整路径为/public/favicon.ico，但是在index.html 文件当中使用的路径为：/favicon.ico

核心目录：src

作用：存放实际 Vue 项目全部资源文件，包含：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
$ cd src
$ tree -L 2

//系统反馈：
.
├── App.vue
├── assets
│   ├── base.css
│   └── logo.svg
├── components
│   ├── HelloWorld.vue
│   ├── TheWelcome.vue
│   ├── WelcomeItem.vue
│   └── icons
├── main.js
├── router
│   └── index.js
└── views
    ├── AboutView.vue
    └── HomeView.vue

5 directories, 10 files

其中：

  • 主入口 js 文件：main.js 引入 Vue、路由等模块，创建 Vue 实例
  • 主入口 Vue 文件：App.vue 引入和整合所需视图、组件等内容，定义主视图文件
  • Vue 组件文件夹：components 最小粒度的 Vue 组件集合
  • Vue 视图文件夹： views 定义由 Vue 组件等组成的视图
  • Vue 路由文件夹： router 存放路由文件
  • 静态资源文件夹：assets 存放需要在代码引用的静态资源，如样式表、logo 等

核心文件：vite.config.js

作用：实现 Vite 个性化设定

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import { fileURLToPath, URL } from "url";

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
});

打包构建

执行命令：npm run build

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$ npm run build

//系统反馈：
> vue-demo@0.0.0 build
> vite build

vite v2.8.6 building for production...
✓ 41 modules transformed.
dist/assets/logo.da9b9095.svg        0.30 KiB
dist/index.html                      0.48 KiB
dist/assets/AboutView.f79b56c4.js    0.25 KiB / gzip: 0.21 KiB
dist/assets/AboutView.ab071ea6.css   0.08 KiB / gzip: 0.10 KiB
dist/assets/index.2b32a27e.js        11.17 KiB / gzip: 4.37 KiB
dist/assets/index.038ca730.css       3.87 KiB / gzip: 1.26 KiB
dist/assets/vendor.13977def.js       69.73 KiB / gzip: 27.77 KiB

执行完毕后，会在根目录下新产生一个 dist 文件夹，包含项目最终用于发布的静态工程文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$ cd dist
$ tree -L 2

//系统反馈：
.
├── assets
│   ├── AboutView.ab071ea6.css
│   ├── AboutView.f79b56c4.js
│   ├── index.038ca730.css
│   ├── index.2b32a27e.js
│   ├── logo.da9b9095.svg
│   └── vendor.13977def.js
├── favicon.ico
└── index.html

1 directory, 8 files

本地预览

运行：npm run preview，将在本地dist 文件夹，启动一个网页服务器：

1
2
3
4
5
6
7
8
9
$ npm run preview

//系统反馈：
> vue-demo@0.0.0 preview
> vite preview --port 5050

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

打开：http://localhost:5050/ 可以查看最终网页效果。

参考官方文档：