vue项目实战

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

本篇文章主要介绍了vue的环境配置,vue项目的目录结构以及在开发vue项目中问题的一些解决方案。

环境配置及目录结构

1.安装node.js(http://www.runoob.com/nodejs/nodejs-install-setup.html)
2.基于node.js,利用淘宝npm镜像安装相关依赖
在cmd里直接输入：npm install -g cnpm –registry=https://registry.npm.taobao.org，回车，等待安装...
3.安装全局vue-cli脚手架,用于帮助搭建所需的模板框架
在cmd里 1)输入：cnpm install -g vue-cli，回车，等待安装…
2).输入：vue，回车，若出现vue信息说明表示成功
4.创建项目
在cmd里输入：vue init webpack vue_test(项目文件夹名)，回车，等待一小会儿，依次出现‘git’下的项，可按下图操作

5.安装依赖
在cmd里 1).输入：cd vue_test（项目名），回车，进入到具体项目文件夹
2).输入：cnpm install，回车，等待一小会儿
回到项目文件夹，会发现项目结构里，多了一个node_modules文件夹（该文件里的内容就是之前安装的依赖）
基于脚手架创建的默认项目结构如下图所示：

6.测试环境是否搭建成功
方法1：在cmd里输入：cnpm run dev
方法2：在浏览里输入：localhost:8080(默认端口为8080)
运行起来后的效果如下图所示：

项目的目录结构：
assets：主要放置样式文件和图片
components：组件
lib：放置模拟好的数据
router：放置路由信息
store：放置vuex的文件
views：放置所有的单页面

使用Vuex步骤

1.使用npm安装：
npm install vuex –save
2.引入vuex插件
创建文件夹store，新建index.js，import Vue和Vuex，Vue的插件引入函数Vue.use()使用Vuex,Vue.use(Vuex)
store/index.js

1
2
3
4

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
let store = new Vuex.Store({})

main.js中引入store，在Vue实例中注册store对象

1
2
3
4
5
6
7
8
9
10
11
12
13

import Vue from 'vue'
import App from './App'
import router from './router'import store from './store'
Vue.config.productionTip = false
new Vue({
el: '#app',
router,
store,
template: '<App/>',
components: { App }
})

3.将状态映射到组件
store/index.js

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

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
let store = new Vuex.Store({
state: {
receiveInfo: [{
'name': '王某某',
'phone': '13811111111',
'areaCode': '010',
'landLine': '64627856&#39 大专栏 vue项目实战;,
'provinceId': 110000,
'province': '北京市',
'cityId': 110100,
'city': '市辖区',
'countyId': 110106,
'county': '海淀区',
'add': '上地十街辉煌国际西6号楼319室',
'default': true,
'checked': true
}, {
'name': '李某某',
'phone': '13811111111',
'areaCode': '010',
'landLine': '64627856',
'provinceId': 110000,
'province': '北京市',
'cityId': 110100,
'city': '市辖区',
'countyId': 110106,
'county': '海淀区',
'add': '上地十街辉煌国际东6号楼350室',
'default': false,
'checked': false
}]
}
})

组件中修改状态

1
2
3
4
5
6
7

export default {
computed: {
receiveInfo: function () {
return this.$store.state.receiveInfo
}
}
}

getters:过滤state数据
mutations:显式的更改state里的数据

vue中关于props和$emit的用法

1.父组件可以使用props把数据传给子组件
props是父组件用来传递数据的一个自定义属性。父组件的数据需要通过props把数据传递给子组件，子组件需要显示地用props选项声明props
父组件

1	<address-pop v-if="popShow" @close="closePop" :oldReceive="oldReceive"></address-pop>

子组件

1
2
3
4
5
6
7
8

props: {
oldReceive: {
type: Object
},
receiveIndex: {
type: Number
}
}

2.子组件可以使用$emit触发父组件的自定义事件
父组件定义了一个close事件，在子组件中直接通过this.$emit(‘close’)调用父组件中的close方法
父组件

1
2
3
4
5
6
7
8
9
10
11
12
13

<address-pop v-if="popShow" @close="closePop" :oldReceive="oldReceive"></address-pop>
<script>
import addressPop from '@/components/address-pop'
export default {
components: {
addressPop
},
methods: {
closePop: function () {
this.popShow = false
}
}
}

子组件

1
2
3
4
5
6
7

<span class="dialog-close" @click="closePop">x</span>
export default {
methods: {
closePop: function () {
this.$emit('close')
}
}