Vue开发环境安装：
****************
https://v3.cn.vuejs.org/guide/installation.html#%E5%91%BD%E4%BB%A4%E8%A1%8C%E5%B7%A5%E5%85%B7-cli
1、下载安装nodejs，带了npm
2、设置淘宝镜像：npm config set registry https://registry.npm.taobao.org
3、先装yarn
npm install -g yarn
4、创建项目
yarn create @vitejs/app 项目名称
然后按照提示依次执行
cd 项目名称
yarn
yarn dev
就可以在浏览器中调试网页了，修改代码后就热更新。
7、用vscode做代码编辑
*******************
增加 vue-router支持
1、yarn生成的代码components/HelloWorld.vue是组件的代码。
页面需要在src/views文件夹下，需要首先创建views文件夹，并且在views下创建一个Page1.vue，代码如下
<template>
<h1>{{name}}</h1>
<h1>{{age}}</h1>
<button @click="sayName">Page 1按钮</button>
</template>
<script lang="ts">
import {ref,computed} from 'vue'
export default {
name: 'Page1',
setup(){
const name = ref('zhangsan')
const birthYear = ref(2000)
const now = ref(2020)
const age = computed(()=>{
return now.value - birthYear.value
})
const sayName = () =>{
name.value = 'I am ' + name.value
}
return {
name,
sayName,
age
}
}
}
</script>
ref和reactive的主要区别：
reactive主要定义复杂的数据类型；ref主要定义基本类型。ref是对reactive的二次包装。
再创建一个Page2.vue，内容稍微变一下
2、项目根目录执行：yarn add vue-router@4 添加支持
3、在src下创建route文件夹和下面的index.js：
import { createRouter,createWebHashHistory} from "vue-router";
import Page1 from "../views/Page1.vue";
import Page2 from "../views/Page2.vue";
const routes = [
{ path: "/", redirect: "/Page1" },
{
path: "/Page1",
name:"Page1",
component: Page1
},
{
path: "/Page2",
name:"Page2",
component: Page2
}
]
const router = createRouter({
history: createWebHashHistory(),
routes: routes
});
export default router
4、修改一下main.js
增加一个import router from './route'
再增加一个
app.use(router)
完成后main.js的内容如下：
import { createApp } from 'vue'
import App from './App.vue'
import router from './route'
const app = createApp(App)
app.use(router)
app.mount('#app')
5、在App.vue中的template中增加
<div><router-link to="Page1">Page1</router-link></div>
<div><router-link to="Page2">Page2</router-link>
</div>
<router-view />
其中<router-view />就是显示路由内容用的。
6、通过代码做页面路由跳转的方式
需要先：import {useRouter } from 'vue-router'
点击跳转按钮的代码：
const router = useRouter();
const goto2=()=>{
router.push({name: 'Page2'});
}
useRouter()一定要放到setup中，不要放到goto2中。
7、router传递参数：
页面读取名字为id的参数值：
const router = useRouter();
var id = router.currentRoute.value.query.id;
alert(id);
1）通过代码跳转：
router.push({name: 'Page2',query:{id:6}});
2）通过router-link传递参数
<router-link :to="{path:'Page2',query:{id:8}}">Page2</router-link>
注意to要用:to这种绑定的值。要写成path:""这样的语法
8、Vue也支持多页面方式，但是坑比较多，Vue主推的就是用router实现的SPA，因此这次做项目也是用SPA，然后用vue本身的服务器端渲染机制可以支持浏览器端的多页面以及SEO。
*************************
Vue3在事件中给模型赋值，因为不直接为reactive变量赋值，而是为reactive内部的变量的变量赋值，这样才能利用响应特性。因此不建议用如下这种多个单独的对象：
const person=reactive({});
const dog=reactive({});
的方式，因为在代码中无法为person直接赋值，除非person.name="zzz";但是不能把ajax等返回的对象person=resp.data这种整体赋值。
所以，最好把所有的对象都放到一个大对象中，如下：
import {reactive,onMounted} from 'vue'
setup(){
const state= reactive({person:{},searchRequest:{}});
onMounted(function(){
state.person = {name:"yzk",age:18};
});
return {state};
}
和Vue2不一样，onMounted里不能使用this，结果为null，改成箭头函数也一样，因此访问模型对象直接state.person这样访问就行了，不用this.state这样访问。
为了避免错误的直接给state赋值，我们一般把state声明为const。
*******************************
Vue3中使用ajax加载数据：
1、安装：yarn add axios
2、
<template>
<div>
<div>姓名：{{state.person.name}}</div>
<div>{{state.person.isVIP?"VIP":"普通会员"}}</div>
<div>注册时间：{{state.person.createdTime}}</div>
</div>
</template>
<script>
import axios from 'axios'
import {reactive,onMounted} from 'vue'
export default {
name: 'Test',
setup(){
const state= reactive({person:{},searchRequest:{}});
onMounted(async ()=>{
let demo1 = await axios.get( 'https://localhost:44360/api/Test/Demo1');//服务器端要启用CORS
state.person = demo1.data;
});
return {state};
}
}
</script>
*************************
vue3的常用难点：https://www.cnblogs.com/little-oil/p/14699396.html
