HBuilderX使用Vant组件库

HBuilderX是一款由国人开发的开发工具，其官网称其为轻如编辑器、强如IDE的合体版本。但是官方的社区中关于Vant组件的安装大多都是针对微信小程序开发安装Vant Weapp，鄙人尝试了各种方法，经历各种错误后终于成功安装vant组件库，在这里分享一下使用HBuilderX进行vue.js开发时安装Vant组件库的经验，使用的版本为2019.08.10更新的2.2.0版本。

本篇所有操作建立在操作系统为windows且已经成功安装配置node.js的基础上。

一、建立uni-app新项目

　　

二、在终端打开项目目录

　　可以直接在HBuilderX中直接右击项目名称选择‘使用命令行窗口打开目录’，之后会提示插件【内置终端】未安装，选择确定来安装内置终端插件,之后便可以通过内置终端打开对应项目目录，当然也可以直接在windows终端中打开对应目录

　　之后我将使用内置终端进行操作.

三、初始化项目创建package.json

在终端中执行

npm init

　　之后会让你填写一些如项目名称、版本号之类的项目介绍，如果不知道或者不想填就一路回车。　　

四、安装Vant组件库

打开有赞vant的官方文档，快速上手中给出了通过npm安装vant的指令，在终端执行它。

npm i vant -S

不用管这几个警告

这时按照官方给的引入方式引入组件，我这里图方便直接引入所有组件，在main.js中添加

import Vant from 'vant';

import 'vant/lib/index.css';

Vue.use(Vant);

　　这时我们在pages下index.vue中尝试使用vant组件，这里我用vant的自定义输入框做演示，在index.vue添加如下代码

<van-cell-group>

  <van-field

    value="{{ username }}"

    required

    clearable

    label="用户名"

    icon="question-o"

    placeholder="请输入用户名"

    bind:click-icon="onClickIcon"

  />

  <van-field

    value="{{ password }}"

    type="password"

    label="密码"

    placeholder="请输入密码"

    required

    border="{{ false }}"

  />

</van-cell-group>

　　编译并运行，可以使用其自带的内置浏览器插件，可在工具——插件安装中配置安装，如果安装失败就给管理员权限，之后点击预览就会开始编译项目。

　　不出意料会出现如下错误

::07.242 Module build failed (from ./node_modules/postcss-loader/src/index.js):

::07.242 SyntaxError

::07.247 (:) Unclosed bracket

::07.248 >  | @-webkit-keyframes van-slide-up-enter{%{-webkit-transform:translate3d(,%,);transform:translate3d(,%,)}}@keyframes van-slide-up-…………………省略巨量……………………… (left,#ff6034,#ee0a24);background:linear-gradient(to right,#ff6034,#ee0a24)}

　　这是HBuilderX的bug已经过了很多个版本都没有修复，希望官方早日解决。出现这个是因为在main.js中引入vant的样式import 'vant/lib/index.css'时出现了错误。

五、建立一个html的模板文件

　　删除main.js中错误代码 import
'vant/lib/index.css'，以下方代码作为模板建立model.html

<html lang="zh-CN">

    <head>

        <meta charset="utf-8">

        <meta http-equiv="X-UA-Compatible" content="IE=edge">

        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.0/lib/index.css">

        <title>

            <%= htmlWebpackPlugin.options.title %>

        </title>

        <script>

            document.addEventListener('DOMContentLoaded', function() {

                document.documentElement.style.fontSize = document.documentElement.clientWidth / 20 + 'px'

            })

        </script>

        <link rel="stylesheet" href="<%= BASE_URL %>static/index.css" />

    </head>

    <body>

        <noscript>

            <strong>Please enable JavaScript to continue.</strong>

        </noscript>

        <div id="app"></div>

        <!-- built files will be auto injected -->

    </body>

</html>

　　在manifest.json的h5配置中将其作为index.html模板导入

　　之后遍可以发现错误没了，在浏览器中查看会发现依然没有样式。

六、在对应页面引入vant样式

　　将

@import 'vant/lib/index.css';

　　添加至使用vant组件的页面 style块中，这时编译并从浏览器中查看，虽然vant组件样式已经出现，但是有部分样式依旧不准确。

七、安装Vue官方提供的脚手架Vue Cli 3

　　右击项目名称选择‘使用命令行窗口打开目录执行

npm install -g @vue/cli

之后不出意外便可以获得正确的样式了。

HBuilderX使用Vant组件库的更多相关文章

  1. 墨刀联合有赞Vant组件库，让你轻松设计出电商原型

    继上周新上线了简历模板之后,本周墨刀的原型模板库又欢喜地增添一名新成员! 有赞Vant组件库 (做电商的宝宝要捂嘴笑了)   Vant 组件库是有赞前端团队开源的一套基于Vue的UI组件库,目前版本收 ...

  2. 微信小程序引入Vant组件库

    前期准备 Vant Weapp组件库:https://youzan.github.io/vant-weapp/#/intro 1.先在微信开发者工具中打开项目的终端: 然后初始化一个package.j ...

  3. vue-cli3移动端自适应配置 Vant组件库

    module.exports = { presets: [ '@vue/app' ], plugins: [ ['import', { libraryName: 'vant', libraryDire ...

  4. 移动端Vant组件库REM适配

    REM适配 基础配置 在页面布局之前,对REM进行配置,以适配移动端特点. 官方参考 Vant文档---->快速上手---->进阶用法---->Rem适配----> Vant ...

  5. vue - 搭建 webapp 自适应项目-使用 vant 组件库 并 可自动调节大小

    1.创建个vue 项目,这里不详细写怎么创建,参考 vue - 指令创建 vue工程 - 岑惜 - 博客园 (cnblogs.com) https://www.cnblogs.com/c2g52013 ...

  6. 16款优秀的Vue UI组件库推荐

    16款优秀的Vue UI组件库推荐 Vue 是一个轻巧.高性能.可组件化的MVVM库,API简洁明了,上手快.从Vue推出以来,得到众多Web开发者的认可.在公司的Web前端项目开发中,多个项目采用基 ...

  7. [转载]前端——实用UI组件库

    https://www.cnblogs.com/xuepei/p/7920888.html Angular UI 组件 ngx-bootstrap 是一套Bootstrap 组件 官网:https:/ ...

  8. 强烈推荐优秀的Vue UI组件库

    Vue 是一个轻巧.高性能.可组件化的MVVM库,API简洁明了,上手快.从Vue推出以来,得到众多Web开发者的认可.在公司的Web前端项目开发中,多个项目采用基于Vue的UI组件框架开发,并投入正 ...

  9. ui组件库

    基于Vue的Quasar Framework 中文网 http://www.quasarchs.com/ quasarframework/quasar: Quasar Frameworkhttps:/ ...

随机推荐

  1. 不使用 ASR 将虚机还原到另一个数据中心

    背景 在 Azure 上可能会遇到一个场景是将一台虚机搬到另一台数据中心,在不借助 ASR 的情况下我们该如何做? 因为 ASR 在云上更多的场景是用于灾备到异地.对于虚机的相关信息主要的是磁盘和网络 ...

  2. 深入学习Spring框架（二）- 注解配置

    1.为什么要学习Spring的注解配置? 基于注解配置的方式也已经逐渐代替xml.所以我们必须要掌握使用注解的方式配置Spring. 关于实际的开发中到底使用xml还是注解,每家公司有着不同的使用习惯 ...

  3. Python 爬虫从入门到进阶之路（十八）

    在之前的文章我们通过 scrapy 框架 及 scrapy.Spider 类做了一个<糗事百科>的糗百爬虫,本章我们再来看一下相较于 scrapy.Spider 类更为强大的 CrawlS ...

  4. linux系统的基础优化

    目录 前言 网络优化 在虚拟软件中配置虚拟局域网 接着可以配置自己windows主机的网络连接配置 在虚拟软件中虚拟机添加网卡 虚拟机中的系统基础优化 前言 在自己做linux的相关服务实验时,是没有 ...

  5. 9.18考试 第二题Dinner题解

    当时初步感觉是一个类似动归或者贪心的神题,然而由于本题已经给出顺序,贪心貌似并没有什么道理,所以放弃贪心.然后又由于这是一个环的问题,我想到了“合并石子”那种环转链的思路,然后就是一个O(n^2*m) ...

  6. Socket网络编程系列教程序

    C语言的用途相当多,可以用在数据结构.数据库.网络.嵌入式等方面,历经40多年不衰,真是厉害!最近一直想从某一应用方面写一个系列教程,好好地把某一方面讲深讲透.         正好博主对网络方面的编 ...

  7. 《ElasticSearch6.x实战教程》之简单的API

    第三章-简单的API 万丈高楼平地起 ES提供了多种操作数据的方式,其中较为常见的方式就是RESTful风格的API. 简单的体验 利用Postman发起HTTP请求(当然也可以在命令行中使用curl ...

  8. 内核下载、nfs挂载：个性问题及解决方法~~共勉

    开发板下载内核遇到starting waiting问题时: 首先想到是下载地址的问题! 将原本下载地址减去0X40,例如:smart210下载地址0X20008000,修改为0X20007FC0,即可 ...

  9. Spring Cloud中Hystrix、Ribbon及Feign的熔断关系是什么?

    导读 今天和大家聊一聊在Spring Cloud微服务框架实践中,比较核心但是又很容易把人搞得稀里糊涂的一个问题,那就是在Spring Cloud中Hystrix.Ribbon以及Feign它们三者之 ...

  10. 个人永久性免费-Excel催化剂功能第82波-复制粘贴按源区域大小自动扩展收缩目标区域

    日常工作中,复制粘贴的操作,永远是最高频的操作,没有之一,在最高频的操作上,进行优化,让过程更智能,比一天到晚鼓吹人工智能替换人的骇人听闻的新闻来得更实际.此篇带来一点点的小小的改进,让日后无数的复制 ...