Vite

创建项目

npm init @vitejs/app vite-frontend-template

安装vue-router，vuex

npm i vue-router@next vuex@next

在src目录下新建router/index.ts

import { createRouter, RouteRecordRaw, createWebHashHistory } from "vue-router"
import layout from '../components/layout/index.vue'
import { checkStatus } from '../api/index'
const routes: Array<RouteRecordRaw> = [
  {
    path: "/",
    redirect: "/home",
    component: layout,
    children: [
      {
        path: "/home",
        name: "home",
        meta: {
          title: '活动页面'
        },
        component: () => import(/* webpackChunkName: "About" */"../views/home/index.vue"),
      },
    ],
​
  },
​
  {
    path: "/404",
    meta: {
      title: '404'
    },
    component: () => import(/* webpackChunkName: "About" */"../views/404/index.vue"),
  },
  {
    path: "/:pathMatch(.*)",
    redirect: "/404",
  },
];
​
const router = createRouter({
  history: createWebHashHistory(),
  routes,
});

在 src目录下创建 store/index.ts

import { InjectionKey } from 'vue'
import { createStore, Store } from 'vuex'
​
export interface State {
  count: number
}
​
export const key: InjectionKey<Store<State>> = Symbol()
​
export const store = createStore<State>({
  state() {
    return {
      count: 0
    }
  },
  mutations: {
    increment(state) {
      state.count++
    }
  }
})

修改main.ts

import { createApp } from 'vue'
import { store, key } from './store'
import router from './router'
import App from './App.vue'
const app = createApp(App)
app.use(store, key)
app.use(router)
app.mount('#app')

配置环境

npm install dotenv

修改vite.config.ts

​
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
​
import styleImport, { VantResolve, } from 'vite-plugin-style-import';
​
// https://vitejs.dev/config/
​
export default (({mode}) => {
require('dotenv').config({ path: `./.env.${mode}` });
​
  return defineConfig({
    plugins: [vue(), styleImport({
      resolves: [VantResolve()],
    }),],
​
    server: {
      host: 'xxxxxx',
      port: 3000,
      proxy: {
        '/api': {
          target: process.env.VITE_HOST,    //实际请求地址
          changeOrigin: true,
          rewrite: (path) => path.replace(/^/api/, '')
        },
      }
    }
  })
})
​

--- highlight: a11y-light

创建项目

npm init @vitejs/app vite-frontend-template

安装vue-router，vuex

npm i vue-router@next vuex@next

在src目录下新建router/index.ts

import { createRouter, RouteRecordRaw, createWebHashHistory } from "vue-router"
import layout from '../components/layout/index.vue'
import { checkStatus } from '../api/index'
const routes: Array<RouteRecordRaw> = [
  {
    path: "/",
    redirect: "/home",
    component: layout,
    children: [
      {
        path: "/home",
        name: "home",
        meta: {
          title: '活动页面'
        },
        component: () => import(/* webpackChunkName: "About" */"../views/home/index.vue"),
      },
    ],
​
  },
​
  {
    path: "/404",
    meta: {
      title: '404'
    },
    component: () => import(/* webpackChunkName: "About" */"../views/404/index.vue"),
  },
  {
    path: "/:pathMatch(.*)",
    redirect: "/404",
  },
];
​
const router = createRouter({
  history: createWebHashHistory(),
  routes,
});

在 src目录下创建 store/index.ts

import { InjectionKey } from 'vue'
import { createStore, Store } from 'vuex'
​
export interface State {
  count: number
}
​
export const key: InjectionKey<Store<State>> = Symbol()
​
export const store = createStore<State>({
  state() {
    return {
      count: 0
    }
  },
  mutations: {
    increment(state) {
      state.count++
    }
  }
})

修改main.ts

import { createApp } from 'vue'
import { store, key } from './store'
import router from './router'
import App from './App.vue'
const app = createApp(App)
app.use(store, key)
app.use(router)
app.mount('#app')

配置环境

npm install dotenv

修改vite.config.ts

​
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
​
import styleImport, { VantResolve, } from 'vite-plugin-style-import';
​
// https://vitejs.dev/config/
​
export default (({mode}) => {
require('dotenv').config({ path: `./.env.${mode}` });
​
  return defineConfig({
    plugins: [vue(), styleImport({
      resolves: [VantResolve()],
    }),],
​
    server: {
      host: 'xxxxxx',
      port: 3000,
      proxy: {
        '/api': {
          target: process.env.VITE_HOST,    //实际请求地址
          changeOrigin: true,
          rewrite: (path) => path.replace(/^/api/, '')
        },
      }
    }
  })
})
​

\