Vue学习

ccubee

已于 2023-11-27 13:58:07 修改

阅读量535

点赞数

文章标签： vue.js 学习前端

于 2023-11-21 15:29:49 首次发布

本文链接：https://blog.csdn.net/wonder_dog/article/details/126067296

版权

1。搭框架依赖等

创建vue项目

vue create 项目名称 vue create [options] <app-name>
使用vite npm init vite@latest <app-name>-- --template vue

目录调整1

api
utils
vender
images、styles

配置文件

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

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

.eslintignore

/dist
/src/vender

格式化文件

安装依赖
5. 安装 vue-router ``

概念

数据绑定
组件

问题

页面跳转
请求封装
http请求封装
vue如何引入ts

YAPI使用

错误

While resolving: @vue/eslint-config-standard@6.1.0 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

区别：

v-loading在表单或表格上使用，（可理解为页面加载）
:loading在按钮上使用

知识点

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

父子组件传值

父子组件传值
使用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>

实践

在 ruoyi 后端、前端基础上学习

页面为父组件 oss/index.vue 、子组件 FileUpload/index.vue
我的需求是新建文件上传页面，需要子组件传给父组件 ossId 、name、 url 三个属性，所以在原来组件基础上，复制了一个新的组件，以下为修改部分

props 传递  ossForm 属性
const props = defineProps({
    modelValue: [String, Object, Array],
    ossForm: Object,
    // 数量限制
    limit: propTypes.number.def(5),
    // 大小限制(MB)
    fileSize: propTypes.number.def(5),
    // 文件类型, 例如['png', 'jpg', 'jpeg']
    fileType: propTypes.array.def(["doc","docx", "xls", "ppt", "txt", "pdf","sql","log"]),
    // 是否显示提示
    isShowTip: propTypes.bool.def(true),
});

新增传递属性 传递对象
const emit = defineEmits(['update:modelValue', 'update:ossForm']);


// 上传结束处理  将 update:ossForm 对象传递
const uploadedSuccessfully = () => {
    if (number.value > 0 && uploadList.value.length === number.value) {
        fileList.value = fileList.value.filter(f => f.url !== undefined).concat(uploadList.value);
        uploadList.value = [];
        number.value = 0;
        emit("update:modelValue", listToString(fileList.value));
        emit("update:ossForm", fileList.value[0]);
        proxy?.$modal.closeLoading();
    }
}

父组件添加接收属性

<FileUploadNew v-model="form.ossIdPath" v-model:ossForm="form.ossForm" />

开始的时候只加了 v-model:ossForm 属性，发现在二次打开页面的时候，还会有上一次上传的文件列表，页面没有完全初始化，后面加上 v-model="form.ossIdPath" , 才可以正常初始化，至此父子组件传值成功