本篇文章主要介绍了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')
}
}

vue项目实战的更多相关文章

  1. webpack+vue项目实战(四,前端与后端的数据交互和前端展示数据)

    地址:https://segmentfault.com/a/1190000010063757 1.前言 今天要做的,就是在上一篇文章的基础上,进行功能页面的开发.简单点说呢,就是与后端的数据交互和怎么 ...

  2. vue项目实战, webpack 配置流程记录

    vue项目实战记录,地址在这 购物车单界面 npm install npm run dev 跑起来可以看到界面效果 这里简单记录一下webpack的编译流程 入口 package.json " ...

  3. Vue 项目实战系列 (一)

    最近一直在学习Vue,基本的文档看完后就需要进行具体的项目进行练手了,本系列文章主要是将我学习过程记录下来,和大家一起学习交流. 我在git上找到了一个淘票票的Vue项目,项目地址: https:// ...

  4. vue项目实战总结

    马上过年了,最近工作不太忙,再加上本人最近比较懒,毫无斗志,不愿学习新东西,或许是要过年的缘故(感觉像是在找接口). 就把前一段时间做过的vue项目,进行一次完整的总结. 这次算是详细总结,会从项目的 ...

  5. vue 项目实战 (入门)

    环境搭建 安装NodeJS →箭头https://nodejs.org/en/ NPM是随同NodeJS一起安装的包管理工具. 检查环境是否安装成功: 打开一个命令提示符,有成功输出版本号则为安装成功 ...

  6. 详细记录vue项目实战步骤(含vue-cli脚手架)

    一.通过vue-cli创建了一个demo. (vue-cli是快速构建这个单页应用的脚手架,本身继承了多种项目模板:webpack(含eslit,unit)和webpack-simple(无eslin ...

  7. vue项目实战经验汇总

    目录 1.vue框架使用注意事项和经验 1.1 解决Vue动态路由参数变化,页面数据不更新 1.2 vue组件里定时器销毁问题 1.3 vue实现按需加载组件的两种方式 1.4 组件之间,父子组件之间 ...

  8. Spring Boot +Vue 项目实战笔记(一):使用 CLI 搭建 Vue.js 项目

    前言 从这篇文章开始,就进入真正的实践了. 在前端项目开发中,我们可以根据实际情况不同程度地使用 Vue.利用 Vue CLI(或写成 vue-cli,即 Vue 脚手架)搭建出来的项目,是最能体现 ...

  9. Vue 项目实战系列 (二)

    上一章节我们已经把项目的初始化工作完成了,接下来我们再来进行具体的代码编写.这一节我们将完成如下的页面. 我们在src/目录下新建一个views文件夹,存放我们的主要页面文件.目录结构如下: cine ...

随机推荐

  1. Python笔记_第三篇_面向对象_5.一个关于类的实例(人开枪射击子弹)

    1. 我们学了类的这些东西,用这些类我们来操作一个关于类的实例. 2. 题目:人开枪射击子弹,然后具有装弹动作,然后再开枪. 第一步:设计类: 人类名:Person属性:gun行为:fire,fill ...

  2. goweb-表单

    表单 简单的处理一个登陆界面 package main import ( "fmt" "html/template" "log" " ...

  3. Educational Codeforces Round 76 (Rated for Div. 2)E(dp||贪心||题解写法)

    题:https://codeforces.com/contest/1257/problem/E 题意:给定3个数组,可行操作:每个数都可以跳到另外俩个数组中去,实行多步操作后使三个数组拼接起来形成升序 ...

  4. JDK8stream将list转Map对象报错java.lang.IllegalStateException

    ​ JDK8有很多新特性,比如lambda表达式,函数式编程以及stream流的使用,这几个新特性,使用过之后就爱不释手了,比如将list集合通过stream可以直接转换成map对象. 语法: Map ...

  5. Kubernetes系列:Kubernetes Dashboard

    15.1.Dashboard 作为Kube认得Web用户界面,用户可以通过Dashboard在Kubernetes集群中部署容器化的应用,对应用进行问题处理和管理,并对集群本身进行管理.通过Dashb ...

  6. remove_if 的效率测试

    #include <iostream> #include <functional> #include <vector> #include <algorithm ...

  7. SSID

    无线网络中SSID,是路由器发送的无线信号的名字!如果你将你的无线路由器的SSID:命名为:gouwancheng ,那么当你的无线路由器开启,并启用了无线功能,和允许了SSID广播,那么你就可以轻易 ...

  8. 29)PHP,自动加载类

    (1)作用: 类的自动加载是指,在外面的页面中,并不需要去“引入”(包含)类文件,但是程序会在需要一个类的时候就自动去“动态加载”该类. (2)什么叫做“需要一个类”?通常是这样的情况: 1,创建一个 ...

  9. 吴裕雄--天生自然python学习笔记:python 用 Open CV抓取脸部图形及保存

    将面部的范围识别出来后,可以对识别出来的部分进行抓取.抓取一张图片中 的部分图形是通过 pillow 包中的 crop 方法来实现的 我们首先学习用 pillow 包来读取图片文件,语法为: 例如,打 ...

  10. 一个http的Post请求问题,unable to resolve host <我的域名>:no address associated with hostnam

    原因:你应用中写入的测试服务器地址baseURL解析不了,服务器端设置的原因: 解决:找服务端修改设置,或者Android应用中把测试地址改为上线服务器地址.