学习vue3中遇到的问题及知识总结（持续更新状态）

刘队长-A

已于 2024-03-16 19:44:48 修改

阅读量547

点赞数 2

分类专栏： VUE3 文章标签：学习 vue npm

于 2024-03-10 15:52:32 首次发布

本文链接：https://blog.csdn.net/m0_68384650/article/details/136601988

版权

VUE3 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍了在Vue3项目中使用Pinia状态管理库，处理npm依赖问题，升级包管理器，配置Prettier和ESLint，集成ElementPlus组件库，实现数据持久化，以及表单校验和图标插件的使用。

摘要由CSDN通过智能技术生成

day01

1.pinia持久化插件使用的地址

https://prazdevs.github.io/pinia-plugin-persistedstate/zh/guide/

问题一在安装依赖时容易停留在idealTree:vue3-pinia-demo: sill idealTree buildDeps进度条卡住

方法：请按照以下步骤：

删除 C:\Users账户中的 .npmrc 文件
在命令提示符里执行 npm cache verify
在命令提示符里执行 npm config set registry https://registry.npmmirror.com 切换淘宝源
之后再次执行 npm i 即可。

2.包管理器的升级

npm=>yarn=>pnpm

问题三：出现这种情况

方法：更换淘宝镜像源

day02

1.pnpm创建命令 pnpm create vue

2.简绍两个prettier

//prettier专注于代码的美观度(格式化工具)

//前置：

//1.禁用格式化插件 prettier format on save 关闭

//2.安装Eslint插件, 并配置保存时自动修复，并在setting中配置

并在eslintrc.cjs下面配置rules代码

  //ESlint 插件 + vscode配置 实现自动格式化修复
  "editor.codeActionsOnSave": {
    "source.fixAll": "explicit"
  },
//关闭保存自动格式化
  "editor.formatOnSave": false,

  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 解构的校验
    // 添加未定义变量错误提示，create-vue@3.6.3 关闭，这里加上是为了支持下一个章节演示。
    'no-undef': 'error'
  }

//Eslint关注于规范

提交到仓库前做代码检查

此时又引出了一个暂存区eslint校验

目录的调整

src目录下的assets,components,中的文件删了；router中的router里面清空，store里面的可以删了，也不影响，就是一些库，只要不use就不影响；views中的文件也都删了；App.vue中的文件也清空

main.js没怎么动，只是把样式去了

留下的文件也就是index.js,App.vue,main.js

在添加两个文件夹api和util

将全局样式和图片拷贝到assets中，其中的scss要导入到main.js中，为了生效，我们还需要安装预处理器输入命令 pnpm add sass -D ,然后启动运行命令pnpm dev

路由解析

Element Plus (基于Vue3，面向设计师和开发者的组件库)

https://element-plus.org/zh-CN/guide/quickstart.html

（1）使用npnm进行安装

（2）我们可以先按需导入

（3) 因为我们使用的是vite所以我们需要配置文件

对照配置

day03

Pinia-构建用户仓库和持久化

1.安装插件为了让持久化，在终端输入pnpm add pinia-plugin-persistedstate -D

2.使用main.js ,离pinia近的地方导入import persist from 'pinia-plugin-persistedstate'

app.use(createPinia().use(persist))

3.配置stores/user.js

{persist: true}

设及到了pinia单独拿出来放在store项目下的index.js文件夹，通常我们会在store下面创一个module文件，专门放那些库，方便在App.vue中导入写一大串，我们将index.js文件当成整个module文件夹的出口，然后在这个index.js文件夹中类似（export * from './modules/user'//接收user模块所有的按需导出）

数据交互请求工具设计安装axios命令

pnpm add axios

接着在utils工具类下面创建请求文件request

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. 携带token
    return 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

完整代码

import axios from 'axios'
import { useUserStore } from '@/stores'
import { ElMessage } from 'element-plus'
import router from '@/router'

const baseURL = 'http://big-event-vue-api-t.itheima.net'

const instance = axios.create({
  // TODO 1. 基础地址，超时时间
  baseURL,
  timeout: 10000
})
//请求拦截器
instance.interceptors.request.use(
  (config) => {
    // TODO 2. 携带token
    const useStore = useUserStore()
    if (useStore.token) {
      config.headers.Authorization = useStore.token
    }
    return config
  },
  (err) => Promise.reject(err)
)
//响应拦截器
instance.interceptors.response.use(
  (res) => {
    // TODO 3. 处理业务失败
    // TODO 4. 摘取核心响应数据
    if (res.data.code == 0) {
      return res
    }
    //处理业务失败,给错误提示，并且抛出错误
    ElMessage.error(res.data.message || '服务异常')
    return Promise.reject(res.data)
  },
  (err) => {
    // TODO 5. 处理401错误
    //错误的特殊情况=》401权限不足，token过期
    if (err.response?.statue == 401) {
      router.push('/login')
    }
    ElMessage.error(err.response.data.message || '服务异常')
    return Promise.reject(err)
  }
)

export default instance
export { baseURL }

以上所有搭建框架完毕

接下来就是项目开始，设计在真正的路由

现在view中配置自己的组件，总共几个模块

接着在App中

接着在router下的index.js中配置路由

day04

昨天已经完成框架结构的搭建，今天学习了注册页面的设计以及表单的校验

1.首先需要安装一个图标插件element-plus中

pnpm i @element-plus/icons-vue

然后我们可以打开element的官网上发现组件里面首先是页面布局

基础是分成一行24份，然后下面还有列偏移使用offset来进行图标的查找

只需要导入就行

表单校验四个规则（打开form表单里面有四大配置项）

1.在script中配置formModel

2.在script中配置rules校验规则

3.在template中<el-form>中配置:model 和:rules

4.在<el-form-item标签中加入prop='username'

5.在el-input标签中加入v-model

举个我代码中的例子

<script setup>
import { User, Lock } from '@element-plus/icons-vue'
import { ref } from 'vue'
const isRegister = ref(true)
//整个的用于提交的form数据对象
const formModel = ref({
  username: '',
  password: '',
  repassword: ''
})
//整个表单的校验规则
//1.非空校验通过require:true配置， message消息提示， trigger触发校验时机blue， change
//2.min max:长度校验
//3.正则校验 pattern；正则规则 \S表示非空字符
//4.自定义校验rule, value, callback
//  rule 当前校验规则的相关信息
// value所校验的表单元素目前的表单值
//  callback  无论成功失败都要回调
//     => callback() 校验成功
//     => callback(new Error(错误信息)) 校验失败
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) => {
        //判断value和当前form中收集的password是否一致
        if (value !== formModel.value.password) {
          callback(new Error('两次输入密码不一致'))
        } else {
          callback() //就算校验成功，也需要callback
        }
      },
      trigger: 'blur'
    }
  ]
}
</script>

<template>
  <!-- el-row表示一行，一行分成24份 布局利用el-col列-->
  <el-row class="login-page">
    <el-col :span="12" class="bg"></el-col>
    <el-col :span="6" :offset="3" class="form">
      <!-- 注册相关表单 -->
      <el-form
        :model="formModel"
        :rules="rules"
        ref="form"
        size="large"
        autocomplete="off"
        v-if="isRegister"
      >
        <el-form-item>
          <h1>注册</h1>
        </el-form-item>
        <el-form-item prop="username">
          <el-input
            v-model="formModel.username"
            :prefix-icon="User"
            placeholder="请输入用户名"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            v-model="formModel.password"
            :prefix-icon="Lock"
            type="password"
            placeholder="请输入密码"
          ></el-input>
        </el-form-item>
        <el-form-item prop="repassword">
          <el-input
            v-model="formModel.repassword"
            :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-input
            name="password"
            :prefix-icon="Lock"
            type="password"
            placeholder="请输入密码"
          ></el-input>
        </el-form-item>
        <!-- <el-form-item>
            <el-input :prefix-icon="View" 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>

刘队长-A

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习vue3中遇到的问题及知识总结（持续更新状态）

1.pinia持久化插件使用的地址问题一在安装依赖时容易停留在idealTree:vue3-pinia-demo: sill idealTree buildDeps进度条卡住方法：请按照以下步骤：删除 C:\Users账户中的 .npmrc 文件在命令提示符里执行 npm cache verify在命令提示符里执行 npm config set registry https://registry.npmmirror.com 切换淘宝源之后再次执行 npm i 即可。2.包管理器的升级。
复制链接

扫一扫