开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第2天，点击查看活动详情

使用 vite 脚手架快速创建项目

需要先安装 Node.js ，以及 yarn、pnpm 等包管理器；Node.js官网下载安装即可，包管理器这里使用 pnpm

npm install pnpm -g

第一步: 在需要创建项目文件目录下打开 cmd 运行以下命令

# npm 6.x
npm init vite@latest my-vue-app --template vue

# npm 7+, 需要额外的双横线：
npm init vite@latest my-vue-app -- --template vue

# yarn
yarn create vite my-vue-app --template vue

# pnpm
pnpm create vite my-vue-app -- --template vue

这一指令将会安装并执行 create-vite，它是一个基本模板快速启动项目工具。

我们采用 pnpm 来安装

pnpm create vite vite-vue-template -- --template vue-ts

第二步: cd 到项目文件夹, 安装依赖, 启动项目

# 进入项目文件夹
cd vite-vue-template
# 安装依赖
pnpm install
# 启动
pnpm run dev

目录规划

├── build/ 
  ├── plugins/                   // vite 插件配置
└── src/
  ├── api/                       // 接口请求目录
  ├── assets/                    // 静态资源目录
  ├── components/                // 公共组件目录
  ├── config/                    // 系统配置目录
  ├── router/                    // 路由配置目录
  ├── store/                     // 状态管理目录
  ├── styles/                    // 通用样式目录
  ├── utils/                     // 工具函数目录
  ├── views/                     // 页面组件目录
  ├── App.vue
  ├── main.js
├── tests/                       // 单元测试目录
├── index.html
├── tsconfig.json                // TypeScript 配置文件
├── vite.config.js               // Vite 配置文件
└── package.json

package.json 的脚本命令

基本命令

初始化项目后的脚本命令

"scripts": {
  "dev": "vite", 
  "build": "vue-tsc && vite build",
  "preview": "vite preview"
},

完整命令

以下为项目搭建完成后的全部脚本命令，此处仅列举解释一下用途，部分命令需要的依赖会在后续的搭建过程中逐步安装以及详细介绍用途。

"scripts": {
  "cz": "czg",
  "bootstrap": "yarn install",
  "serve": "npm run dev",
  "dev": "vite",
  "build": "vue-tsc --noEmit && vite build",
  "preview": "vite preview",
  "lint:eslint": "eslint src --fix --ext .ts,.tsx,.vue,.js,.jsx",
  "lint:prettier": "prettier --write .",
  "lint:stylelint": "stylelint --fix  **/*.{css,less,vue}",
  "prepare": "husky install",
  "lint-staged": "lint-staged",
  "report": "cross-env REPORT=true npm run build",
  "clean:cache": "rimraf node_modules/.cache/ && rimraf node_modules/.vite",
  "clean:lib": "rimraf node_modules",
  "reinstall": "rimraf yarn.lock && rimraf package.lock.json && rimraf node_modules && npm run bootstrap"
},

cz 交互选项式 git 提交

"cz": "czg",

通过交互选择来规范 git 提交，直接手动输入 commit 信息很容易不小心输错，导致提交不规范

bootstrap 安装依赖

"bootstrap": "pnpm install",

dev 运行项目

"dev": "vite",

serve 作为 dev 别名

"serve": "npm run dev",

目的：如果在以前的项目中习惯了使用 serve 命令运行项目，可以添加 serve 代替默认的 dev。

build 构建打包

"build": "vue-tsc && vite build",

目的：打包生成 dist 目录

preview 预览打包后的 dist 目录

"preview": "vite preview",

目的：直接预览打包后的本地 dist 文件目录。

项目编译之后的静态文件是不能直接本地访问的。因为本地访问使用的是file:///协议。而file:///不支持跨域和一些其他特性。比如JavaScript模块、PWA等等。

那么此时就需要换一种访问本地文件的方式了，就是让本地成为一个服务器。然后通过http来访问。之前的 vue-cli 项目就使用全局安装 serve 作为静态资源服务器的方式查看dist目录。这里 vite preview 也是用作预览本地构建，不需要额外的第三方静态资源服务器来进行查看了。

vue-cli 的文档说明：

常用的本地静态服务：

此处为语雀内容卡片，点击链接查看：www.yuque.com/southerly/y…

lint:eslint

代码：

"lint:eslint": "eslint "{src,mock}/**/*.{vue,ts,tsx}" --fix",

目的：执行 eslint 校验，该命令会对项目的src、mock目录下的vue、ts、tsx文件进行 eslint 校验，并修复部分问题。

参考链接：eslint 命令行说明

lint:prettier

代码：

"lint:prettier": "prettier --write --loglevel warn "src/**/*.{js,json,tsx,css,less,scss,vue,html,md}"",

目的：执行 prettier 格式化代码。该命令会对项目所有代码进行 prettier 格式化。谨慎执行。

如果你的vsCode安装了prettier插件。那么prettier插件就会读取根目录下的prettier.config.js文件。当你保存的时候就会进行格式化文件。但是过是别人提交上来的文件，你还去点开它的文件一个一个保存么？所以执行这个命令，可以将src目录下，所有的文件格式化。

参考链接：prettier 命令行说明

lint:stylelint

代码：

"lint:stylelint": "stylelint --fix "**/*.{vue,less,postcss,css,scss}" --cache --cache-location node_modules/.cache/stylelint/",

目的：校验所有文件的样式格式，并尝试修复。

lint:lint-staged

针对暂存的 git 文件运行lint操作的。

reinstall

pnpm

"reinstall": "rimraf pnpm-lock.yaml && rimraf package.lock.json && rimraf node_modules && npm run bootstrap"

yarn

"reinstall": "rimraf yarn.lock && rimraf package.lock.json && rimraf node_modules && npm run bootstrap"

重新安装依赖，该命令会先删除 node_modules、yarn.lock、package.lock.json 后在进行依赖重新安装，速度会明显变慢。

其他字段可查看 npm 命令生成 package.json 详细