- vite 創(chuàng)建項(xiàng)目點(diǎn)擊查看
- 配置vite.config.js文件(此步驟暫時有問題爱榕，跳過驰后，系統(tǒng)創(chuàng)建文件暫時不更改)
- 在項(xiàng)目根目錄創(chuàng)建vite.config.js文件
- 寫入基本配置
const path = require('path')
module.exports = {
base:"./",//公共基礎(chǔ)路徑 打包路徑
resolve: {
alias:{
'@': path.resolve(__dirname, './src')//別名設(shè)置
}
},
// host: 'localhost',
port:8888,//啟動端口
// https: true, // 開啟https
open: true, // 自動開啟窗口
proxy: { // 代理配置
'/api': {
target: 'http://xxx.com',//后端服務(wù)地址
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '') // 重寫路徑
}
},
}
- 安裝ant-design-vue組件庫（可能報(bào)錯靖榕，報(bào)錯后再重裝乳规，后需要重新安裝依賴）
npm i --save ant-design-vue@next
- 在main.js中完整引入組件：
import { createApp } from 'vue'
import App from './App.vue'
//完整引入組件锤岸，僅做測試用
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'
const app = createApp(App);
app.use(Antd);
app.mount('#app')
- 按需加載ant-design-vue@next組件 點(diǎn)擊查看
- 在App.vue中添加按鈕，測試是否引入成功：
<template>
<img alt="Vue logo" src="./assets/logo.png" />
<HelloWorld msg="Hello Vue 3 + Vite" />
<a-button type="primary">Primary</a-button>
<a-button>Default</a-button>
<a-button type="dashed">Dashed</a-button>
<a-button type="danger">Danger</a-button>
<a-config-provider :auto-insert-space-in-button="false">
<a-button type="primary">按鈕</a-button>
</a-config-provider>
<a-button type="primary">按鈕</a-button>
<a-button type="link">Link</a-button>
</template>
運(yùn)行結(jié)果
- 配置路由
- 安裝 vue-router
npm install --save vue-router@next
- src目錄下 新建router文件夾
- 新建index.js和router.config.js文件
- index.js寫入內(nèi)容
import { createRouter, createWebHistory} from 'vue-router';
import routes from './router.config';
export const router = createRouter({
history: createWebHistory(),
// createWebHistory => 不帶#號,需后端支持 createWebHashHistory帶#號
routes
});
- router.config.js寫入內(nèi)容
export default [
{
path: '/',
name: 'root',
redirect: '/root',
component: () => import('../App.vue'),
children:[]
},
{
path: '/btn',
name: 'btn',
component: () => import('../views/btn.vue'),
}
]
- 在main.js中引入router并使用
import { createApp } from 'vue'
import App from './App.vue'
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'
import { router } from './router'
const app = createApp(App);
app.use(Antd);
app.use(router);
app.mount('#app')
- src目錄下切黔，創(chuàng)建views文件夾
- 在views文件夾下增加btn.vue文件
<template>
<a-button type="primary">Primary</a-button>
<a-button>Default</a-button>
<a-button type="dashed">Dashed</a-button>
<a-button type="danger">Danger</a-button>
<a-config-provider :auto-insert-space-in-button="false">
<a-button type="primary">按鈕</a-button>
</a-config-provider>
<a-button type="primary">按鈕</a-button>
<a-button type="link">Link</a-button>
</template>
- 修改App.vue文件
<template>
<img alt="Vue logo" src="./assets/logo.png" />
<HelloWorld msg="Hello Vue 3 + Vite" />
<router-link to='/btn'> btn </router-link> //路由
<router-view />
</template>
-
運(yùn)行項(xiàng)目測試
此時點(diǎn)擊btn可以正常跳轉(zhuǎn)
運(yùn)行結(jié)果 -
測試路由是否正常
顯示正常
- 使用Vuex
- 安裝vuex
npm install vuex@next --save
- src目錄下砸脊，新建store文件夾
- 在store文件夾下創(chuàng)建index.js,寫入內(nèi)容
import { createStore } from "vuex";
export default createStore({
state: {
demo:'vuex'
},
getters:{},
mutations: {},
actions: {},
modules: {}
});
- 在main.js中引入并使用
import { createApp } from 'vue'
import App from './App.vue'
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'
import { router } from './router'
import store from "./store";
const app = createApp(App);
app.use(Antd);
app.use(router);
app.use(store);
app.mount('#app')
- 在App.vue中加入代碼測試
<template>
<img alt="Vue logo" src="./assets/logo.png" />
<HelloWorld msg="Hello Vue 3 + Vite" />
<h1>{{this.$store.state.demo}}</h1> //vuex
<router-link to='/btn'> btn </router-link>
<router-view />
</template>
-
保存并重新運(yùn)行
vuex正常
- 使用axios
- 安裝axios
npm install axios --save
- 配置axios
- src目錄下，創(chuàng)建http文件夾
- 在http文件夾下創(chuàng)建index.js纬霞、axios.config.js凌埂、axios.interceptors.config.js、api.js文件
index.js寫入代碼
import axios from 'axios';
import config from './axios.config';
import {setInterceptors} from './axios.interceptors.config';
const axiosInstance = axios.create(config);
setInterceptors(axiosInstance);
export default axiosInstance
axios.config.js配置文件中寫入代碼
export default {
baseURL: '/api', // 服務(wù)器地址或配置的代理的路徑
timeout: 10000, // 超時時間
headers: {} // 配置請求頭
}
axios.interceptors.config.js攔截器文件中寫入代碼
export const setInterceptors = (axiosInstance) => {
// 請求攔截
axiosInstance.interceptors.request.use(request => {
return request;
}, error => Promise.reject(error));
// 響應(yīng)攔截
axiosInstance.interceptors.response.use(response => {
return response;
}, error => {
return Promise.reject(error.response);
})
};
api.js文件中加入你要請求的接口
import axiosInstance from './index'
// 請求接口封裝
export const axiosGet = (params) => axiosInstance.post('/demo', params);
axios已經(jīng)完全配置好了诗芜，在需要使用請求的地方直接從api.js文件中導(dǎo)出瞳抓。
