理想科技前端培训配套文档

Appearance

脚手架 ​

脚手架是指在软件开发中用于快速搭建项目基础结构和提供一些默认配置的工具或框架。它可以帮助开发者快速启动项目，提供了一系列预定义的目录结构、文件模板、配置文件和常用功能的初始代码。

什么是包管理器 ​

因为我们需要使用包管理器去创建基于create-vue脚手架的vue项目，所以在使用脚手架之前，需要先了解一下包管理器

包管理器是用来管理依赖包的工具，比如：发布、安装、更新、卸载等等。

Node 默认提供了一个包管理器 npm ，在安装 Node.js 的时候，默认会一起安装 npm 包管理器，可以通过以下命令查看它是否正常。

powershell
npm -v

如果正常，将会输出相应的版本号。

常见的包管理器 ​

  • npm
  • cnpm：不建议使用，可以使用--registry临时指定源地址，具体可参考下面文档说明
  • pnpm
  • yarn

注意

如果我们想在一个已有的项目上继续进行二次开发，却又不知道使用哪个包管理器去安装依赖包，我们可以在项目的根目录找以下文件，根据其对应关系去判断使用什么包管理器来降低运行项目出现问题的可能。

  • package-lock.json:对应npm包管理器
  • pnpm-lock.yaml:对应pnpm包管理器
  • yarn.lock：对应yarn包管理器

我们本次课程会以 npm 作为默认的包管理器，来了解如何在项目里管理依赖包。

项目创建 ​

我们使用 create-vue来创建vue工程化项目，它是 Vue 官方的项目脚手架工具。

powershell
npm create vue@latest

@latest意思是使用最新版本，也可以指定版本，例如@3.4.0

执行以上命令，将会看到一些可选功能提示：

powershell
√ 请输入项目名称： ... ideal-vue-study
√ 是否使用 TypeScript 语法？
√ 是否启用 JSX 支持？
√ 是否引入 Vue Router 进行单页面应用开发？
√ 是否引入 Pinia 用于状态管理？
√ 是否引入 Vitest 用于单元测试？ 
√ 是否要引入一款端到端（End to End）测试工具？
√ 是否引入 ESLint 用于代码质量检测？
√ 是否引入 Prettier 用于代码格式化？
√ 是否引入 Vue DevTools 7 扩展用于调试? (试验阶段)

这些可选功能大家可以根据自己的需求进行选择，我们本次课程的选择为

powershell
√ 请输入项目名称： ... ideal-vue-study
√ 是否使用 TypeScript 语法？ ... 是
√ 是否启用 JSX 支持？ ... 否
√ 是否引入 Vue Router 进行单页面应用开发？ ... 是
√ 是否引入 Pinia 用于状态管理？ ... 是
√ 是否引入 Vitest 用于单元测试？ ... 否
√ 是否要引入一款端到端（End to End）测试工具？ » 不需要
√ 是否引入 ESLint 用于代码质量检测？ ... 是
√ 是否引入 Prettier 用于代码格式化？ ... 是
√ 是否引入 Vue DevTools 7 扩展用于调试? (试验阶段) ... 否

项目目录说明 ​

使用vscode打开项目文件夹,此时项目的结构如下：

bash
ideal-vue-study
├─public # 不参与编译的静态资源
├─src
│ └─assets # 会参与编译的静态资源
│ └─components # 公共组件
│ └─router # 路由相关
│ └─stores # 状态管理相关
│ └─views # 页面相关
└─package.json

通过项目目录我们也可见工程化的另一个好处：统一了我们的开发规范，看到这些文件夹就知道文件夹里面代码是干什么的。

安装依赖 ​

只有安装好项目所需要的依赖包之后，才可以运行项目。

我们使用以下命令进行项目的依赖安装

powershell
npm i

因为依赖包默认存放在国外服务器上，有时候下载的比较慢，我们也可以使用淘宝源进行依赖的安装

powershell
npm i --registry https://registry.npmmirror.com

注意

网上有一些教程叫我们使用npm config set registry https://registry.npmmirror.com去设置包管理器的源，我建议大家不要这么做，这条命令会把npm的默认源换成淘宝源，而安装依赖的时候使用--registry https://registry.npmmirror.com只是这一次临时将目标源换成了淘宝源。在前些年使用淘宝源总会出现一些莫名其妙的bug，影响开发效率。虽然现在已经很稳定了，不过官方源永远是最稳定的，我们只有在网络不好的情况下才建议使用淘宝源，避免一些意料之外的情况发生

node_modules ​

在项目根目录执行完安装依赖的命令之后，会生成一个叫做node_modules的文件夹，这个文件夹就是用来存放我们当前项目所需要的依赖包的，但是这个文件夹不需要提交到git上，因为它占用的资源很大，所以我们从git上克隆完项目之后，首次运行项目都需要安装一下依赖，项目才可以运行。依赖包的版本信息来自于package.json这个文件。

package.json ​

这是 Node项目的清单，里面记录了这个项目的基础信息、依赖信息、开发过程的脚本行为、发布相关的信息等等，未来我们将在很多项目里看到它的身影。

以下是我们项目的package.json的文件内容

json
{
  "name": "ideal-vue-study",
  "version": "0.0.0",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "run-p type-check \"build-only {@}\" --",
    "preview": "vite preview",
    "build-only": "vite build",
    "type-check": "vue-tsc --build --force",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
    "format": "prettier --write src/"
  },
  "dependencies": {
    "pinia": "^2.1.7",
    "vue": "^3.4.21",
    "vue-router": "^4.3.0"
  },
  "devDependencies": {
    "@rushstack/eslint-patch": "^1.8.0",
    "@tsconfig/node20": "^20.1.4",
    "@types/node": "^20.12.5",
    "@vitejs/plugin-vue": "^5.0.4",
    "@vue/eslint-config-prettier": "^9.0.0",
    "@vue/eslint-config-typescript": "^13.0.0",
    "@vue/tsconfig": "^0.5.1",
    "eslint": "^8.57.0",
    "eslint-plugin-vue": "^9.23.0",
    "npm-run-all2": "^6.1.2",
    "prettier": "^3.2.5",
    "typescript": "~5.4.0",
    "vite": "^5.2.8",
    "vue-tsc": "^2.0.11"
  }
}

我们目前只需要掌握这三种就可以了

字段名含义
scripts指定运行脚本的命令缩写，比如说运行项目npm run dev，构建项目npm run build
dependencies记录当前项目的生产依赖，安装 npm 包时会自动生成，也可以使用-S指定安装在生成环境，例如npm i -S axios
devDependencies记录当前项目的开发依赖，安装 npm 包时会自动生成，也可以使用-D指定安装在生成环境，例如npm i -D vite

Copyright © 2024-present 理想科技