vue搭配vux-ui框架

vux ui框架尤雨溪推荐的它是由腾讯内部的开发人员创建的（已经创业了）

https://vux.li/#/zh-CN/components

vux 默认不支持全局添加

ui样式来自于weui

----------安装步骤------------

npm install vue-cli -g // 如果还没安装

vue init airyland/vux2 projectPath

cd projectPath
npm install --registry=https://registry.npm.taobao.org

npm run dev

查找组件是顶部的组件选项开始--->全部组件
- 每个被选择的组件标题下面都有
- - 四个小标题：选择进入demo页面复制所需要的组件demo代码
- 在HelloFromVux.vue中添加并展示到页面当中HelloFrom.vue是展示页面组件的集合页，需要在这里面引入并注册
- - 默认会有返回按钮需要在首页将他隐藏，此时可以查看文档给的组件属性信息进行修改showBack:false
  - - 这些属性又从全部组件--->Xheader---》Props中查看
    - - 这是esl-ink的报错，如果出现就将es-link在【build】--->webpack.base.config.js--->module--->ruels--->loader:eslint-loader注释掉
- 添加列表cell cell-box是表格集合全部组件--->cell-box--->进入demo页面：
- - 在放到INfo.vue中，使用块级元素包裹
  - - <template>
      
          <div>
      
              <group>
      
                  <cell-box is-link link='/detail' v-for="data in list">{{data.goodsName}}</cell-box>
      
              </group>
      
          </div>
      
      </template>
      
      <style>
      
          .weio-cells{margin-top:0 !important;}
      
      </style>
- vux的动态获取信息路由和请求:(可以直接使用link属性在任意进行跳转，前提实在路由中进行设置)
- - 页面的跳转，在main.js中进行路由的配置这里添加了detail页面
  - - 先引入: import Detail from "./components/Detail"
    - - const routes = [{
        
        path: '/',
        
        component: Info
        
        },{
        
        path: '/detail',
        
        component: Detail
        
        }]
  - vux中提供了数据请求的方法，是以插件的形式引入的，在main.js中全局引入Vue.user(AjaxPlugin)：
  - - 引入ajax插件之后语法和vue-resource一样（$http）,但也有区别
    - <script>
      
          import {CellBox,Group} from 'vux'
      
          export default {
      
              name:"info",
      
              components:{CellBox,Group},
      
              data(){
      
                  return {
      
                      list:[]用来遍历时存放的数组
      
                  }
      
              },
      
              mounted(){
      
                  var that = this 更改this指向
      
                  this.$http({
      
                      method:"get",
      
                      url:"http://datainfo.duapp.com/shopdata/getGoods.php?callback=",
      
                      params:{"classID":1},
      
      
      
                  }).then((data)=>{
      
                      console.log(data)此时打印出来的是名为data的数组对象所以需要解析data.data
      
                      let datas = eval(data.data);把值赋给data中的list:[]
      
                      that.list = datas
      
                  })
      
              }
      
          }
      
      </script>
    - 然后在组件中遍历 <cell-box is-link link='/detail' v-for="data in
    - 把路由跳转后的显示区进行限制就需要router-view的位置变更，想要组件在哪里显示就把router-view引入到哪里
    - 先将<router-view>方法放到helloFromVux.vue中
    - - import Info from './components/Info'
      - const routes = [{
        
              path: '/',
        
              name: 'PageTransition',
        
              component: PageTransition,
        
              children: [{
        
                path: '',
        
                component: Info
        
              }, {
        
                path: '/detail',
        
                component: Detail
        
              }]
        
            }]
    - 原本rouuter-virew实在App.vue中的，所以将helloFromVux引入到App.vue中
    - - <template>
        
        <div id="app">
        
        <Hello></Hello>
        
        </div>
        
        </template>
        
        <script>
        
        import Hello from '@/components/HelloFromVux'
        
        export default {
        
        name: 'app',
        
        components:{Hello}
        
        }
        
        </script>
    - 那么默认的初始页就改为了Info.vue
    - 添加切换页面的过渡效果，需要引入模板
    - - 它定义了一个主的路由用来包裹我们以后在项目中任意调用的router-view；需要把下面的代码复制到main.js当中替代当前的路由配置
      - import PageTransition from "..."
        
        //重写后退样式
        
        VueRouter.prototype.goBack = function () {
        
        this.isBack = true
        
        window.history.go(-1)
        
        }
        
        引入新的路由配置
        
        const routes = [{
        
              path: '/',
        
              name: 'PageTransition',
        
              component: PageTransition,
        
              children: [{
        
                path: '',
        
                component: Info
        
              }, {
        
                path: '/detail',
        
                component: Detail
        
              }]
        
            }]
      - 给header添加事件返回首页时，回退按钮消失改变文本内容
      - <template>
        
        <div>
        
        <x-header :left-options="{showBack: istrue}" @click.native="getHome" >Mr Au</x-header>
        
            <router-view @to-parent="getChild" ></router-view>
        
            <Footers></Footers>
        
        </div>
        
        </template>
        
        <script>
        
        import { XHeader } from 'vux'
        
        import Info from './Info'
        
        import Footers from './Footers'
        
        export default {
        
        components: {XHeader,Info,Footers},
        
        data () {
        
            return {
        
              // note: changing this line won't causes changes
        
              // with hot-reload because the reloaded component
        
              // preserves its current state and we are modifying
        
              // its initial state.
        
              msg: 'Hello World!',
        
              istrue:false
        
            }
        
        },
        
        methods:{
        
          getChild(msg){
        
              this.msg = msg,
        
              this.istrue = true
        
          },
        
          getHome(){
        
              this.msg = msg;
        
              this.istrue:false
        
          }
        
        }
        
        }
        
        </script>
        
        <style>
        
        .vux-demo {
        
        text-align: center;
        
        }
        
        .logo {
        
        width: 100px;
        
        height: 100px
        
        }
        
        </style>
    - 添加底部：tabbar，在展示页HelloFromVux中注册并展示
    - - import Footers from './Footers'
      - components: {XHeader,Info,Footers},
      - <template>
        
             <tabbar>
        
              <tabbar-item>
        
                <img slot="icon" src="../assets/demo/icon_nav_button.png">
        
                <span slot="label">Wechat</span>
        
              </tabbar-item>
        
              <tabbar-item show-dot>
        
                <img slot="icon" src="../assets/demo/icon_nav_msg.png">
        
                <span slot="label">Message</span>
        
              </tabbar-item>
        
              <tabbar-item selected link="/component/demo">
        
                <img slot="icon" src="../assets/demo/icon_nav_article.png">
        
                <span slot="label">Explore</span>
        
              </tabbar-item>
        
              <tabbar-item badge="2">
        
                <img slot="icon" src="../assets/demo/icon_nav_cell.png">
        
                <span slot="label">News</span>
        
              </tabbar-item>
        
            </tabbar>
        
        </template>
        
        <script>
        
            import { Tabbar, TabbarItem, Group, Cell } from 'vux'
        
            export default {
        
                name:"foot",
        
                componets:{Tabbar, TabbarItem}
        
            }
        
        </script>
        
        <style>
        
        </style>

vue搭配vux-ui框架相关推荐

Vue PC端框架和Vue移动端UI框架
Vue PC端框架和Vue移动端UI框架在学习Vue的过程之中,我发现不管是 BAT 大厂,还是创业公司,Vue 都有着广泛的应用,而且框架层出不穷,学习文档也越来越多,Vue也越来越受欢迎.下面是 ...
vue 移动端ui框架
vue移动端ui框架合集转载于:https://www.cnblogs.com/knuzy/p/9508042.html
vue和哪个php框架搭配,vue配什么ui框架比较好
Vue是一种用于构建用户界面的渐进式框架,它可以与各种框架或工具结合使用,如果是做PC端应用,选择ElementUI框架最好,做App移动端开发选择AUI或ionIc框架最好. Vue介绍: Vue是 ...
优秀的基于VUE移动端UI框架合集
vonic 一个基于 vue.js 和 ionic 样式的 UI 框架,用于快速构建移动端单页应用,很简约,是我喜欢的风格 star 2.3k 中文文档在线预览 vux 基于WeUI和Vue(2.x ...
关于前端框架vue/react及UI框架的配合
介绍收集收集vue/react搭配UI框架的demo, 网络请求库常用axios 移动端h5 vite + vue3 + vant3 : https://gitee.com/WeiziPlus/mu ...
Vue移动端UI框架
自从Vue成为前端的主流框架之后,各家UI框架也越来越多,今天重点聊一聊移动端的那些框架吧,Vue移动端框架到底哪家强?以下排名不分先后,开发过程中根据自己的具体业务需求来做选择. 1.Vux 中文文 ...
基于vue移动端UI框架
1.vux 基于WeUI和Vue(2.x)开发的移动端UI组件库基于webpack+vue-loader+vux可以快速开发移动端页面,配合vux-loader方便你在WeUI的基础上定制需要的样式 ...
vue3使用的移动端UI框架,vue移动端ui框架哪个好
号称目前最火的前端框架Vue,它有什么显著特点呢? 1.Vue是什么是目前最火的一个前端框架,除了可以开发网站,还可以开发手机App.是前端的主流框架之一,和.一起,并成为前端三大主流框架. 是一套构 ...
推荐几个VUE移动端UI框架
vonic 一个基于 vue.js 和 ionic 样式的 UI 框架,用于快速构建移动端单页应用.https://wangdahoo.github.io/vonic/docs/#/ vux 基于We ...
Vue移动端UI框架mux-ui
移动端UI框架mux-ui 移动端UI框架mux-ui 安装组件 Actionsheet组件按钮Button组件头像Avatar组件 Cell组件 Card组件 Alert组件 Confirm组 ...

vue搭配vux-ui框架

vue搭配vux-ui框架相关推荐

最新文章

热门文章