欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

使用vue3.x+vite+element-ui+vue-router+vuex+axios搭建項(xiàng)目

 更新時(shí)間:2021年08月24日 11:39:13   作者:YuShiYue  
因?yàn)関ue3出了一段時(shí)間了,element也出了基于vue3.x版本的element-plus,這篇文章就拿他們搭建一個(gè)項(xiàng)目,希望能給你帶來(lái)幫助

一. 參考文檔

vite官方文檔

vue3.x官方文檔

vue-router4.x官方文檔

vuex4.x官方文檔

element-ui3.x官方文檔

Ant Design Vue2.x官方文檔

axios文檔

二. 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

image-20210818170557952

  • 運(yùn)行
npm run dev 

# or
yarn dev

image-20210818170733034

三. 配置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)證是否配置成功

image-20210818171148345

如果組件要按需引入的話可以參考文檔介紹

image-20210818171247339

四. 配置vue-router

從vue2遷移

安裝

npm install vue-router@4

創(chuàng)建src/router/index.js文件

image-20210818172342806

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文件

image-20210818172605669

經(jīng)過(guò)以上的過(guò)程,訪問(wèn)http://localhost:3000/demo 就可以看到一下界面,表明我們的路由配置成功~

image-20210818172727082

五. 配置vuex 安裝

npm install vuex@next --save

創(chuàng)建src/store/index.js文件

image-20210818173206269

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中查看是否配置成功

image-20210818173322287

能夠成功打印測(cè)配置成功

image-20210818173340721

六. 配置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

image-20210818175532400

創(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'
    }
  })
}

image-20210818175614712

在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)求成功

image-20210818175730709

七. 總結(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)容!

相關(guān)文章

  • java的jps命令使用詳解

    java的jps命令使用詳解

    這篇文章介紹了java的jps命令使用詳解,對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2021-12-12
  • Java如何判斷一個(gè)空對(duì)象的常見(jià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)備工作

    零基礎(chǔ)寫(xiě)Java知乎爬蟲(chóng)之準(zhǔn)備工作

    上個(gè)系列我們從易到難介紹了如何使用python編寫(xiě)爬蟲(chóng),小伙伴們反響挺大,這個(gè)系列我們來(lái)研究下使用Java編寫(xiě)知乎爬蟲(chóng),小伙伴們可以對(duì)比這看下。
    2014-11-11
  • Mybatis-Plus 通用CRUD的詳細(xì)操作

    Mybatis-Plus 通用CRUD的詳細(xì)操作

    這篇文章主要介紹了Mybatis-Plus 通用CRUD的詳細(xì)操作,包括插入操作,更新操作及刪除操作等,針對(duì)每種操作通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下
    2021-09-09
  • 5分鐘快速學(xué)會(huì)spring boot整合Mybatis的方法

    5分鐘快速學(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í)用法)

    這篇文章主要介紹了淺談MyBatis循環(huán)Map(高級(jí)用法),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2020-09-09
  • java中Lambda常用場(chǎng)景代碼實(shí)例

    java中Lambda常用場(chǎng)景代碼實(shí)例

    這篇文章主要介紹了java中Lambda常用場(chǎng)景,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2019-04-04
  • Java中反射詳解

    Java中反射詳解

    本文主要介紹了Java中反射的相關(guān)知識(shí)。具有很好的參考價(jià)值,下面跟著小編一起來(lái)看下吧
    2017-02-02
  • WebDriver實(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)搜索

    這篇文章主要介紹了WebDriver實(shí)現(xiàn)自動(dòng)化打開(kāi)IE中的google網(wǎng)頁(yè)并實(shí)現(xiàn)搜索,需要的朋友可以參考下
    2014-04-04
  • 一文搞懂MyBatis一級(jí)緩存和二級(jí)緩存

    一文搞懂MyBatis一級(jí)緩存和二級(jí)緩存

    本文主要介紹了一文搞懂MyBatis一級(jí)緩存和二級(jí)緩存,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2023-05-05

最新評(píng)論