snippets router pinia axios mock

文章目录

补充
- [VS Code 代码片段](#VS Code 代码片段)
- 注册自定义组件
- [vue router](#vue router)
- pinia
- 删除vite创建项目时默认的文件
- axios
- mock
- - [3.0.x版本的 viteMockServe](#3.0.x版本的 viteMockServe)

补充

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

VS Code 代码片段

为当前项目创建 Snippets

javascript 复制代码

{
  "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 目录下。

javascript 复制代码

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

html 复制代码

<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 中注册了路由。

typescript 复制代码

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

typescript 复制代码

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。

typescript 复制代码

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

src/stores/counter.ts

typescript 复制代码

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 的状态和方法

html 复制代码

<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

typescript 复制代码

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 cached
        iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
        // Specify symbolId format
        symbolId: '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(这里的数据信息来自硅谷甄选)

typescript 复制代码

//用户信息数据
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 } = checkUser
      return { code: 200, data: { token } }
    },
  },
  // 获取用户信息
  {
    url: '/api/user/info',
    method: 'get',
    response: (request) => {
      //获取请求头携带token
      const 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

typescript 复制代码

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