项目配置

vite初始化项目

yarn create vite <project-name> --template vue
cd <project-name>
yarn
yarn dev

安装依赖

npm i vue-router@4 vuex axios  -S
npm i @types/node sass -D

配置vite.config.js

...
export default defineConfig({
...
server: {
  host: "127.0.0.1" /* 设置为0.0.0.0则所有的地址均能访问 */,
    // 配置代理服务器，解决跨域
    proxy: {
      "/api": {
        target: "http://localhost:3002",
          changeOrigin: true,
      },
    },
},
  resolve: {
    // 配置别名
    alias: {
      "@": "/src",
      "@css": "/src/assets/css",
      "@js": "/src/assets/js",
      "@api": "/src/api",
      "@view": "/src/views",
    },
  },
});

Vue Router创建路由

import { createRouter, createWebHashHistory } from "vue-router";
const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    {
      path: "/my",
      component: () => import("@view/my.vue"),
    },
  ],
});
export default router;

import router from "./router";
...
createApp(App).use(router).mount("#app");

<template>
  <router-view></router-view>
</template>

配置Vuex

封装axios

移动端适配