vite 创建项目流程 + vue3学习
1. 创建vite项目
cmd打开终端
npm init vite
输入项目名
选择vue框架
选择使用js
2. 打开项目文件 配置路由
npm i 初始化项目
npm install vue-router 安装路由
新建router文件 创建index.js
内容：
import {createRouter,createWebHashHistory} from "vue-router";
const routes = [
{
path: "/",
redirect: "/login",
},
{
path: "/login",
name: "login",
component: () => import("../views/login.vue"),
},
]
const router = createRouter({
history: createWebHashHistory(),
routes,
});
export default router;main.js中引入router createvue后面加上use(router)
在app.vue页面加上router-view 显示路由界面
3. 配置页面
创建views文件夹存放页面
创建路由中的vue页面
4. vite.config.js配置文件的基本设置：
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { resolve } from "path";
// 引入自动导入import的插件
import AutoImport from "unplugin-auto-import/vite";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
AutoImport({
imports: ["vue", "vue-router"],
}),
],
// 配置代理解决跨域问题
server: {
proxy: {
"/api": {
target: "https://test.ktyfz.com/",
changeOrigin: true,
// rewrite: (path) => path.replace(/^\/api/, ''),
},
},
// host: 'localhost', //设置域名
host: "0.0.0.0",
// open: true, //设置自动打开
port: 8090, //端口
hmr: true, //开启热更新
},
build: {},
// 配置别名 @
resolve: {
alias: {
"@": resolve(__dirname, "src"),
},
},
});
vue3学习：
响应式数据：
reactive：
import { reactive } from 'vue'
const state = reactive({ count: 0 })reactive() 的局限性:
1.仅对对象类型有效（对象、数组和 Map、Set 这样的集合类型），而对 string、number 和 boolean 这样的 原始类型 无效
2.
ref: 定义响应式简单数据类型使用ref 在使用时需要.value进行使用、
watch
监听单个数据：
watch(str, (newvalue, oldvalue) => {
console.log(newvalue, oldvalue);
})监听多个数据：
watch([str1, str2], (newvalueArr, oldvalueArr) => {
console.log(newvalueArr, oldvalueArr);
//newvalueArr为新值的数组 第一项为str1 第二项为str2
//oldvalueArr为旧值的数组 第一项为str1 第二项为str2
})监听对象中的某个key的值的变化：
// 监听 obj中key属性的值
watch(() => obj.key, (newvalue, oldvalue) => {
console.log(newvalue, oldvalue);
})
//obj.key也可写成obj['key']当需要立即监听和深度监听时 ：
watch(() => obj['key'], (newvalue, oldvalue) => {
console.log(newvalue, oldvalue);
}, {
immediate: true,
deep:true
//当obj.key（obj['key']）的值为一个对象时 需要用到深度监听
})动态组件：
使用
（组件要引入）
异步组件：
使用场景1：
例如：页面包含A、B、C三个组件 ，当用户没下拉访问到C组件时 ，就不加载C组件，达到优化性能的效果
1.异步引入组件
import { defineAsyncComponent } from 'vue'
const AsyncComp = defineAsyncComponent(() =>
import('./components/MyComponent.vue')
)虽然异步引入了组件 但是C组件也进行了加载 需要安装个插件 进行观察
1.需要安装@vueuse/core插件
参考连接：https://vueuse.org/core/useIntersectionObserver/#demo
并在父组件中引入
import {useIntersectionObserver} from ‘@vueuse/core’
以上就实现了 当下滑到C组件时才开始加载C组件的内容
使用场景2：分包 run build时 异步组件会单独打包js文件(从主体js文件中分出来的) 仅在页面需要它渲染时才会调用加载内部实际组件的函数
搭配 Suspense 内置组件 使用
#default 和 #fallback。两个插槽都只允许一个直接子节点。在可能的时候都将显示默认槽中的节点。否则将显示后备槽中的节点。
示例：
A中使用awiat操作发送axios请求 可将A组件写成异步加载组件 搭配Suspense内置组件使用 在响应数据回来之前显示 #fallback插槽的加载状态
A组件：
{{ list }}
父组件：
当需要C异步组件使用await并在加载时也加上加载状态的 可以将vueuse中的观察器与Suspense结合使用
Mixins 混入：
一个包含组件选项对象的数组，这些选项都将被混入到当前组件的实例中 组件引入后不相互共享
示例：
src下新建mixin/mixin.js
import { ref } from "vue";
export default function () {
let num = ref(1);
let fav = ref(false);
let changeNum = () => {
num.value++;
fav.value = !fav.value;
};
return {
num,
fav,
changeNum,
};
}
使用：
A组件中引入并使用：
{{ num }}---{{ fav }}
当B组件也引入使用mixin时 其中使用的变量或方法不会互通
当mixin中有生命周期组件中也有生命周期时 会先执行mixin中的生命周期 再执行组件的生命周期