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

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

點(diǎn)擊這里在線咨詢客服
新站提交
  • 網(wǎng)站：51998
  • 待審：31
  • 小程序：12
  • 文章：1030137
  • 會(huì)員：747

Vant前端框架創(chuàng)建Vue項(xiàng)目

發(fā)布時(shí)間：2023-07-03 00:11:52 作者：網(wǎng)友整理

Vant 輕量、可靠的移動(dòng)端 Vue 組件庫

Vant 是一個(gè)輕量、可靠的移動(dòng)端組件庫，于 2017 年開源。

目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本，并由社區(qū)團(tuán)隊(duì)維護(hù) React 版本和支付寶小程序版本。

文檔：V2開發(fā)手冊(cè)： https://vant-contrib.gitee.io/vant/v2/#/zh-CN/

特性：

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

瀏覽器支持

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

安裝

通過 npm 安裝.在現(xiàn)有項(xiàng)目中使用 Vant 時(shí)，可以通過 npm 或 yarn 進(jìn)行安裝：

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

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

<!-- 引入樣式文件 -->
<link  rel="stylesheet"  href="https://unpkg.com/vant@2.12/lib/index.css"/>

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

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

  // 調(diào)用函數(shù)組件，彈出一個(gè) Toast
  vant.Toast('提示');

  // 通過 CDN 引入時(shí)不會(huì)自動(dòng)注冊(cè) Lazyload 組件
  // 可以通過下面的方式手動(dòng)注冊(cè)
  Vue.use(vant.Lazyload);
</script>

通過腳手架安裝.在新項(xiàng)目中使用 Vant 時(shí)，推薦使用 Vue 官方提供的腳手架 Vue Cli 創(chuàng)建項(xiàng)目并安裝 Vant。

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

創(chuàng)建Vue項(xiàng)目

Vue腳手架（創(chuàng)建、了解結(jié)構(gòu)、運(yùn)行流程）,不清楚vue怎么創(chuàng)建請(qǐng)點(diǎn)擊

打開Dos命令窗口,使用下面命令創(chuàng)建Vue

E:>cd vue-home
//創(chuàng)建vue 項(xiàng)目
E:vue-home>vue create demo-vant

添加安裝Vant支持

項(xiàng)目創(chuàng)建完畢后,并不直接支持vant,我們需要將Vant的內(nèi)容添加安裝到當(dāng)前Vue項(xiàng)目

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

添加引用

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

啟動(dòng)項(xiàng)目的命令

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

組件用法

組件注冊(cè)

Vant 支持多種組件注冊(cè)方式，請(qǐng)根據(jù)實(shí)際業(yè)務(wù)需要進(jìn)行選擇。

全局注冊(cè)

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

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

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

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

局部注冊(cè)

局部注冊(cè)后，你可以在當(dāng)前組件中使用注冊(cè)的 Vant 組件。

import { Button } from 'vant';

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

組件實(shí)例方法

Vant 中的許多組件提供了實(shí)例方法，調(diào)用實(shí)例方法時(shí)，我們需要通過 ref 來注冊(cè)組件引用信息，引用信息將會(huì)注冊(cè)在父組件的$refs對(duì)象上。注冊(cè)完成后，我們可以通過this.$refs.xxx訪問到對(duì)應(yīng)的組件實(shí)例，并調(diào)用上面的實(shí)例方法。

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

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

瀏覽器適配

Viewport 布局

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

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

PostCSS PostCSS 示例配置

下面提供了一份基本的 PostCSS 示例配置，可以在此配置的基礎(chǔ)上根據(jù)項(xiàng)目需求進(jìn)行修改。

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

Tips: 在配置 postcss-loader 時(shí)，應(yīng)避免 ignore node_modules 目錄，否則將導(dǎo)致 Vant 樣式無法被編譯。

表單組件

使用表單組件實(shí)現(xiàn)登錄頁面,是Vant直接提供的組件

//先添加引用.引用之后 main.js文件內(nèi)容為
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文件中復(fù)制文檔中提供的代碼

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

<template>
<div class="about">
<van-form @submit="onSubmit">
<van-field
v-model="username"
name="用戶名"
label="用戶名"
placeholder="用戶名"
:rules="[{ required: true, message: '請(qǐng)?zhí)顚懹脩裘?#39; }]"
/>

<van-field
v-model="password"
type="password"
name="密碼"
label="密碼"
placeholder="密碼"
:rules="[{ required: true, message: '請(qǐng)?zhí)顚懨艽a' }]"
/>

<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省市區(qū)選擇

我們?cè)谑謾C(jī)app上經(jīng)常需要選擇省市區(qū)

Vant直接提供了這個(gè)組件

我們創(chuàng)建AreaView.vue文件

<template>
<div>
<van-area title="標(biāo)題" :area-list="areaList" />
</div>
</template>

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

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

別忘了要設(shè)置路由才能訪問這個(gè)頁面

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訪問這個(gè)頁面

但是我們現(xiàn)在只能訪問我們數(shù)組中定義的少數(shù)省市區(qū)

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

需要引用官方提供的一個(gè)地址列表

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

這樣就安裝了所有省市區(qū)的數(shù)據(jù)到當(dāng)前的項(xiàng)目

我們只需要修改js代碼,讓arealist引用這個(gè)數(shù)據(jù)內(nèi)容即可

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

</script>

商品列表頁

我們?cè)陂_發(fā)酷鯊商城的過程中

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

我們以商品列表頁為例

帶領(lǐng)大家開發(fā)一個(gè)頁面

創(chuàng)建頁面和路由配置

router/index.js添加路由信息

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

創(chuàng)建ListView.vue

<template>
<div>
<van-row>
<van-col span="8">綜合</van-col>
<van-col span="8">銷量</van-col>
<van-col span="8">價(jià)格</van-col>
</van-row>
<van-card
num="1"
price="268.00"
desc="超10000人的信任"
title="酷鯊牌鼠標(biāo)鍵盤套裝"
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="酷鯊牌鼠標(biāo)鍵盤套裝"
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>

添加事件調(diào)用的參考代碼

<template>
<div>
<van-area title="標(biāo)題" :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>

學(xué)習(xí)記錄，如有侵權(quán)請(qǐng)聯(lián)系刪除。參考于
vant-contrib.gitee.io/vant/v2/#/zh-CN/coupon-list

分享到：
標(biāo)簽：Vant
用戶無頭像

網(wǎng)友整理

注冊(cè)時(shí)間：

網(wǎng)站：5 個(gè)   小程序：0 個(gè)  文章：12 篇

  • 51998

    網(wǎng)站

  • 12

    小程序

  • 1030137

    文章

  • 747

    會(huì)員

趕快注冊(cè)賬號(hào)，推廣您的網(wǎng)站吧！
最新入駐小程序

數(shù)獨(dú)大挑戰(zhàn)2018-06-03

數(shù)獨(dú)一種數(shù)學(xué)游戲，玩家需要根據(jù)9

答題星2018-06-03

您可以通過答題星輕松地創(chuàng)建試卷

全階人生考試2018-06-03

各種考試題，題庫，初中，高中，大學(xué)四六

運(yùn)動(dòng)步數(shù)有氧達(dá)人2018-06-03

記錄運(yùn)動(dòng)步數(shù)，積累氧氣值。還可偷

每日養(yǎng)生app2018-06-03

每日養(yǎng)生,天天健康

體育訓(xùn)練成績?cè)u(píng)定2018-06-03

通用課目體育訓(xùn)練成績?cè)u(píng)定