搭建方式两种vue3.0官方构建

step1:一个干净的文件夹
step2:npm init vue@latest
安装参数，参考截图
step3:按照shell提示，进入你的pro目录
cd myfirstvue3.0project
  npm install
  npm run dev

step4:就可以看到了

需要有nodejs 16以上的版本！！！node -v

vite构建一个vue3.0项目（搭建方式二）

step1:
npm create vite@latest

pinia数据共享管理

响应式属性定义ref和reactive

ref 和reactive区别
ref需要ref.value,
reactive不需要.value

##vite
<template>
    <h1>组合式api，ref</h1>
    <h2>{{ titleRef }}</h2>
    
</template>

<script setup>
//import导入一定要放在最上面
//vue来自nodemodules
import {ref,computed} from 'vue'

//定义响应式属性，可以活的数据
const titleRef = ref("我是一个动态的数据展示信息")

</script>


<style scoped>

</style>

reactive

<template>

    <h1>ViteSetupReative</h1>
    <h2>{{ userReactive }}</h2>
    <h3>{{ userReactive.username }}</h3>
    <h4>{{ userReactive.mobilephone }}</h4>
</template>

<script setup>
//import导入一定要放在最上面
//vue来自nodemodules
import {ref,computed,reactive} from 'vue'

//reactive定义的一定要是对象，函数，数组，日期
//function reactive<T extend object>(target: T):UnwrapNestedRefs<T>
const userReactive = reactive({
    username:"feige",
    age:18,
    mobilephone:"122334482398472389"
})
//如何修改reactive里面的值？？
//修改
userReactive.username="kuangshen"

</script>


<style scoped>

</style>

ViteWacherEffect

<template>

    <h1>ViteWacherEffect组合式api定义和学习</h1>
    <h2>{{ count }}</h2>
    <h3>{{ title }}</h3>

</template>

<script setup>
//import导入一定要放在最上面
//vue来自nodemodules
import {ref,watchEffect,reactive} from 'vue'
var count = ref(0)
var title = ref()

//watchEffect(),方法里面有一个匿名函数！！！()=>{}
watchEffect(()=>{
console.log("监听属性，监视到发生了变化",count.value)
})
//变化
count.value = 666
title.value = "20230329---gogogovue3.0"
setInterval(()=>{
    title.value= Math.random()
},1500)


</script>


<style scoped>

</style>

登陆练习小案例

<template>

    <h1>FormLogin登陆案例</h1>
    <form>
        <h2>{{ user }}</h2>
        <p><input type="text" v-model="user.username"></p>
        <p><input type="text" v-model="user.password"></p>
        <p><button @click.prevent="handleLogin">登陆</button></p>
        <p style="color:red">{{ errMsg }}</p>
    </form>


</template>

<script setup>
//import导入一定要放在最上面
import {reactive,ref,watch} from "vue"
//思考，为了拿到输入框中的值，一般用ref或者reactive，不要纠结
//ref ,reactive(注册，添加商品推荐用reactive)
const errMsg = ref("")
//1定义响应式数据
const user = reactive({
    username: "",
    password: ""
})


//定义事件
const handleLogin = ()=>{
    console.log("dengdengdenglu1111")
    var username = user.username;
    var password = user.password;
    if(!username){
        errMsg.value = "请输入用户名信息";
        return;
    }
    if(!password){
        errMsg.value = "请输入密码";
        return;
    }
    console.log("您登陆的用户信息是,",username,password)
}


//监听器，用户全部输入后，清空
watch(errMsg,(newval,oldval)=>{
    setTimeout(()=>{
        errMsg.value = ""
    },1500)
})


</script>


<style scoped>

</style>

provide(),inject()父子组件传值

use机制与封装

step1，把函数封装好，return出需要用的值

    //import导入一定要放在最上面
    import {reactive,ref,watch} from "vue"


//export 一个函数
export function useFormLogin(){

//思考，为了拿到输入框中的值，一般用ref或者reactive，不要纠结
//ref ,reactive(注册，添加商品推荐用reactive)
const errMsg = ref("")
//1定义响应式数据
const user = reactive({
    username: "",
    password: ""
})


//定义事件
const handleLogin = ()=>{
    console.log("dengdengdenglu1111")
    var username = user.username;
    var password = user.password;
    if(!username){
        errMsg.value = "请输入用户名信息";
        return;
    }
    if(!password){
        errMsg.value = "请输入密码";
        return;
    }
    console.log("您登陆的用户信息是,",username,password)
}


//监听器，用户全部输入后，清空
watch(errMsg,(newval,oldval)=>{
    setTimeout(()=>{
        errMsg.value = ""
    },1500)
})

//需要用的值，return回去，否则无法拿到
//return 是一个整个对象，接收方需要处理一下obj
return {
    user,
    handleLogin,
    errMsg
}

}

setp2，接收方，解构一下，obj=函数

<template>

    <h1>FormLogin登陆案例</h1>
    <form>
        <h2>{{ user }}</h2>
        <p><input type="text" v-model="user.username"></p>
        <p><input type="text" v-model="user.password"></p>
        <p><button @click.prevent="handleLogin">登陆</button></p>
        <p style="color:red">{{ errMsg }}</p>
    </form>


</template>

<script setup>
import { useFormLogin } from '../../utils/UseFormLogin';
//obj = 函数
const {
    user,
    handleLogin,
    errMsg
} = useFormLogin();

</script>


<style scoped>

</style>

pinia==状态管理！，存储数据用，多页面共享数据和状态