Vite+VueRouter+Vuex+Ant Design

创建项目 GitHub

Vite requires Node.js version >=12.0.0.

npm init @vitejs/app vite-admin --template vue
cd vite-admin
npm ｉ
npx vite --port 4000

安装sass

npm i -D sass

安装router

npm i -D  vue-router@next 

router/index.js

import { createRouter, createWebHistory } from 'vue-router'
import Home from "../view/Home.vue"
export default createRouter({
    // 指定路由模式
    history: createWebHistory(),
    // 路由地址
    routes: [
        {
            path: '/home',
            component: Home
        }
    ]
})

安装vuex

npm i -D  vuex@next

store/index.js

import { createStore } from 'vuex'
export default createStore({
    state: {
        name: 'zhagnsan'
    }
})

安装antd desgin vue

npm i -D ant-design-vue@next

设置vite.config.js

import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'


export default {
  plugins: [vue()],
  server: {
    port: 4000,
    hmr: { overlay: false }
  },
  alias: {
    '/@/': `${resolve(__dirname, '.', 'src')}/`
  },
  optimizeDeps: {
    include: [
      'axios',
      '@ant-design/icons-vue',
    ]
  }
}

设置main.js

import { createApp } from 'vue'
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
import App from './App.vue';
import router from '/@/router/index.js'
import store from '/@/store/index.js'
import '/@/assets/scss/common.scss'
import request from '/@/untils/request.js'

const app = createApp(App)
app.config.globalProperties.$axios = request
app.use(Antd);
app.use(router)
app.use(store)
app.mount('#app')