Vite+VueRouter+Vuex+Ant Design

Create a projectGitHub

Vite requires Node.js version >=12.0.0.

NPM init. vitejs/app vite-admin --template vue CD vite-admin NPM I NPX vite --port4000
Copy the code

Install the sass

npm i -D sass
Copy the code

The installationrouter

npm i -D  vue-router@next 
Copy the code

router/index.js

import { createRouter, createWebHistory } from 'vue-router'
import Home from ".. /view/Home.vue"
export default createRouter({
    // Specify the routing mode
    history: createWebHistory(),
    // Routing address
    routes: [{path: '/home'.component: Home
        }
    ]
})
Copy the code

The installationvuex

npm i -D  vuex@next
Copy the code

store/index.js

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

Install ANTD Desgin Vue

npm i -D ant-design-vue@next
Copy the code

Set the 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',
    ]
  }
}

Copy the code

Set the 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')





Copy the code