vite学习详解( 三 ) _vue

import { createApp } from 'vue'import './index.css';import App from './App.vue';createApp(App).mount('#app')
这个时候的App.vue会有错误下划线，这是因为并不知道这是什么，我们先不管，稍后会做声明。
然后改下index.html的引入，这里你应该有些好奇居然可以直接引入ts文件，那是因为vite将html作为入口，也是会参与打包的。

接着我们进入到App.vue文件中，我们需要写点的代码
{{ text }}.test {cursor: pointer;color: #0e0;}
这个时候，方法中text.value会有红色下划线，这是因为我们定义了text是一个类型的ref 。
上面说到main.ts中引入App.vue时无法识别.vue文件，那是因为我们并没有对vue-sfc文件做声明，自然是不认识的。
我们在src文件夹下新建vue-env.d.ts文件
/// declare module '*.vue' {import type { DefineComponent } from 'vue'const component: DefineComponent<{}, {}, any>export default component}
/// 这一行代码是通知vite这是一个端声明文件，之前讲时也有提到过，感兴趣的大佬可以去看下我之前的文章。
声明的代码也很好理解，就是声明*.vue文件是。
我们之前已经在.json中过了.d.ts文件了，所以这里并不需要我们去哪里给他导入。
这个时候你再回去看main.ts，发现已经没有报错了。
最后我们来改下.json中的一些地方
"main": "src/main.ts","module": "src/main.ts","scripts": {"dev": "vue-tsc && vite"},
这样就配置ok啦，我们在终端运行下npm run dev 。
img-7
运行成功！
配置vue-[32]
既然基础已经可以跑通了，那么我们就来搞个小而五脏俱全的。
npm install vue-router --save
这就安装完啦，然后我们在src文件夹下创建一个views文件夹，然后在里面创建Index.vue以及创建A.vue和B.vue用来测试我们的路由。
mkdir src/viewsecho > src/views/A.vueecho > src/views/B.vueecho > src/views/Index.vue
随便给A.vue以及B.vue写点东西,B的代码类似，这里就不展示了。
{{ text }}.a {color: red;}
然后我们在src下创建文件夹以及在这个文件夹里新建index.ts
mkdir src/routerecho > src/router/index.ts
然后我们在这个index.ts中写下的配置。
import { createRouter, createWebHashHistory } from 'vue-router'import type { RouteRecordRaw, Router } from 'vue-router'const Index = () => import('../views/Index.vue');const A = () => import('../views/A.vue');const B = () => import('../views/B.vue');const routes: RouteRecordRaw[] = [{path: '/',component: Index,children: [{ path: 'a', name: 'a', component: A },{ path: 'b', name: 'b', component: B },],redirect: 'a'}]const router: Router = createRouter({// 跳转方式，这里就不用H5了history: createWebHashHistory(),routes})export default router
主路由是Index.vue然后两个子路由A和B
然后老规矩将这个给一下。main.ts中引入
import { createApp } from "vue";import router from "./router/index";import "./index.css";import App from "./App.vue";createApp(App).use(router).mount("#app");
然后让我们回过头去到Index.vue中，我们需要写个click事件让路由变化。
切换
由于组合式api不再使用this，所以这里只能是再了[33] 。
另外别忘了在App.vue中将路由组件渲染在中。
.test {cursor: pointer;color: #0e0;}
然后就完成啦，我们重新跑下指令npm run dev