项目实战旅游系统(Vue3+Pinia+vite)----项目配置
Posted DrowningSwimmer
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了项目实战旅游系统(Vue3+Pinia+vite)----项目配置相关的知识,希望对你有一定的参考价值。
1.创建项目
npm init vue@latest
这里我全部都是选择的NO是为了回顾router和pinia的配置
然后npm install安装一下依赖,用npm run dev运行
2.划分目录结构
assets----存放文件资源(css/img/font)
components----存放公共组件
hooks----组件中公共的代码逻辑
mock----模拟数据
router----路由
service----网络请求
stores----状态管理
utils---抽取的工具函数
views----页面
3.重置项目的css样式
首先npm install normalize.css安装一下normalize.css
然后在assets中新建reset.css和common.css
然后在新建一个index.css在里面导入这俩个css
最好在main.js中引入
4.配置router和pinia
在router和stores文件夹下配置如下代码:
import createRouter, createWebHashHistory from "vue-router";
const router = createRouter(
history: createWebHashHistory(),
// 配置映射关系:path--component
routes: [
path: "",
redirect: "/home",
,
path: "/home",
component: () => import("@/views/home/home.vue"),
,
path: "/favor",
component: () => import("@/views/favor/favor.vue"),
,
path: "/message",
component: () => import("@/views/message/message.vue"),
,
path: "/order",
component: () => import("@/views/order/order.vue"),
,
],
);
export default router;
在city.js中写入如下代码:
import defineStore from "pinia";
const useCityStore = defineStore("city",
state: () => (
citys: [],
),
actions: () => ,
);
export default useCityStore;
然后在main.js中注册
import createApp from "vue";
import App from "./App.vue";
import router from "./router";
import pinia from "./stores";
import "normalize.css";
import "./assets/index.css";
createApp(App).use(router).use(pinia).mount("#app");
以上是关于项目实战旅游系统(Vue3+Pinia+vite)----项目配置的主要内容,如果未能解决你的问题,请参考以下文章
Vite-Admin后台管理系统|vite4+vue3+pinia前端后台框架实例
详细vite创建vue3项目(vue3+vue-router+ts+vite+element-plus+pinia)