日日操夜夜添-日日操影院-日日草夜夜操-日日干干-精品一区二区三区波多野结衣-精品一区二区三区高清免费不卡

公告：魔扣目錄網為廣大站長提供免費收錄網站服務，提交前請做好本站友鏈：【 網站目錄：http://www.ylptlb.cn 】， 免友鏈快審服務（50元/站），

點擊這里在線咨詢客服
新站提交
  • 網站：51998
  • 待審：31
  • 小程序：12
  • 文章：1030137
  • 會員：747

Vant前端框架創建Vue項目

發布時間：2023-07-03 00:11:52 作者：網友整理

Vant 輕量、可靠的移動端 Vue 組件庫

Vant 是一個輕量、可靠的移動端組件庫，于 2017 年開源。

目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本，并由社區團隊維護 React 版本和支付寶小程序版本。

文檔：V2開發手冊： https://vant-contrib.gitee.io/vant/v2/#/zh-CN/

特性：

  • 性能極佳，組件平均體積小于 1KB（min+gzip）
  •  65+ 個高質量組件，覆蓋移動端主流場景
  •  使用 TypeScript 編寫，提供完整的類型定義
  •  單元測試覆蓋率超過 90%，提供穩定性保障
  •  提供完善的中英文文檔和組件示例
  •  提供 Sketch 和 Axure 設計資源
  •  支持 Vue 2、Vue 3 和微信小程序
  •  支持主題定制，內置 700+ 個主題變量
  •  支持按需引入和 Tree Shaking
  •  支持服務器端渲染
  •  支持國際化和語言包定制

瀏覽器支持

  1. Vant 2 支持現代瀏覽器以及 Android >= 4.0、iOS >= 8.0。
  2. Vant 3 支持現代瀏覽器以及 Chrome >= 51、iOS >= 10.0（與 Vue 3 一致）。

安裝

通過 npm 安裝.在現有項目中使用 Vant 時，可以通過 npm 或 yarn 進行安裝：

// Vue 3 項目，安裝最新版 Vant：
npm i vant -S
// Vue 2 項目，安裝 Vant 2：
npm i vant@latest-v2 -S

通過 CDN 安裝.使用 Vant 最簡單的方法是直接在 html 文件中引入 CDN 鏈接，之后你可以通過全局變量 vant 訪問到所有組件。

<!-- 引入樣式文件 -->
<link  rel="stylesheet"  href="https://unpkg.com/[email protected]/lib/index.css"/>

<!-- 引入 Vue 和 Vant 的 JS 文件 -->
<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<script src="https://unpkg.com/[email protected]/lib/vant.min.js"></script>

<script>
  // 在 #app 標簽下渲染一個按鈕組件
  new Vue({
    el: '#app',
    template: `<van-button>按鈕</van-button>`,
  });

  // 調用函數組件，彈出一個 Toast
  vant.Toast('提示');

  // 通過 CDN 引入時不會自動注冊 Lazyload 組件
  // 可以通過下面的方式手動注冊
  Vue.use(vant.Lazyload);
</script>

通過腳手架安裝.在新項目中使用 Vant 時，推薦使用 Vue 官方提供的腳手架 Vue Cli 創建項目并安裝 Vant。

// 安裝 Vue Cli
npm install -g @vue/cli
// 創建一個項目
vue create hello-world
// 創建完成后，可以通過命令打開圖形化界面，如下圖所示
vue ui

創建Vue項目

Vue腳手架（創建、了解結構、運行流程）,不清楚vue怎么創建請點擊

打開Dos命令窗口,使用下面命令創建Vue

E:>cd vue-home
//創建vue 項目
E:vue-home>vue create demo-vant

添加安裝Vant支持

項目創建完畢后,并不直接支持vant,我們需要將Vant的內容添加安裝到當前Vue項目

//首先要進入當前vue項目的文件夾
E:vue-home>cd demo-vant
//后運行安裝添加Vant支持的npm命令
E:vue-homedemo-vant>npm i vant@latest-v2 -S
//安裝結束后可能有一下警告,可以無視掉
//看到的提示可能是
added 5 packages in 3s
//然后我們使用Idea打開這個項目

添加引用

//項目打開后找到srcmain.js
//添加Vant 引用如下三行代碼
import Vant from 'vant'
import 'vant/lib/index.css'
Vue.use(Vant)

啟動項目的命令

//在idea提供的Terminal中敲入代碼即可
npm run serve
//啟動之后可以在localhost:8080中訪問
//[注意]切換為移動端界面,瀏覽器為例按F12進入調試模式后點擊移動端調試即

組件用法

組件注冊

Vant 支持多種組件注冊方式，請根據實際業務需要進行選擇。

全局注冊

全局注冊后，你可以在 App 下的任意子組件中使用注冊的 Vant 組件。

import Vue from 'vue';
import { Button } from 'vant';

// 方式一. 通過 Vue.use 注冊
// 注冊完成后，在模板中通過 <van-button> 或 <VanButton> 標簽來使用按鈕組件
Vue.use(Button);

// 方式二. 通過 Vue.component 注冊
// 注冊完成后，在模板中通過 <van-button> 標簽來使用按鈕組件
Vue.component(Button.name, Button);

局部注冊

局部注冊后，你可以在當前組件中使用注冊的 Vant 組件。

import { Button } from 'vant';

export default {
  components: {
    [Button.name]: Button,
  },
};

組件實例方法

Vant 中的許多組件提供了實例方法，調用實例方法時，我們需要通過 ref 來注冊組件引用信息，引用信息將會注冊在父組件的$refs對象上。注冊完成后，我們可以通過this.$refs.xxx訪問到對應的組件實例，并調用上面的實例方法。

<!-- 通過 ref 屬性將組件綁定到 this.$refs.checkbox 上 -->
<van-checkbox v-model="checked" ref="checkbox"> 復選框 </van-checkbox>

export default {
  data() {
    return {
      checked: false,
    };
  },
  // 注意：組件掛載后才能訪問到 ref 對象
  mounted() {
    this.$refs.checkbox.toggle();
  },
}

瀏覽器適配

Viewport 布局

Vant 默認使用 px 作為樣式單位，如果需要使用 viewport 單位 (vw, vh, vmin, vmax)，推薦使用 postcss-px-to-viewport 進行轉換。

postcss-px-to-viewport 是一款 PostCSS 插件，用于將 px 單位轉化為 vw/vh 單位。

PostCSS PostCSS 示例配置

下面提供了一份基本的 PostCSS 示例配置，可以在此配置的基礎上根據項目需求進行修改。

// postcss.config.js
module.exports = {
  plugins: {
    'postcss-px-to-viewport': {
      viewportWidth: 375,
    },
  },
};

Tips: 在配置 postcss-loader 時，應避免 ignore node_modules 目錄，否則將導致 Vant 樣式無法被編譯。

表單組件

使用表單組件實現登錄頁面,是Vant直接提供的組件

//先添加引用.引用之后 main.js文件內容為
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import Vant from 'vant'
import 'vant/lib/index.css'
import { Form } from 'vant';
import { Field } from 'vant';

Vue.use(Form);
Vue.use(Field);
Vue.use(Vant)
Vue.config.productionTip = false
// 略

向vue文件中復制文檔中提供的代碼

注意復制的位置,我們以AboutView.vue為例

<template>
<div class="about">
<van-form @submit="onSubmit">
<van-field
v-model="username"
name="用戶名"
label="用戶名"
placeholder="用戶名"
:rules="[{ required: true, message: '請填寫用戶名' }]"
/>

<van-field
v-model="password"
type="password"
name="密碼"
label="密碼"
placeholder="密碼"
:rules="[{ required: true, message: '請填寫密碼' }]"
/>

<div style="margin: 16px;">
<van-button round block type="info" native-type="submit">提交</van-button>
</div>
</van-form>
</div>
</template>

<script>
export default {
data() {
return {
username: '',
password: '',
};
},

methods: {
onSubmit(values) {
console.log('submit', values);
},
},
};
</script>

然后直接訪問about頁面即可

area省市區選擇

我們在手機app上經常需要選擇省市區

Vant直接提供了這個組件

我們創建AreaView.vue文件

<template>
<div>
<van-area title="標題" :area-list="areaList" />
</div>
</template>

<script>
const areaList = {
province_list: {
110000: '北京市',
120000: '天津市',
},
city_list: {
110100: '北京市',
120100: '天津市',
},
county_list: {
110101: '東城區',
110102: '西城區',
// ....
},
};

export default{
data(){
return{areaList};
}
}
</script>

別忘了要設置路由才能訪問這個頁面

router文件夾下的index.js文件中添加路由代碼

const routes = [
{
path: '/',
name: 'home',
component: HomeView
},
{
path: '/about',
name: 'about',
component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
},
{
path: '/area',
name: 'area',
component: () => import('../views/AreaView.vue')
}
]

然后可以通過輸入路徑

localhost:8080/area訪問這個頁面

但是我們現在只能訪問我們數組中定義的少數省市區

怎么才能想文檔中顯示所有省市區呢

需要引用官方提供的一個地址列表

//dos(Terminal中也可以)運行安裝命令
E:vue-homedemo-vant>npm i @vant/area-data

這樣就安裝了所有省市區的數據到當前的項目

我們只需要修改js代碼,讓arealist引用這個數據內容即可

<script>
import {areaList} from '@vant/area-data'
export default{
data(){
return{areaList};
}
}

</script>

商品列表頁

我們在開發酷鯊商城的過程中

移動端需要很多頁面,商品列表頁面是比較常見的頁面之一

我們以商品列表頁為例

帶領大家開發一個頁面

創建頁面和路由配置

router/index.js添加路由信息

{
path: '/list',
name: 'list',
component: () => import('../views/ListView.vue')
}

創建ListView.vue

<template>
<div>
<van-row>
<van-col span="8">綜合</van-col>
<van-col span="8">銷量</van-col>
<van-col span="8">價格</van-col>
</van-row>
<van-card
num="1"
price="268.00"
desc="超10000人的信任"
title="酷鯊牌鼠標鍵盤套裝"
thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
>
<template #tags>
<van-tag type="danger">自營</van-tag>
<van-tag plain type="danger">酷鯊物流</van-tag>
</template>
<template #footer>
<van-button size="mini">按鈕</van-button>
<van-button size="mini">按鈕</van-button>
</template>
</van-card>
<van-card
num="1"
price="268.00"
desc="超10000人的信任"
title="酷鯊牌鼠標鍵盤套裝"
thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
>
<template #tags>
<van-tag type="danger">自營</van-tag>
<van-tag plain type="danger">酷鯊物流</van-tag>
</template>
<template #footer>
<van-button size="mini">按鈕</van-button>
<van-button size="mini">按鈕</van-button>
</template>
</van-card>
</div>
</template>

<script>
export default {
name: "ListView"
}
</script>

添加事件調用的參考代碼

<template>
<div>
<van-area title="標題" :area-list="areaList"
@confirm="showName"/>
</div>
</template>

<script>
import {areaList} from '@vant/area-data'
export default{
data(){
return{areaList};
},
methods:{
showName:function(msg){
console.log(msg[0].code+""+msg[0].name);
console.log(msg[1].code+""+msg[1].name);
console.log(msg[2].code+""+msg[2].name);
}
}
}
</script>

學習記錄，如有侵權請聯系刪除。參考于
vant-contrib.gitee.io/vant/v2/#/zh-CN/coupon-list

分享到：
標簽：Vant
用戶無頭像

網友整理

注冊時間：

網站：5 個   小程序：0 個  文章：12 篇

  • 51998

    網站

  • 12

    小程序

  • 1030137

    文章

  • 747

    會員

趕快注冊賬號，推廣您的網站吧！
最新入駐小程序

數獨大挑戰2018-06-03

數獨一種數學游戲，玩家需要根據9

答題星2018-06-03

您可以通過答題星輕松地創建試卷

全階人生考試2018-06-03

各種考試題，題庫，初中，高中，大學四六

運動步數有氧達人2018-06-03

記錄運動步數，積累氧氣值。還可偷

每日養生app2018-06-03

每日養生,天天健康

體育訓練成績評定2018-06-03

通用課目體育訓練成績評定