snippets router pinia axios mock

补充

为文章做补充：https://blog.csdn.net/yavlgloss/article/details/140063387

VS Code 代码片段

• 为当前项目创建 Snippets
  

{"Vue 3 Component": {"prefix": "v3ts","body": ["<template>","  <div class=\"${1:component-name}\">","    ${2:<!-- Your content here -->}","  </div>","</template>","","<script setup>","import { ref } from 'vue';","","// Props","// defineProps({});","","// Emits","// defineEmits(['${3:eventName}']);","","// Reactive state","const ${4:stateName} = ref(${5:initialValue});","","// Methods","function ${6:methodName}() {","  ${7:// Your logic here}","}","</script>","","<style scoped>",".${1:component-name} {","  ${8:/* Add your styles here */}","}","</style>"],"description": "Generate a Vue 3 component template with script setup and scoped style"}
}

保存之后，以后可以用 v3ts 快速创建代码

注册自定义组件

vue router

pnpm add vue-router

在项目中创建路由配置文件，一般放在 src/router 目录下。

import { createRouter, createWebHistory } from 'vue-router';// 路由规则
const routes = [{path: '/',name: 'Home',component: () => import('@/views/Home.vue'), // 按需加载}
];// 创建路由实例
const router = createRouter({history: createWebHistory(), // 使用 HTML5 模式的路由routes,
});export default router;

新建 views/Home.vue

<template><div class="Home"><h1>!!!!!!!!!!!!!!!!</h1><!-- Your content here --></div>
</template><script setup>
import { ref } from 'vue';</script><style scoped>
.Home {/* Add your styles here */
}
</style>

在 App.vue 中添加 <router-view>

在 main.js 中注册了路由。

import { createApp } from 'vue';
import App from './App.vue';
import router from './router'; // 引入路由const app = createApp(App);app.use(router); // 注册路由
app.mount('#app');

pinia

• pnpm add pinia

• 在 main.js 中注册 Pinia

import { createApp } from 'vue';
import { createPinia } from 'pinia';
import App from './App.vue';const app = createApp(App);// 创建 Pinia 实例
const pinia = createPinia();// 注册 Pinia
app.use(pinia);app.mount('#app');

• 创建一个 Store
  在项目中创建一个存储状态的 Store 文件夹，例如 src/stores。

src/
├── stores/
│   └── counter.js

• src/stores/counter.ts

import { defineStore } from 'pinia';export const useCounterStore = defineStore('counter', {// 状态state: () => ({count: 0,name: 'Pinia Store',}),// 计算属性getters: {doubleCount: (state) => state.count * 2,},// 方法actions: {increment() {this.count++;},decrement() {this.count--;},},
});

• 在组件中使用 Store
  示例组件：使用 Store 的状态和方法

<template><div><h1>{{ counter.name }}</h1><p>Count: {{ counter.count }}</p><p>Double Count: {{ counter.doubleCount }}</p><button @click="counter.increment">Increment</button><button @click="counter.decrement">Decrement</button></div>
</template><script setup>
import { useCounterStore } from '@/stores/counter';
const counter = useCounterStore();
</script>

删除vite创建项目时默认的文件

删除style.css

在main.ts中删除 import ‘./style.css’

axios

二次封装。

mock

这里我为了和之前的项目保持一致，指定了mockjs的版本

pnpm install -D vite-plugin-mock@2.9.6 mockjs

• 在 vite.config.ts 中配置 viteMockServe

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons' // SVG需要用的插件
import { viteMockServe } from 'vite-plugin-mock' // mock
import path from 'path' //node提供的模块，可以获取某个文件或者文件夹的路径// https://vite.dev/config/
export default defineConfig(({ command }) => {return {plugins: [vue(),createSvgIconsPlugin({// Specify the icon folder to be cachediconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],// Specify symbolId formatsymbolId: 'icon-[dir]-[name]',}),viteMockServe({mockPath: 'mock',localEnabled: command == 'serve', // 本地启动时启用}),],resolve: {alias: {'@': path.resolve('./src'), // 相对路径别名配置，使用 @ 代替 src},},//scss全局变量的配置css: {preprocessorOptions: {scss: {javascriptEnabled: true,additionalData: '@import "@/styles/variable.scss";',},},},}
})

• 在 根目录 下创建 mock文件夹，创建 mock\user.ts
• user.ts(这里的数据信息来自 硅谷甄选)

//用户信息数据
function createUserList() {return [{userId: 1,avatar:'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',username: 'admin',password: '111111',desc: '平台管理员',roles: ['平台管理员'],buttons: ['cuser.detail'],routes: ['home'],token: 'Admin Token',},{userId: 2,avatar:'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',username: 'system',password: '111112',desc: '系统管理员',roles: ['系统管理员'],buttons: ['cuser.detail', 'cuser.user'],routes: ['home'],token: 'System Token',},]
}export default [// 用户登录接口{url: '/api/user/login',//请求地址method: 'post',//请求方式response: ({ body }) => {//获取请求体携带过来的用户名与密码const { username, password } = body;//调用获取用户信息函数,用于判断是否有此用户const checkUser = createUserList().find((item) => item.username === username && item.password === password,)//没有用户返回失败信息if (!checkUser) {return { code: 201, data: { message: '账号或者密码不正确' } }}//如果有返回成功信息const { token } = checkUserreturn { code: 200, data: { token } }},},// 获取用户信息{url: '/api/user/info',method: 'get',response: (request) => {//获取请求头携带tokenconst token = request.headers.token;//查看用户信息是否包含有次token用户const checkUser = createUserList().find((item) => item.token === token)//没有返回失败的信息if (!checkUser) {return { code: 201, data: { message: '获取用户信息失败' } }}//如果有返回成功信息return { code: 200, data: {checkUser} }},},
]

• 二次封装axios后 App.vue

onMounted(()=>{request({url: '/user/info',method: 'get'}).then(res => {console.log(res);});// axios.post('/api/user/login')request({url: '/user/login',method: 'post',data: {username: 'admin',password: '111111'}}).then(res => {console.log(res);});
})

• 这一次我项目搭建出错的点在 ①mock文件夹创建的位置错了（我没放在根目录下 放在src下了） ②我尝试着用 request.get 获取，但是一直没有获取到正确的信息，原因是对代码不熟，mock中定义的get方法是要设置header的。

3.0.x版本的 viteMockServe

localEnabled 字段改成了 enabled