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>

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

  不出意料会出现如下错误

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

21:11:07.242 SyntaxError

21:11:07.247 (1:5894) Unclosed bracket

21:11:07.248 > 1 | @-webkit-keyframes van-slide-up-enter{0%{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@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/[email protected]/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

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

原文地址:https://www.cnblogs.com/suvvm/p/11336954.html

时间: 2024-10-30 17:50:00

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

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

继上周新上线了简历模板之后,本周墨刀的原型模板库又欢喜地增添一名新成员! 有赞Vant组件库 (做电商的宝宝要捂嘴笑了) Vant 组件库是有赞前端团队开源的一套基于Vue的UI组件库,目前版本收录了50+个组件,都是来源于有赞的微商城业务,经过有赞业务的检验,轻量可靠 (目前在Github上已经收获星星7857颗) 相比于其他Vue UI组件库,Vant 组件库不只是提供基础的UI组件,还增加了许多移动商城内常用的业务组件,可以让开发者快速构建移动商城. 墨刀的 Vant 组件库模板 正如有赞

微信小程序引入Vant组件库

前期准备 Vant Weapp组件库:https://youzan.github.io/vant-weapp/#/intro 1.先在微信开发者工具中打开项目的终端: 然后初始化一个package.json文件:输入命令:npm init 然后一路回车默认的即可: npm init 项目就回产生一个package.json文件: { "name": "miniprogram", "version": "1.0.0", &quo

微信小程序——引入Vant组件库

背景 在微信小程序开发过程中,使用第三方组件库,高效便捷的使用 步骤 安装npm 右键小程序根目录,打开终端 输入:npm init Next 安装vant组件 右键小程序根目录,打开终端 输入:npm i @vant/weapp -S --production 构建npm 使用npm模块 完成 原文地址:https://www.cnblogs.com/zuiyue_jing/p/12260245.html

介绍推荐优秀的Vue UI组件库

Vue 是一个轻巧.高性能.可组件化的MVVM库,API简洁明了,上手快.从Vue推出以来,得到众多Web开发者的认可.在公司的Web前端项目开发中,多个项目采用基于Vue的UI组件框架开发,并投入正式使用.开发团队在使用Vue.js框架和UI组件库以后,开发效率大大提高,自己写的代码也少了,很多界面效果组件已经封装好了.在选择Vue UI组件库的过程中,通过GitHub上根据star数量.文档丰富程度.更新的频率以及维护等因素,也收集整理了一些优秀的Vue UI组件库. 下载资源:www.yi

【转】优秀的Vue UI组件库

原文来源:https://www.leixuesong.com/3342 Vue 是一个轻巧.高性能.可组件化的MVVM库,API简洁明了,上手快.从Vue推出以来,得到众多Web开发者的认可.在公司的Web前端项目开发中,多个项目采用基于Vue的UI组件框架开发,并投入正式使用.开发团队在使用Vue.js框架和UI组件库以后,开发效率大大提高,自己写的代码也少了,很多界面效果组件已经封装好了.在选择Vue UI组件库的过程中,通过GitHub上根据star数量.文档丰富程度.更新的频率以及维护

微信小程序导入Vant-Weapp组件库及出错处理

微信小程序导入Vant-Weapp组件库及出错处理一.下载Node.js*链接:https://nodejs.org/en/推荐选择LST的8.0以上版本,下载安装即可,安装完成后可以进行验证cmd打开终端,输入vant-v出现对应版本即为安装成功,也可输入npm -v查看对应的npm版本 二.在微信开发工具做对应操作 链接:https://youzan.github.io/vant-weapp/#/intro 后续可根据开发指南进行操作 三.安装Vant组件库选中miniprogram文件,右

在vue里面使用 vant ui组件库

一.放上vant官网 https://youzan.github.io/vant/#/zh-CN/ 二.按需引入vant组件 npm i vant -S npm i babel-plugin-import -D  //这是一个插件 按需引入时必须要引入 // 在 babel.config.js 中配置 module.exports = { plugins: [ ['import', { libraryName: 'vant', libraryDirectory: 'es', style: tru

VUE系列之Vant 移动端组件库的使用

#通过 npm 安装 #查看是否安装完成 #main.js 引入vant组件 #按钮使用例子: <van-button type="default">默认按钮</van-button> 更多组件使用查看:https://youzan.github.io/vant/?source=vuejsorg#/zh-CN/button 原文地址:https://blog.51cto.com/14388114/2462264

微信小程序使用第三方组件库

使用vant weapp来快速构建小程序 1.首先在项目文件夹下使用npm init 生成一个package.json的配置文件 2.然后输入组件提供的快速初始化的命令 npm i vant-weapp -S --production 3.工具---构建npm 4.在最右边详情里勾选上使用npm模块 5.在需要引用组件库的页面json文件里,添加:"usingComponents": { "van-button": "/path/to/vant-weapp