snippets router pinia axios mock
文章目录
- 补充
- VS Code 代码片段
- 注册自定义组件
- vue router
- pinia
- 删除vite创建项目时默认的文件
- axios
- mock
- 3.0.x版本的 viteMockServe
补充
为文章做补充：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 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(这里的数据信息来自 硅谷甄选)
//用户信息数据
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
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