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引入到哪里
        • 先将方法放到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 : 100 px ;
                height : 100 px
              }
              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 >