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

常见问题FAQ

免费下载或者VIP会员专享资源能否直接商用？: 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。

提示下载完但解压或打开不了？: 最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量，若小于网盘提示的容量则是这个原因。这是浏览器下载的bug，建议用百度网盘软件或迅雷下载。若排除这种情况，可在对应资源底部留言，或联络我们.。

找不到素材资源介绍文章里的示例图片？: 对于PPT，KEY，Mockups，APP，网页模版等类型的素材，文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买，且本站不负责(也没有办法)找到出处。同样地一些字体文件也是这种情况，但部分素材会在素材包内有一份字体下载链接清单。