精华内容
下载资源
问答
  • 通过cdn引入框架 在做 h5 单页面的时候,有遇到这个问题。查看文档,最初以为通过 cdn 引入框架,个别组件不支持,后来发现是这个问题。

    通过cdn引入框架

    在做 h5 单页面的时候,有遇到这个问题。查看文档,最初以为通过 cdn 引入框架,个别组件不支持,后来发现是这个问题。

    展开全文
  • 1.订单提交地址等组件的应用。 使用的组件有如下: import {Card,button,Toast,AddressList,Popup,AddressEdit,Area} from 'vant' 主要是配货地址编辑这块; <van-address-edit :area-list="areaList" :...
  • │ ├── vue2 使用 Vue 2、Vant 2、Vue Cli 搭建应用 │ ├── vue3 使用 Vue 3、Vant 3、Vue Cli 搭建应用 │ ├── vite 使用 Vue 3、Vant 3、Vite 搭建应用 │ ├── cdn 通过 CDN 引入 Vant
  • Vant Aliapp是移动端Vue组件库的支付宝小程序版本,两者基于相同的视觉规范,提供一致的API接口,助力开发者快速构建小程序应用Vant Aliapp通过小程序转换器基于转换得到,并进行了少量的兼容适配调整。 预览 ...
  • vant的使用方法

    千次阅读 2019-10-18 14:13:42
    以时间插件为例子: template的代码: v-model="currentDate" type="date" @confirm="confirmDate" @change="changeDate" @cancel="cancelDate" ...方法,可以根据自己的应用选择方法。

    以时间插件为例子:
    template的代码:

            <van-datetime-picker
              v-model="currentDate"
              type="date"
              @confirm="confirmDate"
              @change="changeDate"
              @cancel="cancelDate"
            />
    

    js代码:

      methods: {
        confirmDate(data){
          console.log(data);
        },
        cancelDate(){
    
        },
        changeDate(picker){
          console.log('pick',picker.getValues());
        }
      }
    

    介绍:
    在这里插入图片描述
    Events的事件处理,是需要在html里使用@来触发的。

    change事件的事件处理,是通过change绑定一个函数,然后函数传一个picker的参数,然后所有封装的函数都是这个picker的一个对象方法,可以根据自己的应用选择方法。

    展开全文
  • 这里记录下使用最新的Vite+vue3和有赞出品的Vant移动端UI库搭建移动端应用的过程。 Vite官网地址:https://vitejs.dev/ 使用Vite的优点:最简单直观的一点,那就是快啊。 和Webpack相比,Vite 具有以下特点:...

    Vite 是 vue 的作者尤雨溪在开发 vue3.0 的时候开发的一个 基于原生 ES-Module 的前端构建工具。其本人在后来对 vue3 的宣传中对自己的新作品 Vite 赞不绝口,并表示自己 ”再也回不去 webpack 了“ 。

    这里记录下使用最新的Vite+vue3和有赞出品的Vant移动端UI库搭建移动端应用的过程。

    目录

    Vite的优点

    Vite项目创建

    集成Vant UI移动端组件库

     移动端 rem 适配

    测试

    引用:


    Vite的优点

     Vite官网介绍地址:https://vitejs.dev/

    使用Vite的优点:最简单直观的一点,那就是快。

    和 Webpack相比,Vite 具有以下特点:
    快速的冷启动,不需要等待打包。
    即时的热模块更新。
    真正的按需编译,不用等待整个项目编译完成。
    由于完全跳过了打包这个概念,Vite的出现大大的撼动了Webpack的地位,且真正做到了服务器随起随用。

    几乎是秒启动,每次更改立刻能够看到效果。

    Vite项目创建

    习惯于用yarn,nodejs建议安装12.13版本或以上,否则安装最新的vue-cli会报错。

    若没有安装yarn,建议安装个,它比npm好用且稳定,Yarn是facebook发布的一款取代npm的包管理工具。

    npm install -g yarn

    Yarn 淘宝源安装,分别复制粘贴以下代码行到黑窗口运行即可

    yarn config set registry https://registry.npm.taobao.org -g
    yarn config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass -g

    基于Vite和Vue3的模板工程创建步骤:

    # step1 yarn create vite + name + template
    yarn create vite my-vue-app --template vue
    #step2
    cd my-vue-app
    #step3
    yarn
    #atlast
    yarn dev

    集成最新的路由组件 Vue-Router 4.0

    yarn add vue-router@next

    集成Vant UI移动端组件库

    Vant介绍:

    Vant 是有赞前端团队开源的移动端组件库,于 2017 年开源,已持续维护 4 年时间。Vant 对内承载了有赞所有核心业务,对外服务十多万开发者,是业界主流的移动端组件库之一。

    目前 Vant 官方提供了 Vue 2 版本Vue 3 版本微信小程序版本,并由社区团队维护 React 版本支付宝小程序版本

    官方文档地址:Vant - Mobile UI Components built on Vue

    Vant安装:

    # 通过 yarn 安装
    yarn add vant@3

    引入vant组件:

    对于 vite 项目,使用 vite-plugin-style-import 实现按需引入, 原理和 babel-plugin-import 类似。

    # 安装插件
    yarn add vite-plugin-style-import -D

     修改vite.config.js文件:

    // vite.config.js
    import vue from '@vitejs/plugin-vue';
    import styleImport from 'vite-plugin-style-import';
    
    export default {
      plugins: [
        vue(),
        styleImport({
          libs: [
            {
              libraryName: 'vant',
              esModule: true,
              resolveStyle: (name) => `vant/es/${name}/style`,
            },
          ],
        }),
      ],
    };

    注意:类似 import navBar from '@/components/NavBar.vue' 中的@符号,是需要配置才能支持的。这个@符号的作用就相当于一个别名,方便书写和不易出错。后缀的.vue扩展名,也可以改下配置忽略掉不用每次引用都带扩展名,配置extensions属性。

    vite 添加别名(类似webpack的resolve.alias)方法:

    修改vite.config配置

    import { defineConfig } from 'vite'
    import vue from '@vitejs/plugin-vue'
    import styleImport from 'vite-plugin-style-import'
    //import { join } from 'path'
    
    //function resolve(dir){
    //  return join(__dirname,dir)
    //}
    // https://vitejs.dev/config/
    const path = require('path')
    export default defineConfig({
      plugins: [vue(),
        styleImport({
          libs: [
            {
              libraryName: 'vant',
              esModule: true,
              resolveStyle: (name) => `vant/es/${name}/style`,
            },
          ],
        }),
      ],
      resolve:{
          alias:{
            '@':  path.resolve(__dirname, 'src'),
          },
          extensions: ['.js', '.vue','.json'],
      },
    })
    

     移动端 rem 适配

    如果是做 PC 端的网页,无需做 rem 适配,但是做 H5 开发rem 是需要做一下的,Vant 官方也为我们提供了方案,如下图所示:

    yarn add lib-flexible -S
    yarn add postcss-pxtorem -D
    

    这里 lib-flexible 是网页做 html 的 font-size 适配用的,所以需要安装到 dependencies。而 postcss-pxtorem 是在编译的时候对 px 单位转换为 rem 单位时使用,所以安装到 devDependencies 便可。

    安装好后,我们需要在 main.js 引入 lib-flexible

    接着需要为 px 单位转 rem 单位做配置:

    Vue CLI项目可以在根目录声明 .postcssrc.js 文件,但是目前 Vite 创建的项目已经不支持这种形式的配置文件了,而是需要 postcss.config.js 文件,配置内容如下:

    // postcss.config.js
    // 用 vite 创建项目,配置 postcss 需要使用 post.config.js,之前使用的 .postcssrc.js 已经被抛弃
    // 具体配置可以去 postcss-pxtorem 仓库看看文档
    module.exports = {
      "plugins": {
        "postcss-pxtorem": {
          rootValue: 37.5, // Vant 官方根字体大小是 37.5
          propList: ['*'],
          selectorBlackList: ['.norem'] // 过滤掉.norem-开头的class,不进行rem转换
        }
      }
    }

    如何验证是配置成功了?可以打开浏览器查看下dom元素的属性,原来是px的有没有变成rem.

    如源文件里设置的是:

    <style scoped>
    .test {
      width: 100px;
      height: 100px;
      background-color: aquamarine;
    }
    </style>

     浏览器里查看看到的如下图所示则是配置生效了:

    测试

    可以写一个Test.vue放在views/目录下作为vant和rem配置是否生效的测试:

    <template>
       <div class="test">我是测试</div>
      <div>我是vant按钮</div>
      <van-button type="primary" size="large">大号按钮</van-button>
    </template>
     
    <script>
    export default {
    }
    </script>
    
    <style scoped>
    .test {
      width: 100px;
      height: 100px;
      background-color: aquamarine;
    }
    </style>

    配置下router路由,访问这个测试页面看看效果。vue-router的配置:

    在src文件夹下新建router文件夹,里面增加一个index.js文件:

    // src/router/index.js
    import { createRouter, createWebHashHistory } from 'vue-router'
    import Test from '../views/Test.vue'
    import Home from '../views/Home.vue'
    // createRouter 创建路由实例
    const router = createRouter({
      history: createWebHashHistory(), // hash模式:createWebHashHistory,history模式:createWebHistory
      routes: [
        {
          path: '/test',
          component: Test
        },
        {
          path: '/',
          redirect: '/home'
        },
        {
          path: '/home',
          name: 'home',
          component: Home,
          meta: {
            index: 1
          }
        },
      ]
    })
    
    // 抛出路由实例, 在 main.js 中引用
    export default router

    App.vue中挂在router: 

    <template>
       <router-view />
    </template>
     
    <script>
     
    export default {
      name: 'App'
    }
    </script>
     

     main.js中,全局注册用到的组件库。

    //main.js
    import { createApp } from 'vue'
    import 'lib-flexible/flexible'
    import App from './App.vue'
    import { Button } from 'vant'
    import { Icon } from 'vant'
    import { Swipe, SwipeItem } from 'vant'
    import router from './router'
    //import 'vant/lib/index.css'; // 全局引入样式
    
    const app = createApp(App) // 创建实例
    
    app.use(Button).use(Icon).use(Swipe).use(SwipeItem) // 注册组件
    app.use(router)
    
     
    app.mount('#app')
    

    最后看到的效果:

    引用:

    学习 Vue 你需要知道的 webpack 知识(一) - 知乎

    Vue3教程:Vue3.0 + Vant3.0 搭建种子项目 - 程序员十三 - 博客园

    展开全文
  • //引入矢量图 // import "./assets/iconfont/iconfont.css" //引入Vant插件 import Vant from 'vant' import 'vant/lib/index.css' Vue.use(Vant); // let data = { // Root: Root // }; new Vue({ el: "#app", ...

    webpack.base.js 文件

    const path = require('path');

    const webpack = require('webpack');

    const VueLoaderPlugin = require('vue-loader/lib/plugin');

    const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

    const devMode = process.env.NODE_ENV !== 'production';

    // console.log( 'devMode === ', devMode );

    function resolve (dir) {

    let newPath = path.join(__dirname, '..', dir);

    // console.log("newPath == ", newPath);

    return newPath;

    }

    let baseConfig = {

    resolve: {

    // 定义别名

    alias: {

    '@': resolve('src'),

    'vue$': 'vue/dist/vue.esm.js',

    },

    // 告诉webpack解析模块时应该搜索哪些目录

    modules: [path.resolve( __dirname, 'src' ), 'node_modules'],

    extensions: ['.js', '.vue', '.json', '.less', '.scss']

    },

    entry: {

    // index: path.resolve( __dirname, 'src/pages/home/main.js' ),

    index: './src/pages/home/main.js'

    },

    module: {

    rules: [

    {

    test: /\.css$/,

    exclude: /node_modules/,

    use: [

    'style-loader',

    'css-loader'

    ]

    },

    // sass文件的处理

    {

    test: /\.(sa|sc|c)ss$/,

    use: [

    'css-loader',

    'sass-loader'

    ],

    },

    {

    test: /\.vue$/,

    exclude:/node_modules/,

    loader: 'vue-loader', /* 原来的'vue'改成'vue-loader' */

    options: {

    // vue-loa4der options go here

    loaders:{

    css: 'vue-style-loader!css-loader!px2rem-loader?remUnit=75&remPrecision=8',

    scss: 'vue-style-loader!css-loader!px2rem-loader?remUnit=75&remPrecision=8!sass-loader'

    }

    }

    },

    {

    test: /\.js$/,

    exclude: /node_modules/,

    loader: 'babel-loader'

    },

    {

    test:/\.(png|svg|jpg|gif|ico|woff|eot|ttf)$/,

    exclude: /(public)/,

    use: [

    {

    loader: 'url-loader',

    options: {

    limit: 500, //小于50K的 都打包

    name:'[hash:8].[name].[ext]',

    // publicPath:"img/", //替换CSS引用的图片路径 可以替换成爱拍云上的路径

    // outputPath:"../img/" //生成之后存放的路径

    }

    }

    ]

    }

    ]

    }

    };

    exports.baseConfig = baseConfig;

    webpack.dev.js 文件

    const path = require('path');

    const merge = require('webpack-merge');

    const base = require('./webpack.base.js');

    const webpack = require('webpack');

    const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

    const VueLoaderPlugin = require('vue-loader/lib/plugin');

    const HtmlWebpackPlugin = require('html-webpack-plugin');

    const CleanWebpackPlugin = require('clean-webpack-plugin');

    module.exports = merge( base.baseConfig, {

    output: {

    filename: '[name].bundle.js',

    path: __dirname + 'service/dist', //打包路径

    publicPath:'dist/', // 用于处理静态资源引用地址问题

    },

    devtool: 'source-map',

    devServer: {

    host: '127.0.0.1',

    compress: false,

    port: 6600,

    contentBase: './server',

    hot: true

    },

    plugins: [

    new CleanWebpackPlugin(),

    // new HtmlWebpackPlugin({

    // title: 'Output Management'

    // }),

    new VueLoaderPlugin(),

    new webpack.HotModuleReplacementPlugin()

    ]

    });

    main.js 文件

    // import Vue from 'vue/dist/vue.common.js';

    import Vue from 'vue';

    import router from './router.js';

    import App from './modules/App'

    Vue.config.productionTip = false;

    //引入矢量图

    // import "./assets/iconfont/iconfont.css"

    //引入Vant插件

    import Vant from 'vant'

    import 'vant/lib/index.css'

    Vue.use(Vant);

    // let data = {

    // Root: Root

    // };

    new Vue({

    el: "#app",

    router,

    components: { App },

    template: '',

    beforeCreate: () =>{

    // console.group('beforeCreate 创建前状态=============== ');

    // console.log("%c%s", "color:red" , "el : ");

    },

    created: function () {

    // console.group('created 创建完毕状态===============》');

    },

    beforeMount: function () {

    // console.group('beforeMount 挂载前状态===============》');

    },

    mounted: function () {

    // console.group('mounted 挂载结束状态===============》');

    },

    beforeUpdate: function () {

    // console.group('beforeUpdate 更新前状态===============》');

    },

    updated: function () {

    // console.group('updated 更新完成状态===============》');

    },

    beforeDestroy: function () {

    // console.group('beforeDestroy 销毁前状态===============》');

    },

    destroyed: function () {

    // console.group('destroyed 销毁完成状态===============》');

    }

    });

    展开全文
  • 应用一系列的优化手段之后,目前 Vant 的组件平均体积仅有 8.8KB,Uglify + Gzip 后约 1KB。 丰富实用的业务组件 Vant 不只是提供基础的UI组件,为了方便开发者快速构建移动商城,Vant 增加了许多移动商城内常用的...
  • 基于vant ui的移动端商城项目 构建设置 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # build for ...
  • 在main.js中按需引入 import { Toast ...开发企业微信应用使用Vant组件库过程中,想要用到轻提示Toast,发现API文档无法使用: 想要使用这个提示: 复现: 点击按钮后,就会报出这些错误…难道是
  • van-list里面的元素不能有float样式,否则会连续触发 load 事件 原代码 (tab) title=tab.name key=tab.id> <van-list :finished
  • Vant组件的基础应用

    2021-12-12 09:32:56
    1.安装 1.1通过 npm 安装 在现有项目中使用 Vant 时,可以通过...在新项目中使用 Vant 时,推荐使用 Vue 官方提供的脚手架Vue Cli创建项目并安装 Vant。 # 安装 Vue Cli npm install -g @vue/cli # 创建一个项...
  • 延迟加载 瀑布流上拉加载新的数据时,给予一定的延迟效果,让数据的加载不要太快(不要感觉... // 返回一个Promise对象,应用端可以设置async/await使得异步变为同步, // 同步可以使得后续代码都按照先后顺序执行 re
  • vue3+vant 移动端应用(1)

    千次阅读 2019-05-27 03:47:17
    安装Vant npm i vant -S 主要问题如何按需引用、REM适配 按需引入 babel-plugin-import 会在编译过程中将 import 的写法自动转换为按需引入的方式 //安装命令 npm i babel-plugin-import -D 复制代码 安装之后新...
  • Vant 快速上手

    2021-06-11 06:58:21
    脚手架在新项目中使用 Vant 时,推荐使用 Vue 官方提供的脚手架Vue Cli创建项目# 安装 Vue Clinpm install -g @vue/cli# 创建一个项目vue create hello-world# 创建完成后,可以通过命令打开图形化界面,如下图所示...
  • order_APP:我在微信环境中开发的基于vantUI的自助订购应用
  • 使用了vantUI框架的(Tabbar标签页)组件,开发了个页脚固定导航: 我的操作说明: 登录页 /login 登录成功后,进入首页 / 然后选择首页页脚导航,个人中心 /personal 发现在点击个人中心返回按钮的时候,直接...
  • #页面加载之后banner不轮播,手动滑动之后报错,“width” of null,当改变浏览器宽度时又恢复正常
  • 在现有项目中使用 Vant 时,可以通过npm或yarn安装 通过 npm 安装: npm i vant -S 通过yarn安装: yarn add vant 查看配置文件package.json文件是否有vant的版本信息 引入插件 方式一. 自动按需引入组件...
  • NavBar的妙用 区分微信公众号和手机端 判断浏览器是微信 // 判断是否是微信环境 export let isWeChat = function() { const ua = navigator.userAgent.toLowerCase(); if (/MicroMessenger/i.test(ua)) return ...
  • vant-weapp-dev.zip

    2020-07-08 16:04:57
    Vant Weapp 是移动端 Vue 组件库 Vant 的小程序版本,两者基于相同的视觉规范,提供一致的 API 接口,助力开发者快速搭建小程序应用
  • Vant图片懒加载Lazyload的应用

    千次阅读 2020-10-14 09:13:38
    使用步骤: 在main.js中导入Vant中的Lazyload指令并注册: import Vue from 'vue' import { Lazyload } from 'vant' // 导入懒加载模块Lazyload Vue.use(Lazyload) // 注册懒加载指令 为van-image设置lazy-load指令...
  • Vant 1. 介绍 Vue移动组件库 => Vant【有赞】 => 更新维护快 Vue PC组件 => element-ui【饿了么】 => 更新维护快 vant官方网站: https://youzan.github.io/vant/#/zh-CN/ 其他常用的Vue移动端开发UI...
  • 使用vite + vue3 + typescript + vant 搭个应用环境安装项目安装依赖项目结构搭建 vue3 和 ts必定是大趋势,为了了解一下,上手来试试 环境 node --version v14.16.1,v14以上都能使用 安装项目 # npm 6.x npm ...
  • <script src="https://cdn.jsdelivr.net/npm/vant@2.4/lib/vant.min.js"> // 在 #app 标签下渲染一个按钮组件 new Vue({ el: '#app', template: `按钮</van-button>` }); // 调用函数组件,弹出一个 Toast vant...
  • vantUI框架在vue项目中的应用踩坑

    万次阅读 2018-07-23 17:17:21
    细节未完善。参考地址编辑方面的应用。...import {Card,button,Toast,AddressList,Popup,AddressEdit,Area} from 'vant' 主要是配货地址编辑这块; &lt;van-address-edit :area-list="area...
  • vant-finance-mobile.zip

    2019-10-09 17:58:31
    基于vue,新手必备项目,结构布局,都有很好的借鉴,登录拦截都做了处理, 一个基于Vue/Vant开发的移动端H5理财产品单页应用

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,943
精华内容 1,177
关键字:

vant的应用