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指向