使用Vite创建

在执行以下命令前，请确保安装了Nodejs.若是还想更多详情配置可查看vite官方文档

npm create vite@latest

推荐在项目中使用TypeScript，这会使你的项目更易维护，以及减少开发时产生的不必要bug.

// 创建项目的名字
// √ Project name: ... vue_temp
// 框架的选择
// √ Select a framework: » Vue
// 语言的选择
// √ Select a variant: » TypeScript

目录结构

创建完成后，可能没有以下一些文件夹，需要自己根据以下目录结构创建。

ps：这是习惯常用的结构，当然你们也可以按照自己习惯的来。

vue_temp 项目名字
├── node_modules 模块依赖
├── public 静态资源打包不会处理，放至同级
│ └── vite.svg
├── src
│ ├── assets 静态资源
│ ├── common 公共方法
│ ├── views 视图
│ ├── router 路由
│ │ ├── index.ts
│ │ └── routes.ts
│ ├── store 状态管理
│ │ ├── index.ts
│ │ └── user.ts
│ ├── styles 样式
│ ├── utils 工具函数
│ ├── components 公共组件
│ ├── App.vue 开始视图文件
│ ├── main.ts 开始逻辑文件
├── index.html 入口文件
├── package.json
├── .env.development 开发环境配置
├── .env.production 生产环境配置
├── .gitignore git忽略文件
├── tsconfig.json ts配置文件
├── vite.config.ts 打包配置
└── README.md

配置

现在项目缺少几个重要组成部分：store存储、axios请求、router路由等。

1.Router路由

主要用于控制页面跳转、以及相关权限校验。

npm install vue-router

// 文件： ./store/routes.ts
// 用于单独配置路由表信息
import { RouteRecordRaw } from "vue-router";

const routes: Array<RouteRecordRaw> = [
  {
    // 路由不能重复且唯一
    path: "/",
    // 名称不能重复且唯一
    name: "admin",
    // 元信息，可用于路由权限校验设置，比如哪些页面需要校验权限，或者需要什么权限都可以在该对象中添加想要的属性设置。
    meta: {
      title: "首页",
      flag: true,
    },
    // 视图指向
    component: () => import("@/views/admin/index.vue"),
  },
];

export default routes;

// 文件： ./store/index.ts
// 创建路由
import { createRouter, createWebHistory } from "vue-router";
// 获取配置的路由表
import routes from "./routes";
const router = createRouter({
  history: createWebHistory(),
  routes,
});
// 路由守卫拦截
router.beforeEach((to, from, next) => {
  if (to.meta.title) {
    // 此处就可以权限校验，这是全局拦截
  }
  next();
});
export default router;

2.Store存储

用于公共的存储响应式数据、其原本使用的事vuex来实现。

但是vuex有个致命的缺点就是，刷新后数据会丢失，所以后面项目中基本使用pinia来完成。

其优点事结合响应式和持久化存储。

npm install pinia

// 文件路径 ./store/index.ts
// 创建pinia
import { createPinia } from "pinia";

// 持久化处理
import piniaPersist from "pinia-plugin-persist";
const pinia = createPinia();
pinia.use(piniaPersist);

export default pinia;

// 文件路径 ./store/user.ts
// 创建user模块
import { defineStore } from "pinia";
import { ref } from "vue";

// 定义userStore模块
export const useUserStore = defineStore("user", () => {
  // 定义响应式数据
  const name = ref("mao");
  // 定义方法
  const setName = (name: string) => {
    name.value = name;
  };
  return {
    name,
    setName,
  };
});

// vue文件使用示例
import { useUserStore } from "@/store/user";
const userStore = useUserStore();
userStore.name;
userStore.setName("mao");

3.注册插件

在项目中，有些插件或者工具需要注册后才能使用，比如pinia和router。

// 文件路径 ./main.ts
import { createApp } from "vue";
import App from "./App.vue";
// 引入路由
import router from "./store/index";
// 引入存储
import pinia from "./store/index";

const app = createApp(App);
// 注册router使用
app.use(router);
// 注册sotre使用
app.use(pinia);
app.mount("#app");

4.配置vite.config.ts

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import path from "path";

// https://vitejs.cn/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    // 配置引入别名方便打包时候识别
    alias: {
      "@": path.resolve(__dirname, "src"),
    },
  },
});

5.配置tsconfig.json

具体其他配置请看tsconfig.json

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "baseUrl": ".",
    //在vite.config.ts配置后这里一定要配置，否则无法识别。
    "paths": {
      "@/*": ["src/*"]
    }
  }
  // .....
}

6.配置环境变量

.env.development 和 .env.production这两个文件主要是配置开发环境变量和生成环境变量

注意：vite搭建的项目一定要以 VITE_ 开头

# 公共环境
# .env
VITE_APP_TITLE = 'mao'

# 开发环境
# .env.development
VITE_BASE_URL = 'http://localhost:3000'

# 生产环境
# .env.production
VITE_BASE_URL = 'http://localhost:3000'

总结

以上是项目初始化的基本配置，后续会继续补充。