武汉门户网_厦门微信公众号开发_清远新闻最新消息_镇江seo

前言（与搭建项目无关）：

可以安装一个node管理工具，比如nvm，这样可以顺畅的切换vue2和vue3项目，以免出现项目跑不起来的窘境。我使用的nvm，当前node 22.11.0

 

目录

搭建项目

添加状态管理库，使用pinia

 添加全局组件模版

加入路由vue-router

---

• 搭建项目

 （直接贴代码，都准备使用vite了，肯定一看就明白）

npm init vite data-analysis
Need to install the following packages:
create-vite@5.5.5
Ok to proceed? (y) ynpx
> create-vite data-analysis√ Select a framework: » Vue
√ Select a variant: » TypeScriptScaffolding project in D:\projects\data-analysis...Done. Now run:cd data-analysisnpm installnpm run dev

如上你就能得到一个超级干净（啥都没有）的项目结构。接下来需要补齐一些常用的东西，文件夹按照自己的习惯新建即可，示例如下。

 

• 添加状态管理库，使用pinia

npm i pinia -S

 在store下创建index.ts,同时创建modules文件夹将state模块化

import { appStore } from "./modules/app";
import { createPinia } from "pinia";const store: any = createPinia();
// const store: any = {}
export const registerStore = () => {store.appStore = appStore();
};export default store;// modules文件夹下新建app.ts，内容如下
import { defineStore } from "pinia";
export const appStore = defineStore("appStore", {state: () => ({scrollFlag: false,pageLoading: false,}),actions: {setScrollFlag(flag: any) {this.scrollFlag = flag;},setPageLoading(flag: any) {this.pageLoading = flag;},},
});

main.ts中导入store

import { createApp } from "vue";
import App from "./App.vue";
import store, { registerStore } from "./store";
const setupAll = async () => {const app = createApp(App);// 注册 Piniaapp.use(store);// 注册 自定义指令registerStore();app.mount("#app");
};setupAll();

 重写App.vue文件

<template><el-config-provider :size="size"><router-view /></el-config-provider>
</template><script setup lang="ts">
import { ref} from "vue";
const size = ref('small');
</script>

•  添加全局组件模版

// 在layout文件夹下新建index.vue用做路由组件模版（路径可自行修改）
// 这一步在搭建后台管理项目的时候很重要，可以把菜单栏封装到此处
<template><div class="web-main-container">通用组件模版<router-view /></div>
</template><script setup name="indexPage"></script>
// 添加scss之后编译会报错，需要npm i sass -D
<style lang="scss">
@import "@/assets/styles/reset.scss";
.ellipsis {width: 100%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
}
</style>

• 加入路由vue-router

npm i vue-router -S //安装路由

在router下创建index.ts

import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";import Layout from "@/layout/index.vue";
// 配置静态路由
export const constantRoutes: RouteRecordRaw[] = [{path: "/",redirect: "home",component: () => Layout,children: [{path: "home",name: "首页",component: () => import("../views/home/index.vue"),meta: { title: "首页", hidden: true },},],},{path: "/404",component: () => import("../views/404.vue"),},
];export const router = createRouter({history: createWebHistory(),routes: constantRoutes,
});

 在main.js里引入router

import { createApp } from "vue";
import App from "./App.vue";
import store, { registerStore } from "@/store";
import { router } from "./router";
const setupAll = async () => {const app = createApp(App);// 注册路由app.use(router);// 注册 Piniaapp.use(store);// 注册 自定义指令registerStore();app.mount("#app");
};setupAll();

 编译之后可能会报错，vite.config.ts加以下配置

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { resolve } from "path";
// https://vite.dev/config/
export default defineConfig({plugins: [vue()],resolve: {extensions: [".mjs",".js",".ts",".jsx",".tsx",".json",".scss",".css",],// 配置别名alias: {"@": resolve(__dirname, "./src"),"vue-i18n": "vue-i18n/dist/vue-i18n.cjs.js",},//去掉scss编译警告css: {preprocessorOptions: {scss: {api: "modern-compiler",},},},},
});

路由守卫，接口调用，权限配置等其他功能下一次在写