项目实战旅游系统(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+Pinia学习笔记

Vite+Vue3+Pinia学习笔记

详细vite创建vue3项目(vue3+vue-router+ts+vite+element-plus+pinia)

从零开始使用 vite + vue3 + pinia + naiveui 搭建简单后台管理系统

Vite+Vue3+Vue-Router@4+Pinia 快速起步