Vue学习

1。 搭框架 依赖等

创建vue项目

  1. vue create 项目名称 vue create [options] <app-name>
  2. 使用vite npm init vite@latest <app-name>-- --template vue
复制代码

目录调整1

  1. api
  2. utils
  3. vender
  4. images、styles

配置文件

jsconfig.json 配置之后路径可以直接使用 @/

复制代码
{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "exclude": [
      "node_modules",
      "dist" ]
  }
}

.eslintignore

复制代码
/dist
/src/vender

格式化文件

复制代码

安装依赖

  1. 安装 vue-router ``

概念

  1. 数据绑定
  2. 组件

问题

  1. 页面跳转
  2. 请求封装
  3. http请求封装
  4. vue如何引入ts

YAPI使用

错误

While resolving: @vue/[email protected] npm ERR! Found: eslint-pl

命令后添加 --legacy-peer-deps

复制代码
npm i --save ant-design-vue --legacy-peer-deps 

Error: command failed: pnpm install --reporter silent --shamefully-hoist

复制代码
-m npm

安装依赖时提示 404 ,或者安装结束后,运行时提示「 'vite' 不是内部或外部命令,也不是可运行的程序或批处理文件 」,都些都是依赖未安装成功导致的。可以尝试执行 pnpm config set registry https://registry.npmmirror.com/ 切换为国内淘宝源(也可以使用 nrm 一键切换源),然后删除根目录下 /node_modules 文件夹并重新安装依赖。
如果依旧无法运行(基本不太可能),可尝试删除根目录下 /node_modules 文件夹与 pnpm-lock.yaml 文件后,再删除 package.json 中 "preinstall": "npx only-allow pnpm" 这句脚本,最后使用 npm / yarn 进行安装依赖。但需要清楚一点,这样操作后,将无法与官方环境锁定的依赖包版本保持一致,可能会出现无法预知的问题,非必要情况下,请勿使用该方案。

错误

Error: error:0308010C:digital envelope routines::unsupported

复制代码
"scripts": {
   "serve": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve",
   "build": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service build"
},

Elementui 级联选择器 el-cascader 使用

复制代码
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
	<el-form-item label="上级菜单">
		<el-cascader
			v-model="ruleForm.parentId"
			:options="menuData"
			:props="{
				checkStrictly: true,
				value: 'menuId',
				label: 'menuName',
				children: 'children',
			}"
			value-key="menuId"
			placeholder="请选择上级菜单"
			clearable
			class="w100"
		>
			<template #default="{ node, data }">
				<span>{{ data.menuName }} </span>
				<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
			</template>
		</el-cascader>
	</el-form-item>
</el-col>

注意事项 v-model="ruleForm.parentId" 绑定的一定要是数字类型 不然无法加载

:options="menuData" 赋值

复制代码

loading

区别:

  1. v-loading在表单或表格上使用,(可理解为页面加载)
  2. :loading在按钮上使用

知识点

  1. 模板语法 {{}} 文本插值 属性绑定

父子组件传值

父子组件传值

使用emit('update:modelValue') 进行传值

父组件

复制代码
<template>
  <TestCom v-model="name" v-model:age="age"></TestCom>
  <h1>名字: {{ name }}</h1>
  <h1>年龄: {{ age }}</h1>
</template>
 
<script setup>
  import { ref, reactive } from 'vue'
  import TestCom from './components/TestCom.vue'
  const name = ref(null);
  const age = ref(null);
</script>

子组件

复制代码
<template>
  <input v-model="message_name" placeholder="输入姓名" @input="changeName(message_name)" />
  <input v-model="message_age" placeholder="输入年龄" @input="changeAge(message_age)" />
</template>
<script setup>
import { ref, watch } from 'vue';
// 此处引入
const emit = defineEmits(['update:modelValue', 'update:test2'])
const props = defineProps({
  // 父组件 v-model 没有指定参数名,则默认是 modelValue
  modelValue: {
    type: String,
    default: 'lqy'
  },
  age: {
    type: Number,
    default: 28
  }
})
 
let message_name = ref(null)
let message_age = ref(null)
// PS: 具体业务逻辑需要在 props.modelValue 变化时执行其他操作,你可能需要重新添加监听代码。但根据你提供的信息,删除这行代码并没有影响组件的功能。
// watchs(() => props.modelValue, () => { message_name.value = props.modelValue })
// watch(() => props.age, () => { message_age.value = props.age })
 
 
// 数据双向绑定
const changeName = (msg) => {
  emit('update:modelValue', msg)
}
const changeAge = (msg) => {
  emit('update:age', msg)
}
</script>
相关推荐
麦麦大数据7 分钟前
neo4j+django+deepseek知识图谱学习系统对接前后端分离前端vue
vue.js·django·知识图谱·neo4j·deepseek·在线学习系统
树上有只程序猿12 分钟前
后端思维之高并发处理方案
前端
张张张31231 分钟前
4.2学习总结 Java:list系列集合
java·学习
SuperW1 小时前
linux课程学习二——缓存
学习
庸俗今天不摸鱼1 小时前
【万字总结】前端全方位性能优化指南(十)——自适应优化系统、遗传算法调参、Service Worker智能降级方案
前端·性能优化·webassembly
黄毛火烧雪下1 小时前
React Context API 用于在组件树中共享全局状态
前端·javascript·react.js
Apifox1 小时前
如何在 Apifox 中通过 CLI 运行包含云端数据库连接配置的测试场景
前端·后端·程序员
一张假钞1 小时前
Firefox默认在新标签页打开收藏栏链接
前端·firefox
高达可以过山车不行1 小时前
Firefox账号同步书签不一致(火狐浏览器书签同步不一致)
前端·firefox
m0_593758101 小时前
firefox 136.0.4版本离线安装MarkDown插件
前端·firefox