Vue学习

1。 搭框架 依赖等

创建vue项目

1. vue create 项目名称 vue create [options]
2. 使用vite npm init vite@latest -- --template vue

1

目录调整1

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

配置文件

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14

.eslintignore

/dist
/src/vender
1
2

格式化文件

1

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

概念

1. 数据绑定
2. 组件

问题

1. 页面跳转
2. 请求封装
3. http请求封装
4. 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 
1

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

-m npm
1

安装依赖时提示 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"
},

1
2
3
4
5

Elementui 级联选择器 el-cascader 使用

	
		
			
		
	

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

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

:options=“menuData” 赋值

1

loading

区别：

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

知识点

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

父子组件传值

父子组件传值
使用emit('update:modelValue') 进行传值
父组件

 

1
2
3
4
5
6
7
8
9
10
11
12

子组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35