setEnv.bat
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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
|
@echo off
setlocal
rem 配置npm仓库位置
npm config set prefix "D:\repository\npm-repository\global"
npm config set cache "D:\repository\npm-repository\cache"
rem 配置镜像
npm config set registry https://registry.npmmirror.com
rem 配置系统环境Path
set NPM_REPO_PATH=D:\node_repository\global
setx PATH "%PATH%;%NPM_REPO_PATH%;"
rem 配置NODE系统环境PATH
set NODE_HOME=E:\Appclient\nodejs
set NODE_PATH=E:\Appclient\nodejs\node_modules
setx PATH "%PATH%;%NODE_HOME%;%NODE_PATH%;"
rem 安装pnpm环境
npm install -g pnpm
rem 定义仓库位置
set REPO_PATH=D:\node_repository\pnpm_repository
set BIN_DIR=%REPO_PATH%\.pnpm-bin-dir
set CACHE_DIR=%REPO_PATH%\.pnpm-cache
set GLOBAL_DIR=%REPO_PATH%\.pnpm-global
set STATE_DIR=%REPO_PATH%\.pnpm-state
set STORE_DIR=%REPO_PATH%\.pnpm-store
rem 创建文件夹
mkdir "%BIN_DIR%"
mkdir "%CACHE_DIR%"
mkdir "%GLOBAL_DIR%"
mkdir "%STATE_DIR%"
mkdir "%STORE_DIR%"
rem 配置 pnpm 路径
pnpm config set global-bin-dir "%BIN_DIR%"
pnpm config set cache-dir "%CACHE_DIR%"
pnpm config set global-dir "%GLOBAL_DIR%"
pnpm config set state-dir "%STATE_DIR%"
pnpm config set store-dir "%STORE_DIR%"
rem 验证 pnpm 配置
pnpm config list
echo All directories created and pnpm configured successfully.
pause
|
新建文件夹
D:\node_repository\cache
D:\node_repository\global
D:\node_repository\pnpm_repository
安装 nodejs
1
2
3
4
5
|
安装 node 包管理工具
npm install pnpm -g
安装 Vue3 最新版本
pnpm create vue@latest
|
使用知识点
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
|
引用函数
import {ref,reactive,toRef} from 'vue'
import {type Struct} from 'xx.ts'
import {withDefaults,onBeforeCreate,} from 'vue'
// define开头为宏函数，不需要import
// 页面Vue断点
debugger
引用自定义组件
import Person from './components/Person.vue'
setup 里面没有 this
// 语法糖
ref 响应式数据定义 基本类型、对象类型 且 ref 在script中 值必须加 .value 变更响应式数据值
reactive 只能定义 对象类型 且 定义结构数据
toRef & toRefs 前者取结构单一属性，后者取结构整体属性 取出的属性具有响应式可变值
computed 计算属性，不要用方法，方法没有缓存 且 只读不可修改
watch 监视，监视ref、reactive响应式数据的值变化，要明确指出监视的数据
watchEffect 监视--watchEffect比较watch 省去很多代码,不需要明确指出监视的数据（函数中用到那些属性，那就监视那些属性）
defineProps 接收上级传过来的值
// 模板标签里
v-model 双向绑定
v-bind 简写: 单向绑定 变量数据展示至页面，页面数据无法传回变量
ref ref标签与<html>标签里新增属性 ref，定义为响应式数据，响应式标签名需与script中保持一致
v-for 遍历:key
v-if 条件判断 直接不显示其模板中的code
v-show 通过操控display none 达到不显示，其模板存在其code
Object.assign(targetObj,remoteObj) 本地定义的结构化对象，与远程Api所获取的数据,remoteObj 数据结构新增至 targetObj 数据结构中
|
例：
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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
|
<script lang="ts" setup>
let xx = ref('sss')
let obj = reactive({name:'张三',age:17})
// 取其值，name、age 不是响应式变量
let {name,age} = obj
// 取其值，name、age 响应式变量，引用方式，会改变obj内部属性
let {name,age} = toRefs(obj)
// 计算，属性
let fullname = computed(()=>{
return '123'
get(){
return '123'
},
set(val){
// 可塑造 计算的值
对val计算的值进行额外的处理得到 想要得到的数据
}
// 监视,情况一、监视【ref】定义的【对象类型】数据，监视的是对象的地址值，若想监视对象内部属性的变化，需要手动开启强制更新
// watch的第一个参数是：被监视的对象类型、可监听多种
// watch的第二个参数是：监视的回调的 对象类型，且需要解构
// watch的第三个参数是：配置对象（deep、immediate等等）
// watch 监听对象里多个属性值
watch(obj,(newVal,oldVal)=>{
console.log('person变化了',newVal,oldVal)
},{deep:true,immediate:true})
watchEffect(()=>{
// 暂不需要解构
if(temp.value >= 60 || height.value >= 80){
//
}
})
// 只接受list
defineProps(['list'])
// 接收限制类型
defineProps<{list:Persons}>()
// 接收 限制类型 + 限制必要性 + 默认值 增加? 上游可传可不传
whileDefaults(defineProps<{list?:Persons}>(),{
list:()=>[{id:"sdfsdlj01",name:"李四",age:12}]
})
})
</script>
等于
<script lang="ts">
export default {
name:'person',
setup(){
//
let xx = ref('sss')
let obj = reactive({name:'张三',age:17})
return {xx,obj}
}
}
</script>
|
Vue2 生命周期
创建（创建前，创建完毕）Vue2 beforeCreate created
挂载（挂载前，挂载完毕）Vue2 beforeMount mounted
更新（更新前，更新完毕）Vue2 beforeUpdate updated
销毁（销毁前，销毁完毕）Vue2 beforeDestroy destoryed
Vue3 生命周期
创建（创建前，创建完毕）Vue3 setup()
挂载（挂载前，挂载完毕）Vue3 onBeforeMount(()=>{}) onMounted(()=>{})
更新（更新前，更新完毕）Vue3 onBeforeUpdate(()=>{}) onUpdated(()=>{})
卸载（卸载前，卸载完毕）Vue3 onBeforeunMount(()=>{}) onUnMount(()=>{})
路由两种模式
history 模式
1
2
|
history createWebHistory 创建
URL较为美观不需要#更接近传统URL
|
hash 模式
1
2
|
createWebHashHistory
URL 带有#，兼容性较好，且SEO优化方面较差
|
