1. Vue

  2. Node.js

  3. 构建工具

  4. 路由

  5. 接口请求

  6. 状态管理

Vite 是 Vue 团队推出的构建工具。

$$tip

如果你是一个初级前端工程师,那么只需要了解如何创建一个 Vite 构建的项目,和了解一些简单的配置。

$$

上手 Vite

  1. 安装 Node.js。
  2. 使用命令 npm create vite@latest 根据提示创建我们的 Vue 项目。
  3. 进入项目, cd 项目目录
  4. 安装所需第三方库, npm install
  5. 运行项目, npm run dev

项目结构

使用 Vite 模板构建的项目结构如下。

image

  • dist:运行 npm run build 后构建的文件,部署到服务器上时网站根目录需指向 dist 文件夹。
  • node_modules:第三方库的文件夹。
  • public:存放静态资源的文件夹,比如图片之类。
  • src:项目代码文件夹。
  • .gitignore:git 忽略的文件。
  • index.html:入口页面。
  • package-lock.json:记录所有第三方库(包括第三方库的第三方库)的版本号、来源、hash 值等相关信息,只要这个文件一致那么可以保证每次 install 之后的第三方库代码文件都会一致。
  • package.json:记录当前项目相关的信息,比如项目所引用的第三方库名称和版本号,项目名、版本号、快捷命令等。
  • README.md:markdown 格式的项目介绍文件。
  • vite.config.js:vite 的配置文件。