vite+ts+vue3+router4+Pinia+ElmPlus+axios+mock項目基本配置

来源:https://www.cnblogs.com/bbigger004/archive/2022/12/09/16969008.html
-Advertisement-
Play Games

1.vite+TS+Vue3 npm create vite Project name:... yourProjectName Select a framework:>>Vue Select a variant:>>Typescrit 2. 修改vite基本配置 配置 Vite {#configur ...


1.vite+TS+Vue3

npm create  vite
Project name:... yourProjectName
Select a framework:>>Vue
Select a variant:>>Typescrit

2. 修改vite基本配置

配置 Vite {#configuring-vite} | Vite中文網 (vitejs.cn)

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path';   // 編輯器提示 path 模塊找不到，可以cnpm i @types/node --dev 即可

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],     // 預設配置

  resolve: {
    alias: {
      '@': resolve(__dirname, 'src')    // 配置別名；將 @ 指向'src'目錄
    }
  },

  server: {
    port: 3000,       // 設置服務啟動的埠號；如果埠已經被使用，Vite 會自動嘗試下一個可用的埠
    open: true,       // 服務啟動後自動打開瀏覽器
    proxy: {          // 代理
      '/api': {
        target: '真實介面服務地址',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')     // 註意代理地址的重寫
      },
      // 可配置多個... 
    }
  }
})

3.安裝vue-router

cnpm install vue-router@4 --save

創建src/router/index.ts文件，使用路由懶載入，優化訪問性能。

import { createRouter, createWebHistory, createWebHashHistory, RouteRecordRaw } from 'vue-router'

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'Home',
    component: () => import('@/views/home.vue') // 建議進行路由懶載入，優化訪問性能
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('@/views/about.vue')
  }
]

const router = createRouter({
  // history: createWebHistory(),    // 使用history模式
  history: createWebHashHistory(),	 // 使用hash模式
  routes
})

export default router

main.ts 裡面引入router

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'

createApp(App).use(router).mount('#app')

在App.vue 文件中使用router-view 組件，路由匹配到組件會通過router-view 組件進行渲染。

<template>
	<div id="nav">
    	<router-link to="/">Home</router-link> |
    	<router-link to="/about">About</router-link>
	</div>
	<router-view />
<template>

4.安裝vuex 安裝pinia

npm install vuex@next --save

創建src/store/index.ts文件。

import { createStore } from 'vuex'

const defaultState = {
  count: 0
}
const store = createStore({
  state () {
    return {
      count: 10
    }
  },
  mutations: {
    increment (state: typeof defaultState) {
      state.count++
    }
  }
})
export default store;
main.ts 裡面引入vuex
import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'
import store from './store/index'

const app = createApp(App);

// 將store、router掛載到全局變數上, 方便使用
import { useStore } from "vuex";
import { useRoute } from "vue-router";
app.config.globalProperties.$store = useStore();
app.config.globalProperties.$router = useRoute();

app.use(router).use(store).mount('#app')


<template>
  <div>
    首頁 {{count}}
    <p @click="handleSkip">點我</p>
  </div>
</template>

<script>
import { getCurrentInstance, computed, ref } from 'vue';
export default {
  name: 'Home',
  setup() {
    const { proxy } = getCurrentInstance();
    // 使用store
    const count = computed(() => proxy.$store.state.count);

    const handleSkip = () => {
      // 使用router
      proxy.$router.push('/about');
    }

    return {
      count: ref(count),
      handleSkip
    }
  }
}
</script>

pinia

yarn add pinia
# 或者使用 npm
npm install pinia

main.ts

import { createApp } from 'vue'
import './style.css'
import router from './router'
import { createPinia } from 'pinia'
import App from './App.vue'

createApp(App).use(router).use(createPinia()).mount('#app')

@/store/counter.ts

import { defineStore } from 'pinia'


export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  getters: {
    double: (state) => state.count * 2,
  },
  actions: {
    increment() {
      this.count++
    },
  },
})

Home.vue

<template>
  <div><p>home</p>

  <button @click="increment">count:{{count}};double:{{double}}</button>
  
  </div>
</template>

<script setup lang="ts">
import { storeToRefs } from 'pinia';
import { useCounterStore } from '../store/counter';
const counter = useCounterStore()

const {count, double}  = storeToRefs(counter)//這樣才是響應式的
const {increment } = counter
</script>

<style scoped></style>

5.安裝 UI庫

1.Element UI Plus

一個 Vue 3 UI 框架 | Element Plus

NPM

$ npm install element-plus --save

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
 
const app = createApp(App)
 
app.use(ElementPlus)
app.mount('#app')

volar插件支持 獲取對Element UI Plus 的提示 需要在tsconfig.json做如下設置

新增"types": ["element-plus/global"]

{
  "compilerOptions": {
    // ...
    "types": ["element-plus/global"]
  }
}

2.Ant Design Vue

Ant Design of Vue - Ant Design Vue (antdv.com)

$ npm install ant-design-vue@next --save
$ yarn add ant-design-vue@next

import { createApp } from 'vue';
import Antd from 'ant-design-vue';
import App from './App';
import 'ant-design-vue/dist/antd.css';
 
const app = createApp(App);
 
app.use(Antd).mount('#app');

3.Iview

npm install view-ui-plus --save

import { createApp } from 'vue'
import ViewUIPlus from 'view-ui-plus'
import App from './App.vue'
import router from './router'
import store from './store'
import 'view-ui-plus/dist/styles/viewuiplus.css'
 
const app = createApp(App)
 
app.use(store)
  .use(router)
  .use(ViewUIPlus)
  .mount('#app')

4.Vant 移動端

npm i vant -S

import Vant from 'vant'
import 'vant/lib/index.css';
createApp(App).use(Vant).$mount('#app)

6.安裝axios

npm install axios --save

封裝公共請求方法

新建工具類 src/utils/request.ts

import axios from 'axios'

interface ApiConfig {
  body: object;
  data: object
}

async function request(url: string, options: ApiConfig) {
  // 創建 axios 實例
  const service = axios.create({
    baseURL: "", // api base_url
    timeout: 6000 // 請求超時時間
  });
  // 請求攔截
  service.interceptors.request.use(config => {
    // 這裡可設置請求頭等信息
    if (options && options.body) {
      config.data = options.body;
    }
    return config;
  });
  // 返回攔截
  service.interceptors.response.use(response => {
    // 這裡可進行返回數據的格式化等操作
    return response.data;
  });
  return service(url, options);
}
export default request;

使用方法

<script>
import request from "@/utils/request.ts"

export default {
  setup() {
    request('/api/getNewsList').then(res => {
        console.log(res);
        // to do...
    });
  }
}
</script>

7.安裝mockjs

安裝

mock 模擬數據我們選用 mockjs 插件，vite 中需要安裝 vite-plugin-mock 插件。

npm install mockjs --save

npm install vite-plugin-mock --save-dev

vite.config.ts 中引用插件

import { viteMockServe } from 'vite-plugin-mock'

export default defineConfig({
  plugins: [
    vue(),
    viteMockServe({
      supportTs: true,
      mockPath: './src/mock'
    })],   
})

使用mock

新建文件src/mock/index.ts，編寫一下代碼：

import { MockMethod } from 'vite-plugin-mock'
export default [
  {
    url: '/api/getNewsList',
    method: 'get',
    response: () => {
      return {
          code: 0,
          message: 'success',
          data: [
          	{
          		title: '標題111',
          		content: '內容1111'
          	},
          	{
          		title: '標題222',
          		content: '內容2222'
          	}
          ]
      }
    }
  },
  // more...
] as MockMethod[]

然後我們就可以在工程中進行 mock 數據的訪問了，這裡我們使用之前創建公共 api 請求方法 request。

<script>
import request from "@/utils/request.ts"

export default {
  setup() {
    request('/api/getNewsList').then(res => {
        console.log(res);
        // to do...
    });
  }
}
</script>

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 雲資料庫技術行業動態：ClickHouse Cloud正式GA或有融資；openGauss社區引入新成員
    行業動態 ClickHouse Cloud正式GA，同時，B輪融資得到進一步增加 這是由ClickHouse官方推出雲服務，啟用新功能變數名稱：clickhouse.cloud ，類似於MongoDB的Atlas服務。目前支持在AWS構建，從Roadmap看，很快會推出GCP和Azure的版本。當前，官方會 ...
  • MYSQL-INNODB索引構成詳解
    作者：鄭啟龍 摘要： 對於MYSQL的INNODB存儲引擎的索引，大家是不陌生的，都能想到是 B+樹結構，可以加速SQL查詢。但對於B+樹索引，它到底“長”得什麼樣子，它具體如何由一個個位元組構成的，這些的基礎知識鮮有人深究。本篇文章從MYSQL行記錄開始說起，層層遞進，包括數據頁，B+樹聚簇索引，B ...
  • 1.5.5 HDFS讀寫解析-hadoop-最全最完整的保姆級的java大數據學習資料
    1.5.5 HDFS讀寫解析 1.5.5.1 HDFS讀數據流程 客戶端通過Distributed FileSystem向NameNode請求下載文件，NameNode通過查詢元數據， 找到文件塊所在的DataNode地址。 挑選一臺DataNode（就近原則，然後隨機）伺服器，請求讀取數據。 Da ...
  • JavaScript：變數的作用域，window對象，關鍵字var/let與function
    主要介紹關鍵字var/let/function在聲明變數和函數的時候，生命周期和作用域的細微區別，以及和window對象的關係 ...
  • 第一百一十一篇:基本引用類型Date
    好家伙，本篇為《JS高級程式設計》第五章的學習筆記 1.基本引用類型 引用值（或者對象）是某個特定引用類型的實例，在ECMAScript中，引用類型是把數據和功能組織到一起的結構，（像極了“類”） 經常被人錯誤的稱作“類”。 雖然從技術上講JavaScript是一門面向對象語言，但是ECMAScri ...
  • Vue中關於數組與對象修改觸發頁面更新的機制與原理簡析
    Vue中關於數組與對象修改觸發頁面更新的機制與原理簡析 相關問題 數組 使用索引直接賦值與直接修改數組length時，不會觸發頁面更新。 例如： <script> export default { name: "HomeView", data: () => ({ list1: ["A", "B"], ...
  • day35-JSON&Ajax03
    JSON&Ajax03 4.jQuery的Ajax請求 原生Ajax請求問題分析： 編寫原生的Ajax要寫很多的代碼，還要考慮瀏覽器相容問題，使用不方便 在實際工作中，一般使用JavaScript的框架（比如jquery）發動Ajax請求，從而解決這個問題。 4.1jQuery Ajax操作方法 在 ...
  • 教你用CSS實現表單部件
    案例介紹 歡迎來到我的小院，我是霍大俠，恭喜你今天又要進步一點點了！我們來用CSS編程實戰案例，使用列表標簽完成一個下拉菜單樣式的表單部件。 案例演示 運行代碼後在瀏覽器彈出由標簽組成的下拉菜單樣式的列表。 源碼學習 進入核心代碼學習，我們先來看HTML模板中的代碼。 <!-- 有個小院-興趣編程 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類