项目实战旅游系统(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");