vue项目编写过程，知识点小记

一、npm引用三方

1. 先修改 package.json 配置

   
   查看api版本号.png
   三方文件版本配置.png
2. 然后执行：sudo npm install 命令行
3. 重新 npm run dev

二、修改代码格式限制

1. 查看终端报错 查看代码格式报错.png
2. 点击报错提示网址，查看错误信息，及配置信息 查看错误信息.png
3. 找到eslintrc.js -> 'rules' -> 配置 配置代码规范.png

三、设置根页面

步骤：1. 找到build/webpack.dev.conf.js
2.修改代码

  new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true
    }),

四、设置js文件引用后缀可省略

设置文件后缀可省略.png

五、配置网络请求api数据

配置网络请求api数据.png

六、使用stylus报错

    检查是否同时安装了stylus  和  stylus-loader

七、使用stylus设置1像素border

     1. 在minix.styl中改写1px边框的样式实现代码

border-1px($color)
  position: relative
  &:after
    display: block
    position: absolute
    left: 0
    bottom: 0
    width: 100%
    border-top: 1px solid $color
    content: ' '

      2. 在base.styl中设置：根据设备最小dpi，指定缩放比例

@media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5)
  .border-1px
    &::after
      -webkit-transform: scaleY(0.7)
      transform: scaleY(0.7)

@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2)
    .border-1px
        &::after
          -webkit-transform: scaleY(0.5)
          transform: scaleY(0.5)

      3. 对应class中修改boder边框设置代码

.tab
   display: flex
   width: 100%
   height: 40px
   line-height: 40px
   border-1px(rgba(77, 17, 27, 0.1))

    4. 对应div添加border1px的class

<div class="tab border-1px">
      <div class="tab-item">
        <!-- 使用 router-link 组件来导航. -->
        <router-link to="/goods">商品</router-link>
      </div>
      <div class="tab-item">
        <!-- 使用 router-link 组件来导航. -->
        <router-link to="/ratings">评论</router-link>
      </div>
      <div class="tab-item">
        <!-- 使用 router-link 组件来导航. -->
        <router-link to="/seller">商家</router-link>
      </div>
    </div>

八、配置vue-router路由

1. npm导入vue-router
2. 配置main.js

import VueRouter from 'vue-router';

// 1. 定义（路由）组件。
// 可以从其他文件 import 进来
import goods from './components/goods/goods';
import ratings from './components/ratings/ratings';
import seller from './components/seller/seller';

Vue.use(VueRouter);

// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 或者，只是一个组件配置对象。
// 我们晚点再讨论嵌套路由。
const routes = [
  { path: '/', redirect: '/goods' },  // 设置默认页面
  { path: '/goods', component: goods },
  { path: '/ratings', component: ratings },
  { path: '/seller', component: seller }
];

// 3. 创建 router 实例，然后传 `routes` 配置
const router = new VueRouter({
  routes,
  linkActiveClass: 'active'
});

// 4. 创建和挂载根实例。
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
});

九、设配背景图片2x，3x

配置
bg-image($url)
  background-image: url($url + "@2x.png")
  @media (-webkit-min-device-pixel-ratio: 3), (-min-device-pixel-ratio: 3)
    background-image: url($url + "@3x.png")


引用
  .brand
            display: inline-block
            width: 30px
            height: 18px
            bg-image('brand')

• 代码书写需要注意的地方

• 1. 网络请求获取图片时，不能直接使用'src',需要使用'v-bind:src'或':src'

        ![](seller.avatar)

• 2. 定义props属性接收外部传递过来的参数

 export default {
    // 定义props属性接收外部传递过来的参数
    props: {
      seller: {
        type: Object
      }
    }

-3.vue阻止事件冒泡

@click.stop="pay"

-4. 高相对于宽100%的CSS设置

width: 100%
    height: 0
    padding-top: 100%

-5. v-show也可以绑定一个字段，一个属性，也可以绑定一个方法，这个方法返回一个函数计算结果

-6. 使用BetterScroll滚动区域三方控件

Better Scroll 
第一步：
    1、外部一个固定fixed布局的div固定定位滚动区域
    2、内部一个wrapper层的div来展示内容，自动撑高
第二步：
    引入BetterScroll（import BScroll from 'better-scroll';）
第三步：
    初始化 BScroll

  <div class="ratings" ref="ratings">
    <div class="ratings-content">
        … … … …
    </div>
  </div>

    this.$nextTick(() => {
            this.scroll = new BScroll(this.$refs.ratings, {
              click: true
            });
          });

• 实用文章

1、vue2.0中css过渡动画总结