创建Vue项目的不同方式及项目规范化配置
1 项目的创建与运行
1.1 基于webpack构建工具——vue-cli脚手架
安装脚手架 ：npm i -g @vue/cli
切换到项目所在目录 ：cd 项目所在目录
创建项目 ：vue create 项目名
选择vue版本
进入项目 ：cd 项目名
运行项目 ：npm run serve
创建步骤如下所示————
【1】选择自定义创建
【2】选择项目所需功能
【3】选择Vue版本以及对应的路由模式
【4】选择css预处理方式
【5】选择eslint校验方式（通常采用无分号模式）
【6】选择校验时机
【7】选择配置文件的生成方式
【8】是否保存预设，下次直接使用？ => 不保存，输入 N
1.2 基于Vite构建工具——Vite
npm init vite-app 项目名
选择开发框架：
输入 Vue 并按回车，选择 Vue 作为开发框架。
选择版本：
默认为 Vue 3，直接按回车确认即可。
选择是否需要 TypeScript：
根据需求选择 Yes 或 No。如果不需要 TypeScript，选择 No
启动项目：
cd 项目名
npm run dev
1.3 基于Vite构建工具——create-vue脚手架 【推荐】
切换到项目所在目录 ：cd 项目所在目录
安装脚手架 ：npm init vue@latest ## npm create vue@latest 是其别名，与之作用相同
运行完该命令，会提醒配置项目名以及其他相关配置
进入项目 ：cd 项目名
初始化 ：npm i
运行项目 ：npm run dev
创建步骤如下所示————
【1】设置项目名
【2】设置package name
何为package name
作用作为项目的唯一标识，当你将项目发布到 npm 仓库时，其他开发者可通过此名称安装你的包（例如 npm install your-package-name）。在代码中导入模块时，若项目被用作库（Library），package.name 会影响模块的导入路径（例如 import { xxx } from 'your-package-name'）。与 Project Name 的区别Project Name：是你创建的项目文件夹名称（例如 my-vue-app），对应项目根目录的文件夹名。Package Name：是 package.json 中的 name 属性，可独立于项目文件夹名设置（但通常建议保持一致，避免混淆）。命名规则不能包含大写字母；不能以点（.）、下划线（_）或数字开头；不能包含空格或特殊字符（如 @, :, / 等）；建议使用短横线（-）分隔单词（例如 vue3-big-event-admin）
【3】勾选项目所需配置
【4】 进入项目目录并进行初始化安装
2 通过其他包管理工具命令的使用方式
2.1 安装依赖
操作场景 npm yarn pnpm
安装项目依赖 npm install yarn pnpm install
添加新依赖 npm install <package> yarn add <package> pnpm add <package>
全局安装 npm install -g <package> yarn global add <package> pnpm add -g <package>
卸载依赖 npm uninstall <package> yarn remove <package> pnpm remove <package>
2.2 创建Vue项目
2.2.1 使用vue-cli脚手架
工具 命令
npm 安装：npm i -g @vue/cli + 创建：vue create 项目名
yarn 安装：yarn global add @vue/cli + 创建：vue create 项目名
pnpm 安装：pnpm add -g @vue/cli + 创建：vue create 项目名
2.2.2 使用create-vue脚手架
工具 命令
npm npm create vue@latest 或 npm init vue@latest
yarn yarn create vue
pnpm pnpm create vue
2.3 运行项目及其他相关命令
2.3.1 使用vue-cli脚手架
操作 npm yarn pnpm
运行开发服务器 npm run serve yarn serve pnpm serve
构建生产版本 npm run build yarn build pnpm build
运行代码检查 npm run lint yarn lint pnpm lint
2.3.2 使用create-vue脚手架
操作 npm yarn pnpm
运行开发服务器 npm run dev yarn dev pnpm dev
构建生产版本 npm run build yarn build pnpm build
运行代码检查 npm run lint yarn lint pnpm lint
3 项目规范化配置
3.1 项目的初始架构【以create-vue创建的Vue3项目为例】
3.2 ESLint & prettier 配置代码风格
规范如下————
1. prettier 风格配置 详见： [https://prettier.io](https://prettier.io/docs/en/options.html )[1]. 字符串统一采用单引号[2]. JS语句不使用分号结尾[3]. 每行宽度至多80字符[4]. <对象 | 数组>类型的数据，最后一个 <键值对 | 元素> 后不加逗号[5]. 不限制换行符号（因为win mac 不一致）2. vue组件名称统一多单词组成，但设置忽略index.vue的限制3. 支持props解构
① 根据上述规范，在 配置文件 .eslintrc.cjs 中添加如下配置————
rules: {'prettier/prettier': ['warn',{singleQuote: true, // 单引号semi: false, // 无分号printWidth: 80, // 每行宽度至多80字符trailingComma: 'none', // 不加对象|数组最后逗号endOfLine: 'auto' // 换行符号不限制（win mac 不一致）}],'vue/multi-word-component-names': ['warn',{ignores: ['index'] // vue组件名称多单词组成（忽略index.vue）}],'vue/no-setup-props-destructure': ['off'], // 关闭 props 解构的校验// 💡 添加未定义变量错误提示'no-undef': 'error'}
注意：这里的prettier并不是指vscode中安装的插件，如果已安装，需要禁用它
② 安装 <Eslint> VScode插件，并配置保存时自动修复并且关闭format on save
如此一来，当我们代码不规范时，eslint就会进行波浪线提示，但是ctrl+s保存后prettier又会自动为我们纠正规范
3.3 基于 husky 的代码检查工作流
该工具会在代码提交（git commit）前先进行检查，防止代码不规范或有错误却被提交
3.3.1 初始化仓库
git init
3.3.2 初始化 husky 工具配置 https://typicode.github.io/husky/
pnpm dlx husky-init && pnpm install
3.3.3 修改 .husky/pre-commit 文件
3.3.4 lint-staged 配置
由于以上默认进行的是全量检查，会有所耗时，因此，我们需要配置暂存区检查
步骤如下————
【1】安装
pnpm i lint-staged -D
【2】配置 package.json
{// ... 省略 ..."lint-staged": {"*.{js,ts,vue}": ["eslint --fix"]}
}{"scripts": {// ... 省略 ..."lint-staged": "lint-staged"}
}
【3】修改 .husky/pre-commit 文件
将原先的 pmpm lint 改为 pnpm lint-staged
3.3.5 调整目录结构
删除一些不必要的文件，在src文件夹中新增两个文件夹 <api>和 <utils>
api文件夹用于封装axios接口请求
utils用于存放工具函数
在assets文件夹中，可存放全局图片和全局样式，样式在main.js文件中导入即可
如果要采用scss进行样式的书写，要安装预处理器sass：pnpm add sass
3.3.6 引入 element-ui 组件库
【1】安装
pnpm add element-plus
【2】配置自动按需导入
【2.1】安装插件
pnpm add -D unplugin-vue-components unplugin-auto-import
【2.2】把以下代码加入vite.config.js配置文件
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'// https://vitejs.dev/config/
export default defineConfig({plugins: [...AutoImport({resolvers: [ElementPlusResolver()]}),Components({resolvers: [ElementPlusResolver()]})]
})
配置好后，后续直接使用组件即可
注意：配置后，在src/components中的组件，如需使用，可不用导入和注册即可直接使用
注意：如果只使用了setup语法糖，只是能够免去component注册这个步骤，import导入是必需的
如果使用了setup语法糖且进行了以上配置，那么，使用到的组件可无需注册，但需导入，而component文件夹下的组件可无需注册和导入
3.3.7 使用Pinia
示例
【1】配置数据持久化
【1.1】安装插件 pinia-plugin-persistedstate
pnpm add pinia-plugin-persistedstate -D
【1.2】在main.js中导入注册
import persist from 'pinia-plugin-persistedstate'
...
app.use(createPinia().use(persist))
【1.3】在对应store文件中配置
【1.4】配置仓库统一管理
在src/stores文件夹中，创建module文件夹以及index.js文件modules文件夹用于存放不同作用的storeindex.js文件中初始化pinia，并将其他模块下的store统一在这个文件中导出，当我们需要导入不同模块的store时，
统一直接 import { xxx } from '@/stores' 即可，无需指定哪个模块的store的具体路径
如此一来，在main.js文件中，直接导入index.js文件即可，将初始化pinia交由index.js; 将不同模块的导出统一交由index.js，导入直接统一 import { xxx } from '@/stores' 即可
3.3.8 封装axios接口请求
【1】安装axios
pnpm add axios
【2】在 utils/request.js 中配置请求拦截器/响应拦截器
【2.1】基本架子
import axios from 'axios'const baseURL = 'http://big-event-vue-api-t.itheima.net'const instance = axios.create({// TODO 1. 基础地址，超时时间
})instance.interceptors.request.use((config) => {// TODO 2. 携带tokenreturn config},(err) => Promise.reject(err)
)instance.interceptors.response.use((res) => {// TODO 3. 处理业务失败// TODO 4. 摘取核心响应数据return res},(err) => {// TODO 5. 处理401错误return Promise.reject(err)}
)export default instance
【2.2】示例
import { useUserStore } from '@/stores/user'
import axios from 'axios'
import router from '@/router'
import { ElMessage } from 'element-plus'const baseURL = 'http://big-event-vue-api-t.itheima.net'const instance = axios.create({baseURL,timeout: 100000
})
// 请求拦截器
instance.interceptors.request.use((config) => {const userStore = useUserStore()if (userStore.token) {config.headers.Authorization = userStore.token}return config},(err) => Promise.reject(err)
)
// 响应拦截器
instance.interceptors.response.use((res) => {if (res.data.code === 0) {return res}ElMessage({ message: res.data.message || '服务异常', type: 'error' })return Promise.reject(res.data)},(err) => {ElMessage({ message: err.response.data.message || '服务异常', type: 'error' })console.log(err)if (err.response?.status === 401) {router.push('/login')}return Promise.reject(err)}
)export default instance
export { baseURL }
3.3.9 路由懒加载
3.3.10 element-plus中的表单校验
【1】结构示例
<template><el-row class="login-page"><el-col :span="12" class="bg"></el-col><el-col :span="6" :offset="3" class="form"><el-form ref="form" size="large" autocomplete="off" v-if="isRegister"><el-form-item><h1>注册</h1></el-form-item><el-form-item><el-input :prefix-icon="User" placeholder="请输入用户名"></el-input></el-form-item><el-form-item><el-input:prefix-icon="Lock"type="password"placeholder="请输入密码"></el-input></el-form-item><el-form-item><el-input:prefix-icon="Lock"type="password"placeholder="请输入再次密码"></el-input></el-form-item><el-form-item><el-button class="button" type="primary" auto-insert-space>注册</el-button></el-form-item><el-form-item class="flex"><el-link type="info" :underline="false" @click="isRegister = false">← 返回</el-link></el-form-item></el-form><el-form ref="form" size="large" autocomplete="off" v-else><el-form-item><h1>登录</h1></el-form-item><el-form-item><el-input :prefix-icon="User" placeholder="请输入用户名"></el-input></el-form-item><el-form-item><el-inputname="password":prefix-icon="Lock"type="password"placeholder="请输入密码"></el-input></el-form-item><el-form-item class="flex"><div class="flex"><el-checkbox>记住我</el-checkbox><el-link type="primary" :underline="false">忘记密码？</el-link></div></el-form-item><el-form-item><el-button class="button" type="primary" auto-insert-space>登录</el-button></el-form-item><el-form-item class="flex"><el-link type="info" :underline="false" @click="isRegister = true">注册 →</el-link></el-form-item></el-form></el-col></el-row>
</template>
元素说明
el-form 整个表单组件
el-form-item 表单的一行 (一个表单域)
el-input 表单元素(输入框)
【1.2】需求假设
1. 用户名非空，长度校验5-10位
2. 密码非空，长度校验6-15位
3. 再次输入密码，非空，长度校验6-15位
【1.3】实现步骤
【1.3.1】el-form 中要绑定的数据
:model="ruleForm" # 绑定的整个form的数据对象
:rules="rules" # 绑定的整个form的规则对象示例：# 数据对象
const formModel = ref({username: '',password: '',repassword: ''
})# 规则对象
const rules = {username: [{ required: true, message: '请输入用户名', trigger: 'blur' },{ min: 5, max: 10, message: '用户名必须是5-10位的字符', trigger: 'blur' }],password: [{ required: true, message: '请输入密码', trigger: 'blur' },{pattern: /^\S{6,15}$/,message: '密码必须是6-15位的非空字符',trigger: 'blur'}],repassword: [{ required: true, message: '请再次输入密码', trigger: 'blur' },{pattern: /^\S{6,15}$/,message: '密码必须是6-15的非空字符',trigger: 'blur'},{validator: (rule, value, callback) => {if (value !== formModel.value.password) {callback(new Error('两次输入密码不一致!'))} else {callback()}},trigger: 'blur'}]
}# 进行绑定
<el-form :model="formModel" :rules="rules">
【1.3.2】el-form-item 中要绑定的数据
props 配置生效的是ruls中的哪个校验规则示例：<el-form-item prop="username"><el-inputv-model="formModel.username":prefix-icon="User"placeholder="请输入用户名"></el-input>
</el-form-item>
...
(其他两个也要绑定prop)
【1.3.3】表单元素 中要绑定的数据
v-model="form的数据对象.xxx" 给表单元素绑定form数据对象的子属性示例：<el-inputv-model="formModel.username":prefix-icon="User"placeholder="请输入用户名"
></el-input>
...
(其他两个也要绑定)
【1.3.4】对整个表单进行预校验
使用到el-form组件对外暴露的方法：validate
步骤如下
① 通过ref属性获取el-form组件对象
② 绑定事件以触发全表单预校验
【1.4】校验规则中的字段说明
非空校验required:true 不允许为空message 消息提示trigger 触发校验的时机 值为 blur（失焦时触发）或 change（值改变时触发）长度校验 min:xx 允许的最小长度max:xx 允许的最大长度正则校验 pattern:正则规则自定义校验validator 可定义校验的函数函数中有三个参数(rule,value,callback) (1) rule 表示当前校验规则相关的信息(2) value 所校验的表单元素目前的表单值(3) callback 无论成功还是失败，都需要:callback 回调callback() 校验成功callback(new Error(错误信息)) 校验失败
3.3.11 基于axios封装接口请求
示例
