vue学习_mikaelemmmm-CSDN博客

本文链接：https://blog.csdn.net/jj546630576/article/details/77662613

    #1 安装vue-cli脚手架 ：sudo npm install -g vue-cli
#2 查看可以使用哪个模板 ： vue list
#3 vue init webpack(模板名称) sell(项目名称)
#4 安装过程 ：
  -- Project name sell  （项目名称sell）
  -- Project description sell app （sell app）
  -- Author <Seven 546630576@qq.com> （项目作者）
  -- Vue build standalone
  -- Install vue-router? Yes
  -- Use ESLint to lint your code? Yes
  -- Pick an ESLint preset Standard
  -- Setup unit tests with Karma + Mocha? No (项目单元测试等，不需要)
  -- Setup e2e tests with Nightwatch? Yes

  -- cd sell
  -- npm install (安装成功后会多一个npm_modules依赖库)
  -- npm run dev (启动开发环境)


  安装完成后分析整个项目流程(这里看到两篇文章比较好)：
          http://www.jianshu.com/p/2769efeaa10a
          https://zhuanlan.zhihu.com/p/24322005

  【调试工具】：
        vue-devtools:在chrome安装vue-devtools，然后f12，查看就有vue这一项，方便调试
        jsonview

#5 .eslintrc.js：
    extends：继承一个标准的规则，在安装的时候我们自己选择的，vue预先定义了很多规则可供我们选择(https://github.com/standard/standard/blob/master/docs/RULES-en.md)
    rules：除了extends继承标准，我们可以在rules对某些规则做修改，比如默认就修改了3个规则（
            'arrow-parens': 0,   #0忽略规则检查
            'generator-star-spacing': 0, #0忽略规则检查
            'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0 #生产环境不允许开启debug
          ）
#6 svg图片转换字体：
    https://icomoon.io/->点击IcoMoon App-->Import Icons(导入自己svg)-->选择Untitled Set下的生成好的图标->Prefen..自定义名字->下载
    下载后打开demo.html 查看引用代码-->将font文件夹、style.css拷贝到项目中

#7 将css改为stylus，将xx.css改名为xx.styl(stylus文件后缀为styl)，同时将xx.css中的大括号"{}"、";"都去掉就可以了

#8 安装扩展"stylus"、"stylus-loader",在package.json中添加：
    "stylus": "^0.54.5",
    "stylus-loader": "^2.1.1",
    然后在项目根目录 npm install

#9 本身flex有浏览器兼容问题，不同浏览器要写不同前缀兼容，在vue-cli中的vue-loader依赖一个postcss库，这个库自动搞定兼容写法，我们只需要按照标准写法来写就可以了
   如：
        在vue-cli项目中写法 : flex : 1
        在普通项目中写法: flex:1;-webkit-flex:1;-mis-flex:1....

#10 vue-router（处理路由、跳转）:如果在安装脚手架的时候没有选择安装vue-router,那就要npm自己安装，在package.json中的dependencies中添加：
    "dependencies": {
        ...
        "vue-router": "^2.7.0"
    },
    【注】：这里捎带提一下，要想在package.json安装依赖库，但是不知道版本，就去github查看

    然后在项目根目录执行,npm install(官网https://router.vuejs.org/zh-cn/essentials/getting-started.html)
    使用方法，在main.js中添加：
        import Vue from 'vue'
        import VueRouter from 'vue-router'

    然后在App.vue页面中:
        <template>
          <div id="app">
            <v-header></v-header>
            <div class="tab">
              <div class="tab-item">
                <router-link to="/goods">商品</router-link>
              </div>
              <div class="tab-item">
                <router-link to="/seller">商家</router-link>
              </div>
            </div>
            <router-view></router-view>
          </div>
        </template>

    在src/router/index.js中：
        import Vue from 'vue'
        import Router from 'vue-router'
        import goods from '../components/goods/goods.vue'
        import seller from '../components/seller/seller.vue'

        //使用前先注册
        Vue.use(Router)

        export default new Router({
          routes: [
            { path: '/goods', name: 'goods', component: goods },
            { path: '/seller', name: 'seller', component: seller }
          ]
        })


    在main.js添加默认跳转页：
    router.push('/seller') // 进入首页，默认跳转

    更多vue-router请看：
        https://segmentfault.com/a/1190000007825106
        http://www.cnblogs.com/lastnigtic/p/6486693.html


#11 安装vue-resource(ajax处理前后台请求)，在package.json的dependencies中添加：
     "dependencies": {
        ...
        "vue-resource": "^1.3.4"
      }
      【注】：这里捎带提一下，要想在package.json安装依赖库，但是不知道版本，就去github查看

    在main.js中注册
        // 注册VueResource
        Vue.use(VueResource)
    在页面上用
        this.$http.get('/api/seller').then((response) => {
            response = response.body
            if (response.errno === ERR_SUCCESS) {
              this.seller = response.data
            }
        })



#12 alias别名：定义在webpack.base.conf.js中resolve/alias下


#13 布局之Sticky footers，使用fixed布局，内容少的时候，按钮也在底部固定位置，不会向上收；内容多的时候下拉，啦到最后，就可以看到下面固定按钮、区块，从而达到不会遮挡内容作用；
    html
    <div class="detail">  //最外层
      <div class="detail-wrapper clearfix">  //滑动区域、填充内容容器
        <div class="detail-main"></div>//具体填充的内容、滑动区域
      </div>
      <div class="detail-close">
         <i class="icon-close"></i>
      </div> //关闭按钮、区块不会随着滑动区域滑没了
    </div>


   css:
   .detail
      position: fixed;
      z-index: 100
      top: 0
      left: 0
      width: 100%
      height: 100%
      overflow: auto
      background-color: rgba(7, 17, 27, 0.8)
      .detail-wrapper
        min-height :100%
        .detail-main
          margin-top:64px
          padding-bottom:64px
      .detail-close
        position :relative
        width :32px
        height :32px
        margin : -64px auto 0 auto
        clear :both
        font-size:32px


#14 布局之两边横线中间文字，两边线距离两边窗口有一定距离，距离文字有一定距离，线的长度自适应   ，类似" ---- 特惠 ---- "
    答案：移动端使用flex布局可以解决


#15 为什么有时候在created中或者其他方法中可以直接this.xxx,而这个xxx没有在data中定义，html的模板中也可以使用这个xxx，但是有时候又不行


#16 css让文字无论多少行都垂直水平居中，display:table
        <div class='parent'>
            <span class="text">dddssds</span>
        </div>
        css:
            .parent{display:table}
            .parent .text{display:table-cell; vertical-align :middle}



#17 better-scroll:

    17.1 package.json添加:
    "dependencies": {
        .....
        "better-scroll":"^0.1.7"
    }

    17.2 先初始化scroll
        methods: {
          __initScroll() {
            #this.menuScroll = new BScroll("dom对象，即想要滑动的div","一个对象,传入scroll参数")
            #this.foodsScroll = new BScroll("dom对象，即想要滑动的div","一个对象,传入scroll参数")

             this.menuScroll = new BScroll(this.$refs.menu_wrapper, {})  #v-el已经淘汰了，全用ref代替
             this.foodsScroll = new BScroll(this.$refs.food_wrapper, {}) #v-el已经淘汰了，全用ref代替
          }
        }



#18 点击router-link向route-view传递值与模板传递值一样

#19 在组件的props接受的值是Object、Array，默认的defaults要是一个方法
     props: {
      selectFoods: {
        type: Array,
        default() {
          return []
        }
      },
    }

<?php if($user['userInfo']['ls_bf_expire_date'] >= time() && $user['userInfo']['ls_bf_start_date'] <= time() ):?>
                <?php if( ($user['userInfo']['ls_zb_bf_num'] + $user['userInfo']['ls_hf_bf_num']) > 0 ):?>
                    <br />
                    <span class="supervene-inside-temporary"><span>临时并发数：</span><span><?=$user['userInfo']['ls_zb_bf_num']?></span>（直播）+<span><?=$user['userInfo']['ls_hf_bf_num']?></span>（回放）    有效期：<span><?=isset($user['userInfo']['ls_bf_start_date']) && !empty($user['userInfo']['ls_bf_start_date']) ? date('Y-m-d',$user['userInfo']['ls_bf_start_date']): ''?> — <?=isset($user['userInfo']['ls_bf_expire_date']) && !empty($user['userInfo']['ls_bf_expire_date']) ? date('Y-m-d',$user['userInfo']['ls_bf_expire_date']): ''?></span></span>
                <?php endif; ?>
            <?php endif;?>



#20 父组件与子组件：
        传递数据：
            父->子：props
            子->父： -

        触发方法：
            子->父:(子$emit,父在子的模板标签监听子的$emit)
                    子：this.$emit('cart-add', 'param')
                    父:<child @cart-add="drop"></child> //父监听子的cart-add,监听到了就去执行自己的drop

            父->子：通过ref
                父：<child ref="child"></child>
                    this.$refs.child.childMethod()
                子：{
                    methods:{
                        childMethod(){
                            ...
                        }
                    }
                }
                【注】：另外也可以通过ref获取dom元素对象
                        <div ref='wrap'></div>
                        this.$refs.wrap //获取div元素对象