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>

阅读更多