Vue项目中使用Vux的安装过程

最近想用vue+vux写一个项目，于是到vux的官网看了文档开始着手搭建项目，但是遇到一些坑。下面简单说下安装vux 的过程。

默认已安装vue环境

1.安装vux

npm install vux --save-dev

2.安装vux-loader

npm install vux-loader --save-dev //官网没提安装这个，但是不安装会报错

3.安装less-loader以正确编译less源码

npm install less less-loader --save-dev

4.安装 yaml-loader 以正确进行语言文件读取

npm install yaml-loader --save-dev

5.修改build/webpack.base.conf.js中的代码

将原文中的

修改成如下的

6.在安装完依赖和配置后文件以后，引入vux的模板，把之前的about.vue拿来修改，全部的代码如下

<template>
 <div class="about">
 <a href="./index.html" rel="external nofollow" >从about跳转到demo1</a>
 <group>
  <cell title="title" value="value"></cell>
 </group>
 </div>
</template>
<script>
 import { Group, Cell } from 'vux'
 export default {
 components: {
  Group,
  Cell
 }
 }
</script>
<style>
</style>

最后在运行 npm run dev，显示出的about.vue是这样的，代表已经引入vux成功，然后尽情的去使用vux的组件快速开发吧

总结

以上所述是小编给大家介绍的Vue项目中使用Vux的安装过程，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

您可能感兴趣的文章:

  • vue.js整合vux中的上拉加载下拉刷新实例教程
  • Vue中的Vux配置指南
  • vue 添加vux的代码讲解
  • Vue+Vux项目实践完整代码
  • 基于Vue框架vux组件库实现上拉刷新功能
  • vue+vux实现移动端文件上传样式
  • Vue中使用vux的配置详解
赞 (0)

相关推荐

  • vue 添加vux的代码讲解

    简介 Vux(读音 [v'ju:z],同views)是基于WeUI和Vue(2.x)开发的移动端UI组件库,主要服务于微信页面. 基于webpack+vue-loader+vux可以快速开发移动端页面,配合vux-loader方便你在WeUI的基础上定制需要的样式. vux-loader保证了组件按需使用,因此不用担心最终打包了整个vux的组件库代码. vux并不完全依赖于WeUI,但是尽量保持整体UI样式接近WeUI的设计规范.最初目标是创建一个易用,实用,美观的移动端UI组件库,现在离理想状

  • 基于Vue框架vux组件库实现上拉刷新功能

    最近公司在研发app,选择了基于Vue框架的vux组件库,现总结在实现上拉刷新功能遇到的坑: 1.问题:只刷新一次,解决方法:需要自己手动重置状态 this.scrollerStatus.pullupStatus = 'default', 2.问题:不能滚动,解决方法:因为启用keep-alive缓存,需要设置 activated () { this.$refs.scroller.reset() } 如果还没效果,请在获取后台数据后,执行如下代码 this.$nxtTick(() => { th

  • vue.js整合vux中的上拉加载下拉刷新实例教程

    vue.js整合vux中的上拉加载下拉刷新实例教程

    前言 Vux 是基于 Vue 和 Weui 开发的手机端页面 UI 组件库,开发初衷是满足公司的微信端表单需求,因为第三方的调查问卷表单系统在手机上实在比较丑(还是 PC 那一套样式适配了大小而已).于是用 vue 重构了表单组件,后来一发不可收拾把其他常用组件也一并开发了. 相比于 React 还是更喜欢用 Vue ,除了目前社区组件不多,周边构建工具还是比较完善的(作者也特别勤奋). 下面话不多说了,来一看看详细的介绍吧. 先上图 创建项目 使用vue-cli 创建一个vue项目 安装vux

  • vue+vux实现移动端文件上传样式

    vue+vux实现移动端文件上传样式

    样式使用的是vux的cell组件 如下图的官方demo样子 上图的样式需要修改一下,把 保护中 修改成一个图片 并且内嵌一个input type='file'  就可以拥有好看的样式的文件上传了 <!--引入组件--> import { Cell } from 'vux' <!--官网的组件是这么写的--> <group> <cell title="title" value="value"></cell>

  • Vue+Vux项目实践完整代码

    Vue+Vux项目实践完整代码

    提供完整的路由,services````````````` ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

  • Vue中的Vux配置指南

    简介 Vux(读音 [v'ju:z],同views)是基于WeUI和Vue(2.x)开发的移动端UI组件库,主要服务于微信页面. 基于webpack+vue-loader+vux可以快速开发移动端页面,配合vux-loader方便你在WeUI的基础上定制需要的样式. vux-loader保证了组件按需使用,因此不用担心最终打包了整个vux的组件库代码. vux并不完全依赖于WeUI,但是尽量保持整体UI样式接近WeUI的设计规范.最初目标是创建一个易用,实用,美观的移动端UI组件库,现在离理想状

  • Vue中使用vux的配置详解

    Vue中使用vux的配置,分为两种情况: 一.根据vux文档直接安装,无需手动配置 npm install vue-cli -g // 如果还没安装 vue init airyland/vux2 my-project // 创建名为 my-project 的模板 cd my-project // 进入项目 npm install --registry=https://registry.npm.taobao.org // 开始安装 npm run dev // 运行项目 二.想在已创建的Vue工程

  • Vue项目中使用Vux的安装过程

    Vue项目中使用Vux的安装过程

    最近想用vue+vux写一个项目,于是到vux的官网看了文档开始着手搭建项目,但是遇到一些坑.下面简单说下安装vux 的过程. 默认已安装vue环境 1.安装vux npm install vux --save-dev 2.安装vux-loader npm install vux-loader --save-dev //官网没提安装这个,但是不安装会报错 3.安装less-loader以正确编译less源码 npm install less less-loader --save-dev 4.安装

  • 在vue项目中安装使用Mint-UI的方法

    在vue项目中安装使用Mint-UI的方法

    一.Mint UI 是 由饿了么前端团队推出的 一个基于 Vue.js 的移动端组件库,具有以下特性: 使用文档: http://mint-ui.github.io/#!/zh-cn Mint UI 包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要.通过它,可以快速构建出风格统一的页面,提升开发效率. 真正意义上的按需加载组件.可以只加载声明过的组件及其样式文件,无需再纠结文件体积过大. 考虑到移动端的性能门槛,Mint UI 采用 CSS3 处理各种动效,避免浏览器进行不必要的

  • vue项目中vue-i18n和element-ui国际化开发实现过程

    vue项目中vue-i18n和element-ui国际化开发实现过程

    在vue构建的项目中,我们常用element-ui插件,在我的博客前面有讲述,具体怎么用vue-i18n插件进行国际化开发,但是在前面博客中,如果项目中使用了element-ui插件,插件中的语言文字替换可以结合element-ui插件一同进行.element-ui插件自身也提供了语言包.具体的配置和使用方法参考如下: 默认你已构建好了一个vue项目,在vue项目中安装vue-i18n以及element-ui插件 cnpm i vue-i18n --save-dev cnpm i element

  • vue项目中使用particles实现粒子背景效果及遇到的坑(按钮没有点击响应)

    为了提高页面展示效果,登录界面内容比较单一的,粒子效果作为背景经常使用到,vue工程中利用vue-particles可以很简单的实现页面的粒子背景效果. 解决问题: 以背景方式显示 无法获取按钮焦点,触发不了点击事件 实现过程 安装vue-particles npm install vue-particles --save-dev 全局配置vue-particles 在main.js里面: import VueParticles from 'vue-particles' Vue.use(VueP

  • 浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法

    1.在Vue项目中引用公共方法 作为一个新人小白,在使用vue的过程中,难免会遇到很多的问题,比如某个方法在很多组件中都能用的上,如果在每个组件上都去引用一次的话,会比较麻烦,增加代码量.怎么做比较好呢,话不多说直接看代码把 首先 要在main.js中引入公共js.然后,将方法赋在Vue的原型链上. 像图中这样. 然后在需要的组件上去引入这个方法 mouted (){ //调用方法 this.common.login(); } /**然后公共方法里写一段简单的代码*/ export defaul

  • vue项目中播放rtmp视频文件流的方法

    想要播放rtmp视频文件流用H5的video标签是不可行的,所以这里我引用了一款插件 vue-video-player ,当然想要流畅的运用 vue-video-player 播放视频还必须安装辅助插件 videojs-flash.最后还要特别注意的是必须使用npm安装,当然我在安装过程中也遇到了一个问题,就是在选择使用 vue-video-player前还安装了videojs插件,卸载从新安装 vue-video-player时由于项目中有以前安装的其他视频组件影响,一直运行不起来,后面我把n

  • vue项目中使用ts（typescript）入门教程

    目录 1.引入Typescript 2.配置文件webpack配置 3.让项目识别.ts 4.vue组件的编写 data()中定义数据 props传值 完整代码案例 最近项目需要将原vue项目结合ts的使用进行改造,这个后面应该是中大型项目的发展趋势,看到一篇不错的入门教程,结合它并进行了一点拓展记录之.本文从安装到vue组件编写进行了说明,适合入门. 1.引入Typescript npm install vue-class-component vue-property-decorator --

  • vue项目中的支付功能实现(微信支付和支付宝支付)

    vue项目中的支付功能实现(微信支付和支付宝支付)

    目录 项目中常见的支付方式 支付宝支付 微信支付 项目中常见的支付方式 支付宝支付 微信支付 余额支付(也需要支付宝或微信充值) 注意:本文仅从前端角度展开讲解 支付宝支付 项目难点: 页面是h5网页,用支付宝支付必须得到支付宝授权,调用支付宝的api. (如何授权请参照:调用支付宝api) 支付宝支付的一般过程是: 调用订单接口,获得订单号,支付金额等.    传递订单号,金额 至预支付接口    后台会返回来一个form,然后提交form自动跳转到支付宝支付页面 支付过程: 下图为为接口文档

  • vue项目中main.js使用方法详解

    目录 第一部分:main.js文件解析 第二部分:Vue.use的作用以及什么时候使用 Vue.use是什么?(官方文档) Vue.use()什么时候使用? 补充:关于main.js方便小技巧 总结 第一部分:main.js文件解析 src/main.js是入口文件,主要作用是初始化vue实例并使用需要的插件 在main.js文件中定义了一个vue对象,其中el为实例提供挂载元素 //基础配置 import Vue from 'vue' import App from './App.vue' /

  • Vue项目中打包优化的四种方法详解

    目录 前言 打包优化的目的: 性能优化的主要方向: 1.异步组件配置(路由懒加载) 2.去掉打包后的 console 3.使用CDN 4.yarn build生成dist目录 总结 前言 默认情况下,通过import语法导入的第三方依赖包,最终会全部打包到一个js文件中,会导致单文件体积过大大,在网速底下时会阻塞网页加载,影响用户体验. 打包优化的目的: 1.项目启动速度,和性能 2.必要的清理数据 3.减少打包后的体积 第一点是核心,第二点呢其实主要是清理console 性能优化的主要方向:

随机推荐