正心全栈编程-文档站

Appearance

vite 脚手架 ​

vite 官网：https://cn.vitejs.dev/guide/

vite 是 Vue 官方提供的一个全局模块包 (得到 vue 命令)，此包用于创建脚手架项目。在现实生活中脚手架是为了保证各施工过程顺利进行而搭设的工作平台，在编程中，它可以帮助我们快速搭建项目。

vite 的优点：

  • 开箱即用，对新手友好
  • 速度快，支持热更新
  • 多框架支持

vite 创建项目 ​

提示

注意：项目名不能带大写字母，中文和特殊符号。

1、创建项目

shell
npm init vue@latest

2、输入项目名称

bash
√ Project name: ... vite_parctice

3、选择语言，默认不选择 TS

bash
√ Add TypeScript? ... No / Yes

4、是否添加 JSX 支持，选择 No

bash
√ Add JSX Support? ... No / Yes

5、是否需要添加 Vue Router 的支持，选择 No

bash
√ Add Vue Router for Single Page Application development? ... No / Yes

6、是否添加 Pinia 状态管理，选择 No，等到后面做项目时再添加

bash
√ Add Pinia for state management? ... No / Yes

7、是否添加 Vitest 测试工具，选择 No

bash
√ Add Vitest for Unit Testing? ... No / Yes

8、是否添加端到端测试，选择 No

bash
√ Add ESLint for code quality? ... No / Yes

9、是否添加 ESLint 代码质量检测工具，选择 No，做项目时可以选择添加

bash
√ Add ESLint for code quality? ... No / Yes

如果选择弄错了 ctrl+c 重来。回车等待生成项目文件夹 + 文件 + 下载必须的第三方包们

弄完之后全部的指令如下

bash
$ npm init vue@latest

Vue.js - The Progressive JavaScript Framework

√ Project name: ... vue-demo-01
√ 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 an End-to-End Testing Solution? » No
√ Add ESLint for code quality? ... No / Yes

Scaffolding project in D:\vue_code\vue-demo-01...

Done. Now run:

  cd vue-demo-01
  npm install
  npm run dev

10、进入脚手架项目下，启动内置的热更新本地服务器

shell
cd vite_parctice
npm install
npm run dev

只要看到一下信息，就表示安装成功了 (底层 node+vite 热更新服务)

shell
$ cd vite_parctice

$ npm install

added 32 packages, and audited 33 packages in 22s

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

found 0 vulnerabilities

然后运行指令启动项目

shell
$ npm run dev

> vue-demo-01@0.0.0 dev
> vite

Port 5173 is in use, trying another one...

  VITE v4.3.8  ready in 496 ms

  ➜  Local:   http://127.0.0.1:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help

打开浏览器输入上述地址

image-20230519163812544

提示

总结：vite 命令创建工程目录，项目内置本地热更新服务器，帮我们打包项目预览项目

目录和代码分析 ​

目标：讲解重点文件夹，文件的作用，以及文件里代码的意思

bash
└─vite_parctice				# 项目目录
	├── node_modules		# 项目依赖的第三方包
    ├── index.html			# 单页面的html文件(网页浏览的是它)
    ├── package.json		# 依赖包列表
    ├── package-lock.json	# 项目包版本锁定和缓存地址
    ├── public				# 静态文件目录
    │   └── favicon.ico		# 浏览器小图标
    ├── README.md
    ├── src					# 业务文件夹
    │   ├── App.vue			# 整个应用的根组件
    │   ├── assets			# 静态资源
	│   │   └── base.css	# css 样式文件
    │   │   └── logo.svg
    │   │   └── main.css	# css 样式文件
    │   ├── components		# 组件目录
    │   │   └── HelloWorld.vue	# 欢迎页面vue代码文件
    │   ├── main.js			# 入口 js 文件
    └── vite.config.mjs		# vite 项目配置文件

主要文件及含义

shell
node_modules	- 下都是下载的第三方包
index.html 		– 浏览器运行的网页
src/main.js 	– vite 打包的入口文件
src/App.vue 	– vue 项目入口页面
package.json 	– 依赖包列表文件

vite 项目架构了解 ​

目标：知道项目入口，以及代码执行顺序和引入关系

image-20220801165358268