npm init vite@2.8.0

// 1.進(jìn)入項(xiàng)目
cd vite-vue2

// 2.安裝依賴
npm install

// 3.啟動(dòng)項(xiàng)目
npm run dev

// 注意：vite-plugin-vue2的版本為1.9.3
npm install vite-plugin-vue2@1.9.3 -D

import { defineConfig } from 'vite' // 動(dòng)態(tài)配置函數(shù)
import { createVuePlugin } from 'vite-plugin-vue2'
import { resolve } from 'path'

export default () =>
	defineConfig({
		plugins: [createVuePlugin()],
		server: {
			open: true, //自動(dòng)打開瀏覽器
			port: 1567 //端口號(hào)
		},
		resolve: {
            // 別名
			alias: [
				{
					find: '@',
					replacement: '/src'
				}
			]
		}
	})

npm install vue@2.x vue-template-compiler@2.x -S	

import Vue from 'vue'
import App from './App.vue'

new Vue({
	render: h => h(App)
}).$mount('#app')

// index.html
  <script type="module" src="/src/main.js"></script>

<template>
  <div>Hello Vite Vue2</div>
</template>

npm run dev

npm install vue-router@3.5.2 -S

// /src/router/module/home.js
export const home = [
	{
		path: '/home',
		meta: { title: '首頁' },
		component: () => import('@/views/home/Index.vue')
	}
]

// /src/router/module/index.js
import { home } from './home'

export const module = [...home]

// /src/router下index.js
import { module } from './module/index'
import VueRouter from 'vue-router'
import Vue from 'vue'

// 使用VueRouter
Vue.use(VueRouter)

const routes = [
	...module
]

const router = new VueRouter({
	mode: 'history',
	base: '/',
	routes
})

export default router

<template>
  <div>
    Home
  </div>
</template>

import Vue from 'vue'
import App from './App.vue'
import router from './router/index.js'
 
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

<template>
  <div id="app" class="app">
    <router-view></router-view>
  </div>
</template>

npm install vuex@3.6.2 -S

// index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex) // 使用Vuex
export default new Vuex.Store({
	state: {
		count: 0
	},
	mutations: {
		increment(state) {
			state.count++
		}
	},
	actions: {},
	modules: {}
})

import Vue from 'vue'
import App from './App.vue'
import router from './router/index.js'
import store from './store'
 
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

npm install ant-design-vue@1.7.8 -S

import Vue from 'vue'

import { Button, message } from 'ant-design-vue' // 按需引入
import 'ant-design-vue/dist/antd.css' // or 'ant-design-vue/dist/antd.less'

// 掛載全局Message
Vue.prototype.$message = message

Vue.use(Button)

// main.js

// 引入antd
import './plugin/antd'
new Vue({
	router,
	store,
	render: h => h(App)
}).$mount('#app')

<template>
  <div>
    <a-button type="dashed" @click="onClick">
      Dashed
    </a-button>
  </div>
</template>

<script>
export default {
  mounted() {
  },
  methods: {
    onClick() {
      this.$message.info('This is a normal message');
    }
  }
}
</script>

npm install axios -S

// request.js
import axios from 'axios'
import { message } from 'ant-design-vue'
// 創(chuàng)建axios實(shí)例
// 創(chuàng)建請(qǐng)求時(shí)可以用的配置選項(xiàng)

// 配后端數(shù)據(jù)的接收方式application/json;charset=UTF-8或者application/x-www-form-urlencoded;charset=UTF-8
const contentType = 'application/json;charset=UTF-8'

const instance = axios.create({
	/**
	 * 是否攜帶cookie,注意若攜帶cookie后端必須配置
	 * 1.Access-Control-Allow-Origin為單一域名(具體到IP + port,用localhost貌似不行)
	 * 2.需要帶上響應(yīng)頭Access-Control-Allow-Credentials
	 */
	// withCredentials: true,
	timeout: 1000,
	baseURL: 'http://localhost:8000/api/v1',
	headers: {
		'Content-Type': contentType
	}
})
// axios的全局配置
instance.defaults.headers.post = {
	'Content-Type': 'application/x-www-form-urlencoded'
}
instance.defaults.headers.common = {
	'Auth-Type': 'company-web',
	'X-Requested-With': 'XMLHttpRequest',
	token: 'sdfjlsdfjlsdjflsjflsfjlskd'
}

// 添加請(qǐng)求攔截器(post只能接受字符串類型數(shù)據(jù))
instance.interceptors.request.use(
	config => {
		const token = window.sessionStorage.getItem('token')
		if (token) {
			config.headers.Authorization = token
		}
		return config
	},
	error => {
		return Promise.reject(error)
	}
)
const errorHandle = (status, other) => {
	switch (status) {
		case 400:
			message.error('信息校驗(yàn)失敗')
			break
		case 401:
			// @ts-nocheck
			message.error('認(rèn)證失敗')
			break
		case 403:
			message.error('token校驗(yàn)失敗')
			break
		case 404:
			message.error('請(qǐng)求的資源不存在')
			break
		default:
			message.error(other)
			break
	}
}

// 添加響應(yīng)攔截器
instance.interceptors.response.use(
	// 響應(yīng)包含以下信息data,status,statusText,headers,config
	res => {
		if (res.data && res.data.code !== 0 && !(res.data instanceof Blob)) {
			message.error(res.data.msg || '服務(wù)器出錯(cuò)!')
		}
		// 請(qǐng)求通用處理
		return res.data
	},
	err => {
		// message.error(err)
		const { response } = err
		if (response) {
			errorHandle(response.status, response.data)
			return Promise.reject(response)
		}
		message.error('請(qǐng)求失敗')
		return true
	}
)

export default instance

import request from './request'

export default {
  getList(model) {
    return request({
      url: '/theme/list',
      method: 'post',
      data: model
    })
  },
}

<script>
import $http from '@/http/home.js'
export default {
  mounted() {
      
  },
  methods: {
      async onSubmit(){
          const res = await $http.getList({});
          console.log(res)
      }
  }
}
</script>

{
  "name": "vite-vue2",
  "private": true,
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "devDependencies": {
    "less": "^3.9.0",
    "less-loader": "^4.1.0",
    "vite": "^2.8.0",
    "vite-plugin-vue2": "^1.9.3"
  },
  "dependencies": {
    "ant-design-vue": "^1.7.8",
    "axios": "^0.27.2",
    "qs": "^6.11.0",
    "vue": "^2.7.8",
    "vue-router": "^3.5.2",
    "vue-template-compiler": "^2.7.8",
    "vuex": "^3.6.2"
  }
}

resolve: {
	alias: [
		// 忽略其他代碼
		{ find: /ant-design-vue$/, replacement: 'ant-design-vue/dist/antd.min' } // 解決關(guān)鍵點(diǎn)。
	]
},