smartzeng


完美起航

vue2.0+webpack的项目搭建与开发

  • ~4.07K 字

vue2.0

vue2.0是一个MVVM框架，对于这样的一个框架，我们应怎样搭建环境，用webpack+loader+babel,还是AAL，怎么样创建组件，基本的自定义标签的创建，数据的封装性，数据和模板的关系，组件的生命周期，组件的状态，内部的值组件与组件之间的数据传递。

Vue2.0与vue1.0几乎90%的API和核心概念都没有变，具体可以看https://cn.vuejs.org/v2/guide/migration.html

Vue2.0的环境安装

Npm install –save vue

Vue2中新增有两种构建方式：

1.独立构建和运行构建，他们的区别在于前者包含模板编译器而后者不包含。模板编译器的职责是将模板的字符串编译为纯JavaScript的渲染函数。如果你想要在组件中使用template选项，你就需要编译器。

独立构建包含模板编译器并支持template选项，他也依赖于浏览器的接口存在，所以你不能使用它来为服务器短渲染。

2.运行时构建不包含模板编译器，因此不支持template选项，只能用render选项，但即使使用运行时构建，在单文件组件中也依然可以写模板，因为单文件组件的模板会在构建时预编译为render函数。运行时构建比独立构建要轻量30%，只有17.14kb min+gzip大小。

默认npm包导出的是运行时构建。为了使用独立构建，在webpack配置中添加如下别名：

1
2
3
4
5
resolve: {
    alias: {
    'vue$': 'vue/dist/vue.common.js'
    }
}

vue2.0的注意事项

Vue2.0的组件必须有根元素

Vue1.0中的beforeCompile换成了created

Vue1.0中的Compile换成了mounted

Vue2.0的指令

指令可以接受修饰符和参数，参数只能有一个，修饰符可以有很多个

例如： 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div v-yangse:hong.color="blue">ccc{{children}}</div>
``````javascript
data(){
    return {
        blue: 'red'
    };
},
directives: {
    yangse(el, bingding) {
        el.style.background = bingding.value();
        if (bingding.modifiers.color) {
            el.style.background = 'yellow';
        }
        // console.log(bingding);
    }
}

vuex的使用

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

vuex基础使用 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
import Vuex from 'vuex'
import Vue from "vue";
Vue.use(Vuex);

const store = new Vuex.Store({
    //这里state必须是json,是一个对象
    state: {
        count: 0, //这里是初始值的罗列
        students: [
            {name: 'panda', age: 12, sex: '男' },
            {name: 'lisa', age: 12, sex: '女' },
            {name: 'lily', age: 12, sex: '女' },
            {name: 'kitty', age: 12, sex: '女' },
            {name: 'smith', age: 12, sex: '男' },
            {name: 'smart', age: 12, sex: '男' },
            {name: 'lazy', age: 12, sex: '男' },
            {name: 'xiaoxiao', age: 12, sex: '女' },
            {name: 'dada', age: 12, sex: '男' },
            {name: 'amy', age: 12, sex: '男' },
            {name: 'lilei', age: 12, sex: '男' },
            {name: 'xiaohong', age: 12, sex: '女' }
        ]
    },
    mutations: {
        // 没有所谓的大写字母的type了，就是一个一个函数
        add (state, payload) {
            console.log(payload);
            state.count ++;
            state.count += payload;
        },
        minus(state) {
            state.count --;
        }
    },
    actions:{
        add(content, payload) {
            content.commit('add', payload);
        }
    },
    getters: {
        man: (state) => {
            return state.students.filter((item) => {
                return item.sex == '男';
            });
        }
    }
});
export default store;

在组件中的引用首先要在vue实例中引入store，否则在组件中使用要单独引入。

1
2
3
4
5
6
7
new Vue({
    el: "#app",
    store，
    components: {
        component
    }
});

component中使用store

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div>
{{count}}
    <p>
        <button @click="addHander">+</button>
        <button @click="minusHander">-</button>
    </p>
{{man}}
</div>
``````javascript
computed: {
    count() {
        return this.$store.state.count;
    },
    man() {
        return this.$store.getters.man;
    }
}

vuex必须在computed中使用。

本实例源码：https://github.com/zyw327/vue2.0

运行效果图：

image.png

本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可