一、打开命令提示符
二、先初始化项目
npm init vite@latest
三、起项目名字、并选vue 和 ts
到此一个vue + ts + view已经创建完毕了
二、安装vue-router
1、安装路由
npm install vue-router@next --save
2、配置router文件
src目录下新建一个router文件夹，在router文件夹里新建一个index.ts文件，代码如下:
import { createRouter, createWebHistory } from "vue-router"; // 1. 配置路由 const routes: ({ redirect: string; path: string } | { path: string; component: () => Promise<any> })[] = [ {path:'/', redirect: '/login'}, {path:'/login', component: () => import('../views/login.vue')} ]; // 2.返回一个 router 实列，为函数，配置 history 模式 const router = createRouter({ history: createWebHistory(), routes, }); // 3.导出路由 去 main.ts 注册 router.ts export default router
3、在main.ts中引用router下的index.ts
main.ts中代码如下：
import { createApp } from 'vue' import App from './App.vue' import router from '../src/router' const app = createApp(App) app.use(router).mount('#app')
4、app.vue中添加路由组件router-view
<script setup lang="ts"> import { RouterView } from 'vue-router' </script> <template> <router-view></router-view> </template> <style scoped> </style>
三、安装pinia
1、在终端输入一下命令：
npm install pinia
2、接着我们对他做这个使用：在根目录新建一个store 文件夹，并创建一个index.ts文件，这里的index文件是把所有的仓库在这里统一导入再统一导出
//这里不是总仓库，这里只想把pinia全局性的代码收拢到这里而已！ //把所有的仓库在这里统一导入再统一导出 import {createPinia} from 'pinia'; //对pinia的数据进行持久化储存 import piniaPersist from 'pinia-plugin-persist'; //统一导入所有pinia仓库 import useAuthStore from './auth'; //export统一导出所有pinia仓库 export { useAuthStore, }; const pinia = createPinia(); pinia.use(piniaPersist); export default pinia;
3、在pinia里面存写数据
import { defineStore } from 'pinia'; export default defineStore('auth', { state: () => { return { loginName: "张三", } }, actions: { zz(ss:string) { this.loginName = ss } } })
4、在组件中使用
5、通过pinia的actions来修改state里面的数据
在组件中调用
<script setup lang="ts"> const vv = () => { cc.zz('李四') } </script>
6、pinia持久化缓存
6.1、这是index文件夹
6.2、这是pinia文件
到此就结束了
