使用vue3.x+vite+element-ui+vue-router+vuex+axios搭建項(xiàng)目
一. 參考文檔
二. vite搭建項(xiàng)目
- 安裝
# npm 安裝 npm init vite@latest # yarn 安裝 yarn create vite # 快速安裝vue模板項(xiàng)目 yarn create vite my-vue-app --template vue npm init vite@latest my-vue-app -- --template vue
- 運(yùn)行
npm run dev # or yarn dev
三. 配置element-ui
- 下載包
npm install element-plus --save
修改src/main.js
import { createApp } from 'vue' import ElementPlus from 'element-plus'; import 'element-plus/lib/theme-chalk/index.css'; import App from './App.vue' const app = createApp(App) app.use(ElementPlus) app.mount('#app')
驗(yàn)證是否配置成功
如果組件要按需引入的話(huà)可以參考文檔介紹
四. 配置vue-router
從vue2遷移
安裝
npm install vue-router@4
創(chuàng)建src/router/index.js文件
import { createRouter, createWebHistory } from 'vue-router' const routes = [ { path: '/demo', name: 'demo', component: () => import('../views/demo.vue') } ] const router = createRouter({ history: createWebHistory(), routes }) export default router
修改main.js
import { createApp } from 'vue' import ElementPlus from 'element-plus'; import 'element-plus/lib/theme-chalk/index.css'; // 引入路由配置 import router from './router/index' import App from './App.vue' const app = createApp(App) app.use(ElementPlus) // 注冊(cè) app.use(router) app.mount('#app')
修改App.vue添加路由視圖
<template> <el-button type="primary">按鈕</el-button> <router-view></router-view> </template> <script> export default { name: 'app' } </script>
創(chuàng)建src/views/demo.vue文件
經(jīng)過(guò)以上的過(guò)程,訪問(wèn)http://localhost:3000/demo 就可以看到一下界面,表明我們的路由配置成功~
五. 配置vuex 安裝
npm install vuex@next --save
創(chuàng)建src/store/index.js文件
import { createStore } from "vuex"; const store = createStore({ state () { return { app: '我是app' } }, mutations: { }, actions: { } }) export default store
修改src/main.js
import { createApp } from 'vue' import ElementPlus from 'element-plus'; import 'element-plus/lib/theme-chalk/index.css'; import router from './router/index' // 引入文件 import store from './store/index' import App from './App.vue' const app = createApp(App) app.use(ElementPlus) app.use(router) // 注冊(cè) app.use(store) app.mount('#app')
在App.vue中查看是否配置成功
能夠成功打印測(cè)配置成功
六. 配置axios
安裝
npm install axios -S
創(chuàng)建src/utils/request.js
import axios from 'axios' const services = axios.create({ baseURL: 'https://api.apiopen.top', timeout: 6000 }) // 請(qǐng)求攔截 services.interceptors.request.use(config => { // 在這可以添加一些請(qǐng)求頭的邏輯,如配置token return config }, error => { return Promise.reject(error) }) // 響應(yīng)攔截 services.interceptors.response.use(response => { // 在這可以根據(jù)實(shí)際后臺(tái)的響應(yīng)值去進(jìn)行判斷,如code: 0 或者登錄失效跳轉(zhuǎn)到登錄頁(yè)等 return response.data }, error => { return Promise.reject(error) }) export default services
創(chuàng)建src/api/app.js配置氣你跪求方法
import request from '../utils/request' export const send = () => { return request({ url: '/getJoke', method: 'get', params: { page: 1, count: 2, type: 'video' } }) }
在App.vue引入測(cè)試
<template> <el-button type="primary">按鈕</el-button> <router-view></router-view> </template> <script> // 引入請(qǐng)求方法 import { send } from "./api/app"; export default { name: "app", async mounted() { console.log("store>>>", this.$store.state.app); // 請(qǐng)求 const res = await send() console.log('res>>>', res) }, }; </script>
查看瀏覽器是否請(qǐng)求成功
七. 總結(jié)
經(jīng)過(guò)以上幾步就可以搭建一個(gè)簡(jiǎn)單的vue工程化項(xiàng)目,但是實(shí)際開(kāi)發(fā)當(dāng)中肯定不能這么簡(jiǎn)單,比如別名的配置,這個(gè)時(shí)候就需要修改vite.config.js去進(jìn)行別名的配置,還有路由權(quán)限的控制以及ui庫(kù)sass變量的替換等等…
本篇文章就到這里了,希望能給你帶來(lái)幫助,也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
- vue3使用axios并封裝axios請(qǐng)求的詳細(xì)步驟
- Vue3 axios配置以及cookie的使用方法實(shí)例演示
- 前端vue3使用axios調(diào)用后端接口的實(shí)現(xiàn)方法
- 關(guān)于vue3.0使用axios報(bào)錯(cuò)問(wèn)題
- Vue3在Setup中使用axios請(qǐng)求獲取的值方式
- Vue3如何使用axios發(fā)起網(wǎng)絡(luò)請(qǐng)求
- 關(guān)于Vue3使用axios的配置教程詳解
- Vue3中使用typescript封裝axios的實(shí)例詳解
- vue3 axios安裝及使用示例詳解
相關(guān)文章
Java如何判斷一個(gè)空對(duì)象的常見(jiàn)方法
在Java中判斷對(duì)象是否為空是一項(xiàng)重要的編程技巧,可以有效防止空指針異常的發(fā)生,下面這篇文章主要給大家介紹了關(guān)于利用Java如何判斷一個(gè)空對(duì)象的相關(guān)資料,需要的朋友可以參考下2024-01-01零基礎(chǔ)寫(xiě)Java知乎爬蟲(chóng)之準(zhǔn)備工作
上個(gè)系列我們從易到難介紹了如何使用python編寫(xiě)爬蟲(chóng),小伙伴們反響挺大,這個(gè)系列我們來(lái)研究下使用Java編寫(xiě)知乎爬蟲(chóng),小伙伴們可以對(duì)比這看下。2014-11-115分鐘快速學(xué)會(huì)spring boot整合Mybatis的方法
這篇文章主要給大家介紹了如何通過(guò)5分鐘快速學(xué)會(huì)spring boot整合Mybatis的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用spring boot具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12淺談MyBatis循環(huán)Map(高級(jí)用法)
這篇文章主要介紹了淺談MyBatis循環(huán)Map(高級(jí)用法),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09java中Lambda常用場(chǎng)景代碼實(shí)例
這篇文章主要介紹了java中Lambda常用場(chǎng)景,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04WebDriver實(shí)現(xiàn)自動(dòng)化打開(kāi)IE中的google網(wǎng)頁(yè)并實(shí)現(xiàn)搜索
這篇文章主要介紹了WebDriver實(shí)現(xiàn)自動(dòng)化打開(kāi)IE中的google網(wǎng)頁(yè)并實(shí)現(xiàn)搜索,需要的朋友可以參考下2014-04-04