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' 大专栏  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') } }