精华内容
下载资源
问答
  • Vue3 TS Vite Axios Vant VueRouter Vuex
  • vue2.x-vant-demo-源码

    2021-04-11 21:29:47
    前卫演示 项目设置 yarn install 编译和热重装以进行开发 yarn serve 编译并最小化生产 yarn build 整理和修复文件 yarn lint 自定义配置 请参阅。
  • vue3-vite-ts-Vant vue3 + vite + ts + Vant + vuex +路由器 项目详细介绍 项目预览
  • 主要介绍了VUE安装和使用vant组件,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • vue3-演示 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 整理和修复文件 npm run lint 自定义配置 请参阅。
  • vue + vant 可视化智能表单,配合后台json 可以动态生成前端报表,表单可以联动展示,UI层面使用flexible进行展示
  • 简体中文 简介 本模板非集成方案, 只是做底层的一套基本配置,包括以下内容 1. 路由 2. axios 封装(请求拦截, 响应拦截, 页面切换取消ajax请求),请求加载loading 3. 移动端适配 4. px 自动转 rem ...
  • 主要介绍了vue+vant-UI框架实现购物车的复选框全选和反选功能,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • vant-vue-cropper-h5.rar

    2021-05-25 11:48:34
    vant-vue-cropper-h5.rar 移动端裁剪demo 搭配 vant 免c币下载地址: https://download.lllomh.com/cliect/#/product/L525143961636235
  • 有时候UI组件提供的默认的样式不能满足项目的需要,就需要我们对它的样式进行修改,但是发现加了scoped后修改的样式不起作用。 解决方法: 使用深度选择器,将scoped样式中的选择器“深入”,即影响子组件 ...
  • 主要介绍了vue+vant使用图片预览功能ImagePreview的问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 由于是内网限制了复制的功能 所以只能是图片了 vue-cropper配置——element ...vue-cropper结合vant vue-cropper——vant上传功能 vant图片上传 vue-cropper裁剪页面——vant vue-cropper配置data(option)——v

    由于是内网限制了复制的功能 所以只能是图片了

    vue-cropper配置——element

    在这里插入图片描述

    vue-cropper页面——element

    在这里插入图片描述

    vue-cropper页面绑定——element

    在这里插入图片描述

    vue-cropper上传的两个函数——element

    在这里插入图片描述
    在这里插入图片描述

    elementUI上传部分——element

    在这里插入图片描述

    vue-cropper结合vant

    在这里插入图片描述

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    vue-cropper——vant上传功能

    vant图片上传
    在这里插入图片描述

    vue-cropper裁剪页面——vant

    在这里插入图片描述

    vue-cropper配置data(option)——vant

    在这里插入图片描述

    展开全文
  • vant + Vue创建项目全过程

    千次阅读 2020-10-12 14:36:36
    vant + Vue创建项目全过程vant + Vue创建项目全过程1、安装vue-cli3脚手架2、通过vue-cli3创建项目3、安装vant4、引入组件5、Rem 适配6、底部安全区适配 vant + Vue创建项目全过程 1、安装vue-cli3脚手架 npm ...

    vant + Vue创建项目全过程

    1、安装vue-cli3脚手架

    npm install -g @vue/cli
    

    2、通过vue-cli3创建项目

    2.1、(my-project是你创建项目的项目名称,自己取的)

    vue create my-project
    

    2.2、当你执行这行代码的时候,你会发现项目会出现如下选择
    按键盘上下键选择默认(default)还是手动(Manually),如果选择default,一路回车执行下去就行了,这里我选择手动
    在这里插入图片描述

    根据需求选择配置,按上下键选择,space键选择

    ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
    >( ) TypeScript                                 // JavaScript的一个超集(添加了可选的静态类型和基于类的面向对象编程:类型批注和编译时类型检查、类、接口、模块、lambda 函数)
     ( ) Progressive Web App (PWA) Support          // 渐进式Web应用程序
     ( ) Router                                     // vue-router(vue路由)
     ( ) Vuex                                       // vuex(vue的状态管理模式)
     ( ) CSS Pre-processors                         // CSS 预处理器(如:less、sass)
     ( ) Linter / Formatter                         // 代码风格检查和格式化(如:ESlint)
     ( ) Unit Testing                               // 单元测试(unit tests)
     ( ) E2E Testing                                // e2e(end to end) 测试
    

    这里是我选择的配置,仅供参考
    在这里插入图片描述
    2.3、选择您想要开始项目的Vue.js版本,这里我选择2.X

    如果这里vue.js选择了3.X,vant现在最新的版本和vue3.X还没有做适配,如果你后面发现你引入的vant的组件,没有样式,一定要去检查一下你Vue和vant的版本
    在这里插入图片描述
    2.4、因为安装了router所以会弹出来,选择Y
    在这里插入图片描述
    2.5、选择css预处理,这里我选择第一种
    在这里插入图片描述
    2.6、ESLint:提供一个插件化的javascript代码检测工具,这里我选择最后一个

    ? Pick a linter / formatter config: (Use arrow keys)
    > ESLint with error prevention only  //只有错误预防
      ESLint + Airbnb config   //Airbnb 配置
      ESLint + Standard config  //标准配置
      ESLint + Prettier         //使用较多  (漂亮的配置)
    

    2.7、何时检测,我选择保存就检测:

    ? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
    >( ) Lint on save                    // 保存就检测
     ( ) Lint and fix on commit          // fix和commit时候检查
    

    2.8、如何存放设置,这里我选择放package.json里

    ? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
    > In dedicated config files // 独立文件放置
      In package.json // 放package.json里
    

    2.9是否保存本次配置(之后可以直接使用):

    ? Save this as a preset for future projects? (Y/n) // y:记录本次配置,然后需要你起个名; n:不记录本次配置
    

    然后等这个进度条跑完,你就的项目框架就配置好了
    在这里插入图片描述
    打开你创建的项目目录就能看到自己刚刚创建的项目了,这个时候你可以通过npm run serve启动这个项目了,是不是很简单呢?别急,我们现在只是成功了一半,跟着我接着往下面操作吧
    在这里插入图片描述

    3、安装vant

    这里有两种方式安装:
    1、通过npm安装

    npm i vant -S
    

    2、通过yarn安装

    yarn add vant
    

    4、引入组件

    4.1、安装插件

    npm i babel-plugin-import -D
    

    我们在babel.config.js进行配置

    // 在.babelrc 中添加配置
    // 注意:webpack 1 无需设置 libraryDirectory
    {
      "plugins": [
        ["import", {
          "libraryName": "vant",
          "libraryDirectory": "es",
          "style": true
        }]
      ]
    }
    
    // 对于使用 babel7 的用户,可以在 babel.config.js 中配置
    module.exports = {
      plugins: [
        ['import', {
          libraryName: 'vant',
          libraryDirectory: 'es',
          style: true
        }, 'vant']
      ]
    };
    

    5、Rem 适配

    Vant 中的样式默认使用px作为单位,如果需要使用rem单位,推荐使用以下两个工具:

    postcss-pxtorem 是一款 postcss 插件,用于将单位转化为 rem

    lib-flexible 用于设置 rem 基准值

    下载

    npm install  px2rem-loader --save
    
    npm install amfe-flexible --save
    

    在根目录创建一个postcss.config.js文件
    在这里插入图片描述
    文件 postcss.config.js 参考内容

    module.exports = {
    	    plugins: {
    	      'autoprefixer': {
    	        browsers: ['Android >= 4.0', 'iOS >= 7']
    	      },
    	      'postcss-pxtorem': {
    	        rootValue: 37.5,
    	        //这是基准值,在375px的屏幕变大rem的值会变大,小于这个大小元素的rem值会变小
    	        propList: ['*']
    	      }
    	    }
        }
    

    6、底部安全区适配

    iPhone X 等机型底部存在底部指示条,指示条的操作区域与页面底部存在重合,容易导致用户误操作,因此我们需要针对这些机型进行底部安全区适配。Vant 中部分组件提供了safe-area-inset-bottom属性。
    在index.html的heade中添加

    <!-- 在 head 标签中添加 meta 标签,并设置 viewport-fit=cover 值 -->
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover"
    />
    
    <!-- 开启 safe-area-inset-bottom 属性 -->
    <van-number-keyboard safe-area-inset-bottom />
    
    展开全文
  • 前端开发:vantvue中的使用

    千次阅读 2019-07-30 11:04:42
    # 安装 Vue Cli npm install -g @vue/cli # 创建一个项目 vue create hello-world # 安装vant npm i vant -S # 完整写法:npm install vant --save # 安装插件 npm i babel-plugin-import -D # 完整写法: npm ...

    1、安装

    # 安装 Vue Cli
    npm install -g @vue/cli
    
    # 创建一个项目
    vue create hello-world
    
    # 安装vant 
    npm i vant -S
    # 完整写法:npm install vant --save
    
    # 安装插件 
    npm i babel-plugin-import -D
    # 完整写法: npm install babel-plugin-import --save-dev
    
    # 更换安装源:
    # npm install vant --save --registry=https://registry.npm.taobao.org
    

    2、babel.config.js 中配置

    module.exports = {
      plugins: [
        ['import', {
          libraryName: 'vant',
          libraryDirectory: 'es',
          style: true
        }, 'vant']
      ]
    };
    

    3、新建视图 views/Web.vue

    <template>
      <div>
        
        <van-button type="primary">主要按钮</van-button>
    
      </div>
    </template>
    
    <script>
    
    // 引入组件
    import { Button } from "vant";
    
    export default {
      name: "web",
    
      // 注册组件
      components: {
        [Button.name]: Button
      }
    };
    </script>
    
    

    4、配置路由router.js

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

    5、访问测试

    npm run serve           # 启动项目
    

    http://localhost:8080/web

    在这里插入图片描述

    展开全文
  • app.vue <template> <div id="app"> <router-view/> </div> </template> /*********************************************************************************/...

    <template>
        <div class="">
            <van-sticky>
                <div>
                    <van-nav-bar style="background-color: #FF5777;" @click-left="onClickLeft">
                        <template #left>
                            <van-icon name='arrow-left' color="#FFFFFF" size="16px">
                            </van-icon>
                            <span style="color: #FFFFFF;font-size: 16px;padding-left: .1rem;">返回</span>
                        </template>
                        <template #title>
                            <span style="color: #FFFFFF;">新生列表</span>
                        </template>
                    </van-nav-bar>

                    <!-- 学生导航 -->
                    <van-row type="flex" justify="space-between" class='my-stu-nav'>
                        <van-col span="6">姓名</van-col>
                        <van-col span="6">学号</van-col>
                        <van-col span="6">领物品</van-col>
                        <van-col span="6">缴费</van-col>
                    </van-row>
                    <form action="">
                        <van-search v-model="keywords" show-action placeholder="请输入学生姓名或学号" @search="onSearch" @cancel="onCancel" />
                    </form>
                </div>
            </van-sticky>

            <!-- 学生列表 -->
            <div>
                <van-list v-model="loading" :finished="finished" :immediate-check='immediate' finished-text="没有更多了" @load="onLoadMore">
                    <van-row type="flex" v-for='(item,index) in list' :key='item.id' @click="gotoDetail(item.id)" justify="space-between" class='my-stu-list'>
                        <van-col span="6">{{item.name}}</van-col>
                        <van-col span="6">{{item.no}}</van-col>
                        <van-col span="6">{{item.is_get}}</van-col>
                        <van-col span="6">{{item.is_pay}}</van-col>
                    </van-row>
                </van-list>
            </div>

        </div>
    </template>

    <script>
        import {get_student_list} from '@/model/student.js'

        export default {
            name: '',
            data() {
                return {
                    keywords: '',
                    list: [],

                    loading: false,
                    finished: false,
                    immediate:true,
                    
                    page:1,
                    pagesize:20
                }
            },
            created() {
            },
            watch: {
                //监听属性和事件
            },
            methods: {
                //加载数据
                onLoadMore() {
                    // 异步更新数据
                    get_student_list(this.keywords,this.page,this.pagesize).then(res=>{
                        if(res.code == 100000){
                            if(this.page == 1){
                                this.list = res.result
                            }else{
                                this.list = this.list.concat(res.result)
                            }
                            this.page = this.page + 1
                            // 加载状态结束
                            this.loading = false;
                        }else{
                            //数据全部加载完成
                            this.finished = true;
                        }
                    })
                },

                //点击返回
                onClickLeft() {
                    this.$router.back()
                },
                //点击搜索
                onSearch() {
                    this.page = 1
                    this.onLoadMore();
                },
                //取消搜索
                onCancel() {
                    this.page = 1
                    this.onLoadMore();
                },
                //跳到详情
                gotoDetail(id) {
                    this.$router.push('/stu/detail/' + id)
                }
            },
            computed: {
                //计算属性

            },
            
            beforeCreate() {
                //console.log('beforeCreate函数......');
            },
            beforeMount() {
                //mounted函数时页面标签的内容基本还没有渲染完成
            },
            
            mounted() {
                //mounted函数时页面标签的内容基本已经渲染完成时调用这个函数
            },
            beforeDestroy() {
                //console.log('beforeDestroy函数......');
            },
            destroyed() {
                //console.log('destroyed函数......');
            },
            beforeUpdate() {
                //当数据发生改变时,在标签没有被渲染之前触发
            },
            updated() {
                //当数据发生改变时,在标签被渲染后触发
            }
        }
    </script>

    <style scoped>
        .my-stu-nav {
            background-color: #1989FA;
            text-align: center;
            height: 30px;
            font-size: 16px;
            line-height: 30px;
            color: #FFFFFF;
        }

        .my-stu-list {
            text-align: center;
            height: 45px;
            font-size: 14px;
            line-height: 45px;
            border-bottom: 2px solid #EBE8E8;
        }
    </style>
     

    展开全文
  • Vue3.0 +打字稿+ Vant //创建 vue create vue3 - ts - demo //选择Vue3.0 空格选择 enter确认 vue add typescript //启动 npm i npm run serve 数据 // 1 reactive将state 结语实现state数据的响应式 import { ...
  • 一、搭建vue项目 1、配置依赖环境 首先:配置vue环境,大家可自行百度 1>安装node.js 2>安装国内镜像 npm install -g cnpm --registry=http://registry.npm.taobao.org 3>安装vue-cli cnpm ...
  • 一个商城Demo,预先使用vant有赞UI,vue实现,使用mysql,表达实现。 实现的功能 登录/注册 商品列表 商品详情 购物车 收货地址 订单 项目预览 查看演示 在手机上效果更好,扫一扫体验 前端 项目依赖 项目运行 将img...
  • Vant vue用Cell,Popup,DatetimePicker,Picker制作时间和性别选择 <template> <div> <div class="from_item"> <van-cell title="出生年月" input-align="right" :value="...
  • 主要介绍了vue2.0项目实现路由跳转的详细方法,非常不错,具有一定的参考借鉴借鉴价值,需要的朋友可以参考下
  • Vue uni-app引用 vant-ui

    2021-08-13 13:43:54
    Vue uni-app引用 vant-ui 第一步 提前准备好 uni-app项目 第二部 下载 vant-ui压缩包 https://github.com/youzan/vant-weapp 第三部 讲压缩包中的dist文件按照这个目录放,自己也可以自定义 第四部 引用全局vant ...
  • 最近在用 Vue3 写一个开源的商城项目,开源后让大家也可以用现成的 Vue3 大型商城项目源码来练练手,目前处于开发阶段,过程中用到了 Vant3.0,于是就整理了这篇文章来讲一下如何...
  • taro3-vant-sample Taro3 中使用 vant-weapp 的示例 React 版本 需要关注的点 引用 vant 组件 引用 vant 组件需要在页面的 config 文件中进行配置,如 export default { navigationBarTitleText: '首页', ...
  • vue3.0项目vant组件引入

    2021-05-31 11:42:16
    安装命令 npm install vant@next --save (因为使用的是vue3.x 所以要安装vant的针对vue3的版本 vant@next) 第二部 vant的进阶使用 通过 npm install postcss postcss-pxtorem --save-dev (用来将px尺寸转化为rem...
  • vue电商项目.rar

    2019-10-21 19:42:49
    vue电商项目中前端技术运用了vue.js,路由导航守卫,路由懒加载,组件模块化开发,axios异步发送请求,element-UI页面布局,echarts图表制作等,后台使用Node.js,Express,Jwt (模拟session),Mysql,Sequelize ...
  • Vue2,Vue3引入vant

    千次阅读 2021-03-14 23:27:25
    vue2引入vant npm i vant -S npm i babel-plugin-import -D 找到后缀名为.babelrc的文件 //在原本代码后面补充这段代码 "plugins": [ ["import", { "libraryName": "vant", "libraryDirectory": "es", ...
  • VUE3.0引入vant组件库

    千次阅读 2020-09-10 15:33:05
    VUE3.0引入vant组件库引入通过 npm 安装通过 yarn 安装组件挂载组件使用 目前Vant 3 是基于 Vue 3 开发的,在使用 Vant 3 前,请将项目中的 Vue 升级到 3.0 以上版本。 引入 通过 npm 安装 在现有项目中使用 Vant 时...
  • vue 离线api(word)教程版本
  • vantvue中引入(cli3.x)

    千次阅读 2019-02-14 05:49:53
    下面记录一下vantvue项目中的按需引入: 1、npm安装vant(网络有问题的可以使用 cnpm): npm i vant -S 2、按需引入,还需要安装babel-plugin-import插件: npm i babel-plugin-import -D 3、配置babel-plugin-i....

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 15,508
精华内容 6,203
关键字:

vantvue

vue 订阅