Vue2快速實(shí)現(xiàn)px轉(zhuǎn)vw適配方式
更新時(shí)間：2025年10月28日 10:01:09 作者：m0_63466615
本文介紹了如何在Vue2+VueCLI項(xiàng)目中使用postcss-px-to-viewport-8-plugin插件,將px單位自動(dòng)轉(zhuǎn)換為vw單位,實(shí)現(xiàn)響應(yīng)式設(shè)計(jì),詳細(xì)步驟包括插件安裝、VueCLI配置、使用示例和驗(yàn)證方法,以及與Vue3的配置差異
Vue 2 + Vue CLI 項(xiàng)目 px 轉(zhuǎn) vw
概述
本指南詳細(xì)介紹如何在 Vue 2 + Vue CLI 項(xiàng)目中使用 postcss-px-to-viewport-8-plugin 插件，實(shí)現(xiàn)自動(dòng)將 px 單位轉(zhuǎn)換為 vw 單位的響應(yīng)式設(shè)計(jì)。
第一步：插件安裝
1.1 安裝命令
# 使用 npm 安裝 npm install postcss-px-to-viewport-8-plugin --save-dev # 或使用 yarn 安裝 yarn add postcss-px-to-viewport-8-plugin --dev # 或使用 pnpm 安裝 pnpm add postcss-px-to-viewport-8-plugin --save-dev
1.2 驗(yàn)證安裝
安裝完成后，檢查 package.json 文件中是否包含該依賴：
{
"devDependencies": {
"postcss-px-to-viewport-8-plugin": "^1.2.5"
}
}
第二步：Vue CLI 配置方法
2.1 配置 vue.config.js（推薦方法）
在項(xiàng)目根目錄創(chuàng)建或修改 vue.config.js 文件：
const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
transpileDependencies: true,
css: {
loaderOptions: {
postcss: {
postcssOptions: {
plugins: [
require("postcss-px-to-viewport-8-plugin")({
// 設(shè)計(jì)稿的視口寬度
viewportWidth: 1920,
// 設(shè)計(jì)稿的視口高度（可選）
viewportHeight: 1080,
// 轉(zhuǎn)換后的單位精度
unitPrecision: 3,
// 需要轉(zhuǎn)換的CSS屬性，* 表示所有屬性
propList: ["*"],
// 轉(zhuǎn)換后的視口單位
viewportUnit: "vw",
// 字體相關(guān)屬性轉(zhuǎn)換后的單位
fontViewportUnit: "vw",
// 不需要轉(zhuǎn)換的選擇器
selectorBlackList: [".ignore", ".hairlines"],
// 最小轉(zhuǎn)換的像素值，小于這個(gè)值的px不會(huì)被轉(zhuǎn)換
minPixelValue: 1,
// 是否轉(zhuǎn)換媒體查詢中的px
mediaQuery: false,
// 是否直接替換屬性值而不添加備用屬性
replace: true,
// 忽略某些文件夾下的文件或特定文件
exclude: [/node_modules/, /\.min\.css$/],
// 只轉(zhuǎn)換匹配的文件（可選）
include: undefined,
// 是否添加橫屏?xí)r的媒體查詢
landscape: false,
// 橫屏?xí)r使用的單位
landscapeUnit: "vw",
// 橫屏?xí)r的視口寬度
landscapeWidth: 568,
}),
],
},
},
},
},
});
2.2 配置 postcss.config.js（備選方法）
如果您更喜歡單獨(dú)的 PostCSS 配置文件，可以創(chuàng)建 postcss.config.js：
module.exports = {
plugins: {
"postcss-px-to-viewport-8-plugin": {
viewportWidth: 1920,
viewportHeight: 1080,
unitPrecision: 3,
propList: ["*"],
viewportUnit: "vw",
fontViewportUnit: "vw",
selectorBlackList: [".ignore", ".hairlines"],
minPixelValue: 1,
mediaQuery: false,
replace: true,
exclude: [/node_modules/, /\.min\.css$/],
include: undefined,
landscape: false,
landscapeUnit: "vw",
landscapeWidth: 568,
},
},
};
第三步：使用示例和驗(yàn)證方法
3.1 創(chuàng)建測(cè)試組件
創(chuàng)建 src/components/PxToVwDemo.vue：
<template>
<div class="responsive-test-page">
<!-- 頭部區(qū)域 -->
<header class="hero-section">
<div class="hero-content">
<h1 class="hero-title">{{ msg }}</h1>
<p class="hero-subtitle">PostCSS px-to-viewport 插件測(cè)試頁面</p>
<div class="hero-stats">
<div class="stat-item">
<span class="stat-number">1920</span>
<span class="stat-label">桌面分辨率</span>
</div>
<div class="stat-item">
<span class="stat-number">100%</span>
<span class="stat-label">響應(yīng)式適配</span>
</div>
<div class="stat-item">
<span class="stat-number">PX→VW</span>
<span class="stat-label">自動(dòng)轉(zhuǎn)換</span>
</div>
</div>
</div>
</header>
<!-- 特色卡片 -->
<section class="featured-card">
<div class="card-container">
<div class="feature-card">
<div class="card-icon">??</div>
<h2 class="card-title">響應(yīng)式設(shè)計(jì)測(cè)試</h2>
<p class="card-description">
這個(gè)頁面使用純px單位編寫，通過postcss-px-to-viewport-8-plugin插件自動(dòng)轉(zhuǎn)換為vw單位，
實(shí)現(xiàn)在不同分辨率下的完美適配效果。
</p>
<div class="card-tags">
<span class="tag">Vue2</span>
<span class="tag">PostCSS</span>
<span class="tag">響應(yīng)式</span>
</div>
</div>
</div>
</section>
<!-- 功能卡片網(wǎng)格 -->
<section class="features-grid">
<div class="grid-container">
<div class="feature-item">
<div class="feature-icon">??</div>
<h3 class="feature-title">移動(dòng)優(yōu)先</h3>
<p class="feature-desc">基于移動(dòng)設(shè)備優(yōu)先的響應(yīng)式設(shè)計(jì)理念</p>
</div>
<div class="feature-item">
<div class="feature-icon">??</div>
<h3 class="feature-title">桌面適配</h3>
<p class="feature-desc">完美適配各種桌面顯示器分辨率</p>
</div>
<div class="feature-item">
<div class="feature-icon">?</div>
<h3 class="feature-title">自動(dòng)轉(zhuǎn)換</h3>
<p class="feature-desc">px單位自動(dòng)轉(zhuǎn)換為vw視口單位</p>
</div>
<div class="feature-item">
<div class="feature-icon">??</div>
<h3 class="feature-title">精確控制</h3>
<p class="feature-desc">精確控制元素在不同屏幕的顯示效果</p>
</div>
</div>
</section>
<!-- 按鈕組 -->
<section class="button-section">
<div class="button-container">
<button class="btn btn-primary">主要按鈕</button>
<button class="btn btn-secondary">次要按鈕</button>
<button class="btn btn-outline">邊框按鈕</button>
<button class="btn btn-gradient">漸變按鈕</button>
</div>
</section>
<!-- 測(cè)試信息 -->
<section class="test-info">
<div class="info-container">
<div class="info-card">
<h3 class="info-title">測(cè)試說明</h3>
<ul class="info-list">
<li>所有樣式使用px單位編寫</li>
<li>插件自動(dòng)轉(zhuǎn)換為vw單位</li>
<li>在1920x1080和筆記本分辨率下測(cè)試</li>
<li>觀察元素比例是否保持一致</li>
</ul>
</div>
</div>
</section>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
}
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
/* 全局重置和基礎(chǔ)樣式 */
* {
box-sizing: border-box;
}
.responsive-test-page {
min-height: 100vh;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
font-family: 'Arial', sans-serif;
padding: 0;
margin: 0;
}
/* 頭部區(qū)域樣式 */
.hero-section {
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
padding: 80px 40px;
text-align: center;
color: white;
position: relative;
overflow: hidden;
}
.hero-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="2" fill="rgba(255,255,255,0.1)"/></svg>')
repeat;
background-size: 50px 50px;
animation: float 20s infinite linear;
}
@keyframes float {
0% {
transform: translateX(0) translateY(0);
}
100% {
transform: translateX(-50px) translateY(-50px);
}
}
.hero-content {
position: relative;
z-index: 1;
max-width: 1200px;
margin: 0 auto;
}
.hero-title {
font-size: 48px;
font-weight: 700;
margin: 0 0 16px 0;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
animation: slideInDown 1s ease-out;
}
@keyframes slideInDown {
from {
opacity: 0;
transform: translateY(-30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.hero-subtitle {
font-size: 20px;
margin: 0 0 40px 0;
opacity: 0.9;
animation: slideInUp 1s ease-out 0.3s both;
}
@keyframes slideInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 0.9;
transform: translateY(0);
}
}
.hero-stats {
display: flex;
justify-content: center;
gap: 60px;
flex-wrap: wrap;
animation: fadeIn 1s ease-out 0.6s both;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.stat-item {
text-align: center;
}
.stat-number {
display: block;
font-size: 32px;
font-weight: 700;
margin-bottom: 8px;
color: #fff;
}
.stat-label {
font-size: 14px;
opacity: 0.8;
text-transform: uppercase;
letter-spacing: 1px;
}
/* 特色卡片樣式 */
.featured-card {
padding: 60px 40px;
background: rgba(255, 255, 255, 0.1);
}
.card-container {
max-width: 1200px;
margin: 0 auto;
}
.feature-card {
background: white;
border-radius: 20px;
padding: 40px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
text-align: center;
transform: translateY(0);
transition: all 0.3s ease;
}
.feature-card:hover {
transform: translateY(-10px);
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15);
}
.card-icon {
font-size: 64px;
margin-bottom: 24px;
display: block;
}
.card-title {
font-size: 28px;
color: #333;
margin: 0 0 20px 0;
font-weight: 600;
}
.card-description {
font-size: 16px;
line-height: 1.6;
color: #666;
margin: 0 0 30px 0;
}
.card-tags {
display: flex;
justify-content: center;
gap: 12px;
flex-wrap: wrap;
}
.tag {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 8px 16px;
border-radius: 20px;
font-size: 14px;
font-weight: 500;
}
/* 功能網(wǎng)格樣式 */
.features-grid {
padding: 80px 40px;
background: rgba(255, 255, 255, 0.05);
}
.grid-container {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 30px;
}
.feature-item {
background: white;
border-radius: 16px;
padding: 32px 24px;
text-align: center;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.feature-item::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
transition: left 0.5s;
}
.feature-item:hover::before {
left: 100%;
}
.feature-item:hover {
transform: translateY(-8px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}
.feature-icon {
font-size: 48px;
margin-bottom: 20px;
display: block;
}
.feature-title {
font-size: 20px;
color: #333;
margin: 0 0 12px 0;
font-weight: 600;
}
.feature-desc {
font-size: 14px;
color: #666;
line-height: 1.5;
margin: 0;
}
/* 按鈕組樣式 */
.button-section {
padding: 60px 40px;
text-align: center;
background: rgba(255, 255, 255, 0.1);
}
.button-container {
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
gap: 20px;
flex-wrap: wrap;
}
.btn {
padding: 16px 32px;
border: none;
border-radius: 50px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
text-transform: uppercase;
letter-spacing: 1px;
position: relative;
overflow: hidden;
}
.btn::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: rgba(255, 255, 255, 0.3);
border-radius: 50%;
transform: translate(-50%, -50%);
transition: width 0.3s, height 0.3s;
}
.btn:hover::before {
width: 300px;
height: 300px;
}
.btn-primary {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 12px 30px rgba(102, 126, 234, 0.6);
}
.btn-secondary {
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
color: white;
box-shadow: 0 8px 20px rgba(240, 147, 251, 0.4);
}
.btn-secondary:hover {
transform: translateY(-2px);
box-shadow: 0 12px 30px rgba(240, 147, 251, 0.6);
}
.btn-outline {
background: transparent;
color: white;
border: 2px solid white;
}
.btn-outline:hover {
background: white;
color: #333;
transform: translateY(-2px);
}
.btn-gradient {
background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
color: #333;
box-shadow: 0 8px 20px rgba(252, 182, 159, 0.4);
}
.btn-gradient:hover {
transform: translateY(-2px);
box-shadow: 0 12px 30px rgba(252, 182, 159, 0.6);
}
/* 測(cè)試信息樣式 */
.test-info {
padding: 60px 40px;
background: rgba(255, 255, 255, 0.05);
}
.info-container {
max-width: 800px;
margin: 0 auto;
}
.info-card {
background: white;
border-radius: 16px;
padding: 40px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}
.info-title {
font-size: 24px;
color: #333;
margin: 0 0 24px 0;
font-weight: 600;
text-align: center;
}
.info-list {
list-style: none;
padding: 0;
margin: 0;
}
.info-list li {
padding: 12px 0;
border-bottom: 1px solid #eee;
font-size: 16px;
color: #666;
position: relative;
padding-left: 30px;
}
.info-list li:last-child {
border-bottom: none;
}
.info-list li::before {
content: '?';
position: absolute;
left: 0;
color: #4facfe;
font-weight: bold;
font-size: 18px;
}
/* 響應(yīng)式設(shè)計(jì) */
@media (max-width: 768px) {
.hero-title {
font-size: 36px;
}
.hero-subtitle {
font-size: 18px;
}
.hero-stats {
gap: 30px;
}
.stat-number {
font-size: 24px;
}
.grid-container {
grid-template-columns: 1fr;
gap: 20px;
}
.button-container {
flex-direction: column;
align-items: center;
}
.btn {
width: 200px;
}
}
</style>
3.3 驗(yàn)證方法
啟動(dòng)開發(fā)服務(wù)器：
npm run serve
打開瀏覽器開發(fā)者工具：
- 按 F12 打開開發(fā)者工具
- 切換到 Elements/元素面板
- 查看編譯后的 CSS
驗(yàn)證轉(zhuǎn)換結(jié)果：
- 原始 CSS：
font-size: 24px - 轉(zhuǎn)換后：
font-size: 6.4vw
測(cè)試響應(yīng)式效果：
- 調(diào)整瀏覽器窗口大小
- 觀察頁面元素是否按比例縮放
- 使用設(shè)備模擬器測(cè)試不同屏幕尺寸
Vue 2 與 Vue 3 的配置差異
Vue 2 (Vue CLI) 配置特點(diǎn)
- 配置文件：使用
vue.config.js而不是vite.config.js - PostCSS 配置路徑：
css.loaderOptions.postcss.postcssOptions.plugins - 模塊導(dǎo)入：使用
require()而不是import - 構(gòu)建工具：基于 Webpack 而不是 Vite
Vue 3 (Vite) 配置特點(diǎn)
- 配置文件：使用
vite.config.js - PostCSS 配置路徑：
css.postcss.plugins - 模塊導(dǎo)入：使用
importES 模塊語法 - 構(gòu)建工具：基于 Vite，構(gòu)建速度更快
配置對(duì)比
Vue 2 配置：
// vue.config.js
const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
css: {
loaderOptions: {
postcss: {
postcssOptions: {
plugins: [
require("postcss-px-to-viewport-8-plugin")({
viewportWidth: 375,
// ...其他配置
}),
],
},
},
},
},
});
Vue 3 配置：
// vite.config.js
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import postcssViewport from "postcss-px-to-viewport-8-plugin";
export default defineConfig({
plugins: [vue()],
css: {
postcss: {
plugins: [
postcssViewport({
viewportWidth: 375,
// ...其他配置
}),
],
},
},
});
配置參數(shù)詳細(xì)說明
核心參數(shù)
| 參數(shù)名 | 類型 | 默認(rèn)值 | 說明 |
|---|---|---|---|
| viewportWidth | Number | 320 | 設(shè)計(jì)稿的視口寬度 |
| viewportHeight | Number | 568 | 設(shè)計(jì)稿的視口高度 |
| unitPrecision | Number | 5 | 轉(zhuǎn)換后的單位精度 |
| propList | Array | [‘*’] | 需要轉(zhuǎn)換的 CSS 屬性列表 |
| viewportUnit | String | ‘vw’ | 轉(zhuǎn)換后的視口單位 |
| fontViewportUnit | String | ‘vw’ | 字體相關(guān)屬性轉(zhuǎn)換后的單位 |
過濾參數(shù)
| 參數(shù)名 | 類型 | 默認(rèn)值 | 說明 |
|---|---|---|---|
| selectorBlackList | Array | [] | 不需要轉(zhuǎn)換的選擇器列表 |
| minPixelValue | Number | 1 | 最小轉(zhuǎn)換的像素值 |
| exclude | RegExp/Array | undefined | 忽略某些文件 |
| include | RegExp/Array | undefined | 只轉(zhuǎn)換匹配的文件 |
常見問題和解決方案
問題 1：插件不生效，px 沒有被轉(zhuǎn)換
可能原因：
- vue.config.js 配置錯(cuò)誤
- 文件被 exclude 規(guī)則排除
- 選擇器在黑名單中
解決方案：
- 檢查 vue.config.js 配置路徑是否正確
- 確認(rèn) CSS 文件路徑?jīng)]有被 exclude
- 重啟開發(fā)服務(wù)器
# 重啟開發(fā)服務(wù)器 npm run serve
問題 2：與 Vue CLI 內(nèi)置 PostCSS 插件沖突
解決方案：
// vue.config.js
module.exports = defineConfig({
css: {
loaderOptions: {
postcss: {
postcssOptions: {
plugins: [
// 確保px-to-viewport插件在其他插件之前
require("postcss-px-to-viewport-8-plugin")({
viewportWidth: 375,
// ...配置
}),
// 其他PostCSS插件
],
},
},
},
},
});
問題 3：第三方組件庫樣式被錯(cuò)誤轉(zhuǎn)換
解決方案：
// 排除常見的Vue 2組件庫 exclude: [ /node_modules/, /element-ui/, /ant-design-vue/, /vant/, /iview/, /view-design/ ], // 或使用選擇器黑名單 selectorBlackList: [ '.el-', // Element UI '.ant-', // Ant Design Vue '.van-', // Vant '.ivu-' // iView/View Design ]
問題 4：Vue 2 生命周期鉤子中的響應(yīng)式處理
Vue 2 特有的注意事項(xiàng)：
// Vue 2組件中正確處理視口變化
export default {
data() {
return {
viewportWidth: window.innerWidth,
};
},
mounted() {
// Vue 2中使用mounted而不是onMounted
window.addEventListener("resize", this.handleResize);
},
beforeDestroy() {
// Vue 2中使用beforeDestroy而不是onUnmounted
window.removeEventListener("resize", this.handleResize);
},
methods: {
handleResize() {
this.viewportWidth = window.innerWidth;
},
},
};
Vue 2 項(xiàng)目最佳實(shí)踐
1. 與 Vue 2 生態(tài)系統(tǒng)集成
// 與Element UI集成 selectorBlackList: [ '.el-', // Element UI組件 '.el-message', // 消息組件 '.el-dialog' // 對(duì)話框組件 ], // 與Vuetify集成 selectorBlackList: [ '.v-', // Vuetify組件 '.vuetify' // Vuetify容器 ]
2. Vue 2 項(xiàng)目結(jié)構(gòu)建議
src/
├── components/
│ ├── common/ # 通用組件
│ └── responsive/ # 響應(yīng)式組件
├── styles/
│ ├── variables.css # CSS變量
│ ├── mixins.css # CSS混合
│ └── responsive.css # 響應(yīng)式樣式
└── utils/
└── viewport.js # 視口工具函數(shù)
3. Vue 2 響應(yīng)式工具函數(shù)
// src/utils/viewport.js
export const viewport = {
// 獲取當(dāng)前視口寬度
getWidth() {
return window.innerWidth;
},
// 計(jì)算px轉(zhuǎn)vw
pxToVw(px, designWidth = 375) {
return ((px / designWidth) * 100).toFixed(3) + "vw";
},
// 判斷是否為移動(dòng)端
isMobile() {
return window.innerWidth <= 768;
},
// 添加視口變化監(jiān)聽器
addResizeListener(callback) {
window.addEventListener("resize", callback);
},
// 移除視口變化監(jiān)聽器
removeResizeListener(callback) {
window.removeEventListener("resize", callback);
},
};
4. Vue 2 混入(Mixin)支持
// src/mixins/responsive.js
export const responsiveMixin = {
data() {
return {
viewportWidth: window.innerWidth,
isMobile: window.innerWidth <= 768,
};
},
mounted() {
this.handleResize = this.handleResize.bind(this);
window.addEventListener("resize", this.handleResize);
},
beforeDestroy() {
window.removeEventListener("resize", this.handleResize);
},
methods: {
handleResize() {
this.viewportWidth = window.innerWidth;
this.isMobile = window.innerWidth <= 768;
},
pxToVw(px, designWidth = 375) {
return ((px / designWidth) * 100).toFixed(3) + "vw";
},
},
};
// 在組件中使用
export default {
mixins: [responsiveMixin],
// ...組件其他選項(xiàng)
};
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
Vue項(xiàng)目中通過路由守衛(wèi)實(shí)現(xiàn)自動(dòng)取消Pending請(qǐng)求功能
現(xiàn)代Web應(yīng)用中,當(dāng)用戶在頁面間快速切換時(shí),常常會(huì)遇到一些正在進(jìn)行的網(wǎng)絡(luò)請(qǐng)求繼續(xù)執(zhí)行的問題,本文將介紹如何在Vue項(xiàng)目中通過路由守衛(wèi)實(shí)現(xiàn)自動(dòng)取消pending請(qǐng)求的功能,提高應(yīng)用的性能和用戶體驗(yàn),需要的朋友可以參考下2026-04-04
基于Vue框架vux組件庫實(shí)現(xiàn)上拉刷新功能
這篇文章主要為大家詳細(xì)介紹了基于Vue框架vux組件庫實(shí)現(xiàn)上拉刷新功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11
uniapp微信小程序webview和h5數(shù)據(jù)通信代碼示例
這篇文章主要介紹了uniapp微信小程序webview和h5數(shù)據(jù)通信的相關(guān)資料,文章還列出了項(xiàng)目的結(jié)構(gòu),包括微信小程序和h5端的主要文件和組件,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-01-01
vue.config.js使用代理配置真實(shí)請(qǐng)求url方式
這篇文章主要介紹了vue.config.js使用代理配置真實(shí)請(qǐng)求url方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
Ant?Design?of?Vue?select框獲取key和name的問題
這篇文章主要介紹了Ant?Design?of?Vue?select框獲取key和name的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
vue項(xiàng)目實(shí)現(xiàn)背景顏色以及下劃線從左到右漸變動(dòng)畫效果
這篇文章主要介紹了vue項(xiàng)目實(shí)現(xiàn)背景顏色以及下劃線從左到右漸變動(dòng)畫效果,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
在Vue中使用SQLite數(shù)據(jù)庫的基礎(chǔ)應(yīng)用詳解
這篇文章主要為大家詳細(xì)介紹了在Vue中使用SQLite數(shù)據(jù)庫的基礎(chǔ)應(yīng)用,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2025-02-02
這篇文章主要為大家詳細(xì)介紹了Vue分頁組件的實(shí)例代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-04-04
vue+ts封裝axios網(wǎng)絡(luò)請(qǐng)求封裝方式
文章介紹了如何使用Vue和TypeScript封裝Axios網(wǎng)絡(luò)請(qǐng)求,并提供了一個(gè)示例文件`request.ts`,展示了如何封裝各種請(qǐng)求,此外,還提到了路由管理文件和狀態(tài)碼處理文件的結(jié)構(gòu)2025-12-12
vue.js實(shí)現(xiàn)單選框、復(fù)選框和下拉框示例
本篇文章主要介紹了vue.js實(shí)現(xiàn)單選框、復(fù)選框和下拉框示例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07