vue项目实战

看了一个礼拜的 vue.js ,不得不说,入门是很容易的,学习曲线也相对平缓。数据的双向绑定也另开发顺畅,特别是一些交互比较复杂的项目。

来简单说一下利用 vue-cli 脚手架 进行项目开发,我个人的一些实战总结吧,项目是基于 vue2.0 做开发的。

一、项目编译webpack配置简介:

vue-cli 脚手架项目的目录 build 下有 3个基础配置文件:

webpack.base.conf.js
webpack.dev.conf.js webpack.prod.conf.js ,

用来构建 运行时项目,和构建发布时项目

1、webpack.base.conf.js

基础配置文件

module: {
    loaders: [
      {
        test: //.vue$/,
        loader: 'vue'
      },
      {
        test: //.js$/,
        loader: 'babel',
        include: projectRoot,
        exclude: /node_modules/
      },
      {
        test: //.json$/,
        loader: 'json'
      },
      {
        test: //.(png|jpe?g|gif|svg)(/?.*)?$/,
        loader: 'url',
        query: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      {
        test: //.(woff2?|eot|ttf|otf)(/?.*)?$/,
        loader: 'url',
        query: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      }
    ]
  },

module 下面的配置其中需要说明的一点是 配置中有对 10000b 的图片大小进行base64转换,折算一下就是 9.765625kb ,所以项目中对一下小的 icon 不必做图片精灵处理。

在 webpack.base.conf.js 文件的结尾处还有这么一段配置:

vue: {
    loaders: utils.cssLoaders({ sourceMap: useCssSourceMap }),
    postcss: [
      require('autoprefixer')({
        browsers: ['last 2 versions']
      })
    ]
  }

为什么单独拿出来说呢,因为在项目开发的时候遇到一点小坑 , autoprefixer 一个浏览器自动兼容插件browsers: ['last 2 versions'] 意思是只对主流浏览器的最新两个版本(其实也就是不做兼容了,现代最新的浏览器基本都不需要兼容了呀),所以我在写一个 css3 动画 的时候就发现较低版本的Android设备居然不运行。

配置如下就好了:意思是 对 主流浏览器的最新五个版本和对 Android4.0以上 的版本做兼容

vue: {
    loaders: utils.cssLoaders({ sourceMap: useCssSourceMap }),
    postcss: [
      require('autoprefixer')({
        browsers: ['last 5 versions', 'Android >= 4.0']
      })
    ]
  }

2、webpack.dev.conf.js

当我们在项目运行 npm run dev 就会执行这个脚本进行项目构建,值得一提的是配置文件中有个

html-webpack-plugin 插件,用于热刷新浏览器,当你编辑完 .vue文件command+s 保存一下浏览器就会自动刷新了。

3、webpack.prod.conf.js

当我们要上线项目可以用 npm run build 对咱们的项目进行构建,webpack 会帮我们压缩css 和js文件,并加上哈希值,还有生成对应文件的 SourceMap 文件 ,因为压缩后的css或js文件你没办法看,调试的时候出了错误可以利用 SourceMap 来查看代码对应的位置。 那我项目确保没bug了怎么把 SourceMap 关掉呢,毕竟线上项目是不想让别人看到具体源代码的。

那就找到 项目中 config文件夹index.js 文件对应下的配置:

module.exports = {
  build: {
    //...
    productionSourceMap: false,

productionSourceMap 置为 false 再次 npm run build 一样就不会构建出 .map 文件

二、项目实战开发

希望你在看这篇博文的时候是有点 vue 基础的,对 vue开发有所了解,本篇文章不会介绍 vue 的基础内容,
因为 [vue.js官网][1] 已经很简单详细了。 本篇会讲一些实战开发的整体架构,和开发当中的一些实用的
知识点和技巧

1、全局 data

虽然 vue 是对数据双向绑定,如何管理好你的数据就需要多费点心思考虑一下了,不然到实际项目中,独立出独立的组件,而组件之间又存在数据或交互,那么数据传递将会异常的繁琐。

这里我建议 在 App.vue (或超父组件) 里维护一套 全局 data ,如下图:

vue项目实战

2、父组件给子组件传递数据

父组件 appVue.vue

<template>
    <div id="appVue">
        <page1 v-bind:infodata="infodata"></page1>
    </div>
</template>

<script type="text/ecmascript-6">
    import page1 from './components/page1/page1';
    export default {
        name: 'appVue',
        data(){
            return {
                infodata:{
                    ‘name’:’曾田生’,
                    ‘age’:'24'
                }            
            }
        },
        components: {
            page1
        }
    }
</script>

<style lang="scss">

</style>
子组件 page1
<template>
    <div id="page1">
      <p>{{infodata.name}}</p>
      <p>{{infodata.age}}</p>
    </div>
</template>

<script type="text/ecmascript-6">
    export default {
        props: {
            infodata: {
                type: Object,
                default: function () {
                    return{
                       ‘name’:’xxx’,
                       ‘age’:'111'
                    }
                }
            }
        }
    }
</script>

<style lang="scss">
</style>

父组件 通过 v-bind 将组件的 data 数据 绑定在子组件上,子组件再利用 props对象 接收父组件传递过来的值,接着就可以像组件的 data 数据一样尽情的使用了。

3、props watch

有这么一个场景是:子组件拿到了父组件给过来的值,但随着用户对父组件的操作,数据要反馈到子组件上,
那么这个场景就可以使用 vue 的 watch对象
<template>
    <div id="page1">
      <p>{{infodata.name}}</p>
      <p>{{infodata.age}}</p>
    </div>
</template>

<script type="text/ecmascript-6">
    export default {
        props: {
            infodata: {
                type: Object,
                default: function () {
                    return{
                      ‘name’:’xxx’,
                      ‘age’:'111'
                    }
                }
            }
        },
        watch:{
          ’infodata’:function(){
              console.log('infodata 数据变化会触发我这个方法的执行' );
          }
        }
    }
</script>

<style lang="scss">
</style>

利用 watch 对象 来监听 props对象中 infodata属性的变化 ,当然了,也可以用来监听 组件中 data数据的变化

4、父组件调用子组件的方法

有时候咱们需要在父组件里调用子组件的方法,利用强大的 vue 也是很容易做到的

父组件:

给子组件上注册引用信息 ref="page1" ,拿到改引用信息 this.$refs.page1 ,其实也就是获取子组件的意思, 接着调用子组件的方法 this.$refs.page1.handleParentClick() ; handleParentClick 是方法名,

可以自定,只要子组件也有对应的方法名即可。

<template