0%

搭建一个 Vue 项目 (node >= 6)

ElementUI 是一个基于 Vue 的组件库,并提供了一个Vue 项目模板

1
2
3
npm install
npm run dev //ElementUI使用的是webpack2.0,所有本地编写代码直接运行 npm run dev 默认在http://localhost:8010上
npm run build //若需发布编译打包以后的代码直接运行 npm run build

可以根据自己的习惯修改模板中文件的结构,在这里不再赘述

webpack2.0 还有一个新功能就是热加载,不需要刷新页面就可以看到你修改后的效果

本次使用的是 Intellig IDEA,并下载了 Vue.js 插件

vue-devtools

推荐安装 vue-devtools,可以清楚的看清 vue 的整体结构

在 Chrome 网上应用店中获取(需要翻墙)

vue-router 的安装使用

1
npm install vue-router --save

下面是一个 route 的例子,Test.vue 是一个简单的测试 route 的组件

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
/**
* Created by hldev on 17-3-8.
*/
import Vue from 'vue'
import VueRouter from 'vue-router'
import Todo from '../components/todo/Todo.vue'
import Hello from '../components/Hello.vue'

//注册插件
Vue.use(VueRouter);

const routes = [{
path: "/",
component: Hello
}, {
path: '/todo',
component: Todo,
children: [
{
path: 'baidu',
component: Hello,
children: [{
path: 'news',
component: Hello,
}]
},
{
path: 'weibo',
component: Hello
}
]
}];

const router = new VueRouter({
mode: 'history',
routes
});

export default router;

然后在入口文件中引用 router

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import Vue from 'vue'
import VueRouter from 'vue-router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
import router from '../routes/route'
import Menu from '../components/home/Menu.vue'

//注册插件
Vue.use(ElementUI);
Vue.use(VueRouter);

new Vue({
el: '#root',
router,
render: h => h(Menu)
});

vue-router 还可以监听$route,只要它发生变化你可以在 method 里面写一个函数来触发

1
2
3
4
5
6
7
8
9
10
11
12
{
...
watch: {
'$route.query': 'getData'
},
methods: {
getData(){
this.$store.dispatch('findPage', {...this.$route.query})
}
}
...
}

组件

下面是一个简单的组件 FirstComponent.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//这是一个.vue格式的文件
<template>
<div>
<h1>{{msg}}</h1>
</div>
</template>

<script>
export default {
data() {
return {msg: this.$route.fullPath}
},
mounted(){
console.log(this.$route.fullPath);
}
}
</script>

在其它组件中引入组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<template>
<div>
<p>{{ msg }}</p>
<first-component></first-component>
<router-view></router-view>//是路由变化展示的地方
</div>
</template>

<script>
import FirstComponent from '../home/FirstComponent.vue.vue';
export default {
data() {
msg: "组件的引用"
},
//注册组件
components: {'first-component': FirstComponent}
}
}
</script>

组件的生命周期

下面是一个写的一个运用生命周期的简单引用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<template>
<div>
<h1>{{msg}}</h1>
</div>
</template>

<script>
export default {
data() {
return {msg: this.$route.fullPath}
},
mounted(){
console.log(`mounted`);
},
beforeDestroy(){
console.log(`beforeDestroy`);
},
}
</script>

组件之间的通信

父组件

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
<template>
<div>
<h1>{{msg}}</h1>
<el-input v-model="input" placeholder="请输入您要传给子组件的内容"></el-input>
<h2>{{total}}</h2>
<p>子组件</p>
<child :message="input" @increment="incrementTotal"></child>
</div>
</template>

<script>
import Child from './Child.vue'
export default {
data() {
return {msg: this.$route.fullPath, input: '', total: 0}
},
methods: {
incrementTotal: function () {
this.total += 1
}
},
components: {'child': Child},
mounted(){
console.log(`mounted`);
},
beforeDestroy(){
console.log(`beforeDestroy`);
},
}
</script>

子组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<template>
<div>
<p>{{message}}</p>
<el-button @click="increment">+1</el-button>
</div>
</template>
<script>
export default {
props: ['message'],
data() {
return {input: ``,count: 0}
},
methods: {
increment: function () {
this.count += 1;
//$emit(eventName) 触发事件
this.$emit('increment')
}
}
}
</script>

父组件向子组件通信

  • 使用 Prop 传递数据

组件实例的作用域是孤立的。这意味着不能并且不应该在子组件的模板内直接引用父组件的数据。可以使用 props 把数据传给子组件。 prop 是父组件用来传递数据的一个自定义属性。子组件应显式地用 props

也可以用 v-bind 动态绑定 props 的值到父组件的数据中。每当父组件的数据变化时,该变化也会传导给子组件: prop 是单向绑定的:只能从父组件传向子组件,prop 还可以验证

子组件向父组件通信

  • 父组件是使用 props 传递数据给子组件,子组件要把数据传递回去,应该自定义事件

如上面的 demo,子组件监听 button 的 click 事件并执行 increment 方法(@:click=’increment’)后触发 increment 事件父组件中监听到 increment 事件触发 incrementTotal 方法(@increment=”incrementTotal”)

Vuex 的安装和使用

1
npm install vuex --save

Vuex 概念与 Redux 相似,一个 store 主要由 state,mutations,actions.getters 组成

大概流程是我们在程序里使用 dispatch 分发 action(可异步),action 提交(commit)一个 mutation(不能异步)进而改变 state 具体写法求看vuex 文档

如果项目太大,state 比较多就可以使用 Moludes,其实就是很多个小的 store 再在根节点上

1
2
3
4
5
6
7
8
9
10
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
modules: {
...//引入你分好的小模块store
},
})

Vue 的 js 写法(render 函数)

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
import Vue from 'vue'

Vue.component('todo', {
mounted(){
},
render: function (createElement) {
return createElement(
'div',
{},
[createElement(
'h1',
{
attrs: {
id: 'test'
},
},
'hello'
), createElement(
'button',
{
},
'+1'
)]
)
},
});

Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.

Quick Start

Create a new post

1
$ hexo new "My New Post"

More info: Writing

Run server

1
$ hexo server

More info: Server

Generate static files

1
$ hexo generate

More info: Generating

Deploy to remote sites

1
$ hexo deploy

More info: Deployment