vue3项目开发第一篇vue3项目开发第一篇11111111111111111111111111111111111111

vue3项目开发第一篇

使用pnpm，npm install -g pnpm, pnpm create vue

前置步骤：配置eslink校验，prittier校验

基于husky的代码检查工作流，husky是一个git hooks工具

husky配置：

1.git初始化git init
2.pnpm dlx husky-init&&pnpm install
3.修改生成的.husky/pre-commit文件 pnpm lint(注意这个会进行全代码检查)

link-staged配置：

1.安装 pnpm i lint-staged -D
2.配置package.json

项目用到了sass预处理器，需要

安装：pnpm add saaa -D
启动：pnpm dev

路由使用createRouter，模式分为createWebHistory地址栏不带#，createHashHistory地址栏带#

在router文件里面配置：
import { createRouter,createWebHistory} from 'vue-router'
const router = createRouter({
history:createWebHistory(import.meta.env.BASE_URL),
routes:[]
})
export default router

引入element-plus

1.pnpm add element-plus
2.选择按需引入的方式安装两款插件，自寻查询elementplus官网
3.配置vite.config.js
特别的，配置完后子组件不需要导入即可在父组件中直接用

pinia应该独立维护，在stores文件夹下创建index.js文件作为pinia的独立文件，别忘了默认导出，还是得在main.js中导入引用

仓库也应该统一导出，可以指定stores文件夹中index.js为唯一出口，使用：

export * from './modules/user':导入user文件中所有并导出(暴露在了stores文件夹中了)
注意：此举可以直接在app.vue中导入相应对象：import {useUserStore} from '@/stores'

用elementplus组件封装登录注册页面用到四个参数

:model="ruleForm"  绑定的整个form的数据对象
:rules="rules"  绑定的整个rules规则对象
:表单元素=> v-model="ruleForm.xxx" 给表单元素，绑定form的子属性
el-form-item=>props配置生效的是哪个校验规则(和rules中的字段要对应)

对于自定义校验规则=> 自己写逻辑校验（校验函数）

validator:(rule,value,callback)
    rule 当前校验规则相关信息
    value 所校验的表单元素目前的表单值
    callback 无论成功还是失败，都需要callback回调
        -callback() 校验成功
        -callback(new Error(错误信息)) 校验失败
 例如：
 rules:{
 repassword:[
 validator:(rule,value,callback)=>{
 if (value !==formMoel.value.passwoed){
     callback(new Error('两次输入的密码不一致'))
 }else{
     callback()
 }
 }
 ]
 }

切换是重置表单内容
watch(isRegister,()=>{
    formModel.value={
        username:'',
        password:'',
        repassword:''
}
})
注意细节：const form =ref()
用这个空的form绑定自定义校验和注册登录（用于输入数据）

登录访问拦截

前置守卫语法，在路由中

router.beforeEach((to)=>{
const useStore=useUserStore()
if(!useStore.token && to.path!=='/login') return '/login'
})

下拉框点击跳转

利用框架el-dropdown @command="onCommand" 
    command="---"
    command="---"
    command="---"
利用标识符跳转 const onCommand=async (command)=>{

router.push(`/user/${command}`)
}