交友免费的网站建设,网站搜索出来有图片,建立网站的申请,动漫设计与制作是做什么的文章目录 补充VS Code 代码片段注册自定义组件vue routerpinia删除vite创建项目时默认的文件axiosmock3.0.x版本的 viteMockServe 补充 为文章做补充#xff1a;https://blog.csdn.net/yavlgloss/article/details/140063387 VS Code 代码片段 为当前项目创建 Snippets
{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
templatediv classHomeh1!!!!!!!!!!!!!!!!/h1!-- Your content here --/div
/templatescript setup
import { ref } from vue;/scriptstyle 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.jssrc/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 的状态和方法
templatedivh1{{ counter.name }}/h1pCount: {{ counter.count }}/ppDouble Count: {{ counter.doubleCount }}/pbutton clickcounter.incrementIncrement/buttonbutton clickcounter.decrementDecrement/button/div
/templatescript 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-mock2.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.tsuser.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
