Vite

一、搭建 Vue 项目

1、Vite 介绍

• Vite 是一种新型前端构建工具，能够显著提升前端开发体验。它主要由两部分组成
• 一个开发服务器，它基于 原生 ES 模块 提供了 丰富的内建功能，如速度快到惊人的 模块热更新（HMR）。
• 一套构建指令，它使用 Rollup 打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。
• 官网：https://cn.vitejs.dev/

2、Vite 安装

# 1、安装vite脚手架，全局安装
// yarn
yarn global add vite
// npm
npm install -g vite

# 安装完成后，需要配置环境变量，根据自己的nodejs目录进行配置路径
我的电脑-》右击-》属性-》高级系统设置-》环境变量-》系统变量-》Path-》编辑-》新建(赋值nodejs目录下的node_global路径)
D:\Program Files\nodejs\node_global\

3、Vite 升级

# yarn
yarn global upgrade --latest vite
# npm
npm update -g vite

4、Vite 卸载

# yarn
yarn global remove vite
# npm
npm uninstall vite -g

5、Vite 创建 Vue 项目

# 1、创建一个项目
npm init vue@latest

# 2、需要安装create-vue@3.3.4吗？
Need to install the following packages:
  create-vue@3.3.4
Ok to proceed? (y)

# 3、项目名称
Project name：

# 4、是否添加TypeScript
Add TypeScript?

# 5、是否添加JSC支持
# 5.1、JSX即JavaScript XML，是React发明的一种JavaScript的语法扩展，允许 HTML 与 JavaScript 的混写；JSX本身也是一个表达式，在编译后，JSX表达式会变成普通的JavaScript对象。
Add JSX Support?

# 6、是否为单页应用程序开发添加Vue Router路由管理组件
Add Vue Router for Single Page Application development?

# 7、是否添加Pinia组件来进行状态管理
Add Pinia for state management?

# 8、是否添加Vitest来进行单元测试
Add Vitest for Unit Testing?

# 9、是否添加Cypress来进行单元测试和端到端测试
Add Cypress for both Unit and End-to-End testing?

# 10、是否添加ESLint来进行代码质量检查
Add ESLint for code quality?

6、运行项目

# 1、进入目录
cd vite

# 2、安装模块
# 2.1、yarn
yarn install
# 2.2、npm
npm install

# 3、启动项目
# 3.1、yarn
yarn dev
# 3.2、npm
npm run dev

---

二、目录结构

目录名	作用
node_modules	npm 加载的项目依赖模块
public	公共资源目录
src	开发目录
src/main.js	主入口文件
src/App.vue	网站首页文件
src/assete	存放静态资源：css、js、字体、图片、资源
src/components	存放通用模块组件
src/router	存放路由设置文件
src/views
babel.config.js
package.json
package-lock.json
README.md
----------------------	----------------------------------
static	静态资源目录，如图片、字体等
dist	打包后会生成该的目录
build	项目构建(webpack)相关代码

1、Package.json 文件属性说明

参数	描述
name	包名
version	包的版本号
description	包的描述。
main	main 字段指定了程序的主入口文件，require('moduleName') 就会加载这个文件。这个字段的默认值是模块根目录下面的 index.js
keywords	关键字
author	包的作者姓名
scripts	定义的脚本，脚本可以用 vue-cli 脚手架、webpack-cli 脚手架、或者自己写命令
license	代码的许可证，[MIT](https://opensource.org/licenses/MIT) 麻省理工许可证、[ISC](https://opensource.org/licenses/ISC) 开放源代码许可证
homepage	包的官网 url
contributors	包的其他贡献者姓名
dependencies	依赖包列表。运行时的依赖，发布后，即生产环境下还需要用的模块。如果依赖包没有安装，npm 会自动将依赖包安装在 node_module 目录下。
devDependencies	开发时的依赖。里面的模块是开发时用的，发布时用不到它，比如项目中使用的 gulp ，压缩 css、js 的模块
repository	包代码存放的地方的类型，可以是 git 或 svn，git 可在 Github 上

// package.json文件中版本号的说明，安装的时候代表不同的含义：
"5.0.3"   表示安装指定的5.0.3版本
"~5.0.3"  表示安装5.0.X中最新的版本
"^5.0.3"  表示安装5.X.X中最新的版本
// 因为前端版本太随意了，所以要指定版本，可能1个小版本，就跟之前的不兼容了

{
    "name": "ouyangke",
    "version": "0.1.0",
    "private": true,
    "scripts": {
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build",
        "lint": "vue-cli-service lint"
    },
    "dependencies": {
        "core-js": "^3.6.5",
        "vue": "^3.0.0",
        "vue-router": "^4.0.0-0",
        "vuex": "^4.0.0-0"
    },
    "devDependencies": {
        "@vue/cli-plugin-babel": "~4.5.0",
        "@vue/cli-plugin-eslint": "~4.5.0",
        "@vue/cli-plugin-router": "~4.5.0",
        "@vue/cli-plugin-vuex": "~4.5.0",
        "@vue/cli-service": "~4.5.0",
        "@vue/compiler-sfc": "^3.0.0",
        "@vue/eslint-config-airbnb": "^5.0.2",
        "babel-eslint": "^10.1.0",
        "eslint": "^6.7.2",
        "eslint-plugin-import": "^2.20.2",
        "eslint-plugin-vue": "^7.0.0",
        "lint-staged": "^9.5.0",
        "sass": "^1.26.5",
        "sass-loader": "^8.0.2"
    },
    "gitHooks": {
        "pre-commit": "lint-staged"
    },
    "lint-staged": {
        "*.{js,jsx,vue}": [
            "vue-cli-service lint",
            "git add"
        ]
    }
}

2、main.js 入口文件

• 项目中所有的页面都会加载 main.js，有三个作用：
  • 1.实例化 Vue
  • 2.放置项目中经常会用到的插件和 CSS 样式。例如： 网络请求插件:axios 和 vue-resource、图片懒加载插件：vue-lazyload
  • 3.存储全局变量，例如（用于的基本信息）

# 1、引入 vue 模块
import { createApp } from 'vue'
# 2、引入 App.vue 文件
import App from './App.vue'
# 3、引入 路由 模块
import router from './router'

# 4、createApp创建应用
# 4.1、(App) 参数，就是App.vue文件中的export default(默认导出的)
# 4.2、use() 使用Vue.js插件
# 4.3、mount() 组件挂载在DOM的ID元素上
createApp(App).use(router).mount('#app')

# 还有一些其他的链式方法：component（组件）、config（配置）、directive（指令）、mixin（混入）、provide（搭配Inject）、unmount（卸载）

---

三、配置文件

• vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载
• 根目录 vue.config.js 文件，默认没有该文件，可自行添加
• 手册：https://cli.vuejs.org/zh/config/
• 可以使用 vue 配置、vuecli 配置、引入 webpack 配置

---

四、目录脑图