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 |
import Vue from 'vue' |
main.js中引入store,在Vue实例中注册store对象
1 |
import Vue from 'vue' |
3.将状态映射到组件
store/index.js
1 |
import Vue from 'vue' |
组件中修改状态
1 |
export default { |
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 |
props: { |
2.子组件可以使用$emit触发父组件的自定义事件
父组件定义了一个close事件,在子组件中直接通过this.$emit(‘close’)调用父组件中的close方法
父组件
1 |
<address-pop v-if="popShow" @close="closePop" :oldReceive="oldReceive"></address-pop> |
子组件
1 |
<span class="dialog-close" @click="closePop">x</span> |
vue项目实战的更多相关文章
- webpack+vue项目实战(四,前端与后端的数据交互和前端展示数据)
地址:https://segmentfault.com/a/1190000010063757 1.前言 今天要做的,就是在上一篇文章的基础上,进行功能页面的开发.简单点说呢,就是与后端的数据交互和怎么 ...
- vue项目实战, webpack 配置流程记录
vue项目实战记录,地址在这 购物车单界面 npm install npm run dev 跑起来可以看到界面效果 这里简单记录一下webpack的编译流程 入口 package.json " ...
- Vue 项目实战系列 (一)
最近一直在学习Vue,基本的文档看完后就需要进行具体的项目进行练手了,本系列文章主要是将我学习过程记录下来,和大家一起学习交流. 我在git上找到了一个淘票票的Vue项目,项目地址: https:// ...
- vue项目实战总结
马上过年了,最近工作不太忙,再加上本人最近比较懒,毫无斗志,不愿学习新东西,或许是要过年的缘故(感觉像是在找接口). 就把前一段时间做过的vue项目,进行一次完整的总结. 这次算是详细总结,会从项目的 ...
- vue 项目实战 (入门)
环境搭建 安装NodeJS →箭头https://nodejs.org/en/ NPM是随同NodeJS一起安装的包管理工具. 检查环境是否安装成功: 打开一个命令提示符,有成功输出版本号则为安装成功 ...
- 详细记录vue项目实战步骤(含vue-cli脚手架)
一.通过vue-cli创建了一个demo. (vue-cli是快速构建这个单页应用的脚手架,本身继承了多种项目模板:webpack(含eslit,unit)和webpack-simple(无eslin ...
- vue项目实战经验汇总
目录 1.vue框架使用注意事项和经验 1.1 解决Vue动态路由参数变化,页面数据不更新 1.2 vue组件里定时器销毁问题 1.3 vue实现按需加载组件的两种方式 1.4 组件之间,父子组件之间 ...
- Spring Boot +Vue 项目实战笔记(一):使用 CLI 搭建 Vue.js 项目
前言 从这篇文章开始,就进入真正的实践了. 在前端项目开发中,我们可以根据实际情况不同程度地使用 Vue.利用 Vue CLI(或写成 vue-cli,即 Vue 脚手架)搭建出来的项目,是最能体现 ...
- Vue 项目实战系列 (二)
上一章节我们已经把项目的初始化工作完成了,接下来我们再来进行具体的代码编写.这一节我们将完成如下的页面. 我们在src/目录下新建一个views文件夹,存放我们的主要页面文件.目录结构如下: cine ...
随机推荐
- Python笔记_第三篇_面向对象_8.对象属性和类属性及其动态添加属性和方法
1. 对象属性和类属性. 我们之前接触到,在类中,我们一般都是通过构造函数的方式去写一些类的相关属性.在第一次介绍类的时候我们把一些属性写到构造函数外面并没有用到构造函数,其实当时在写的时候,就是在给 ...
- Huffman编码实验
一. 实验目的 熟练掌握哈夫曼树的建立和哈夫曼编码的算法实现. 二. 实验内容 根据哈夫曼编码的原理,编写一个程序,在用户输入结点权值的基础上求赫夫曼编码,并能把给定的编码进行译码. 三. 实验要求 ...
- Python语言学习前提:基础语法
一.变量 1.变量:存储数据.存储数据需要对应内存空间,基于变量的数据类型,解释器会分配指定内存,决定什么数据被存储到内存中. 变量数据类型:整数.小数.字符. 2.变量赋值:变量在使用前必须赋值,赋 ...
- mediawiki问题
部分内容参考 http://blog.csdn.net/gaogao0603/article/details/7689670 1.启用文件上传:在LocalSettings.php修改或者增加如下:$ ...
- 编译安装 logstash-output-jdbc
环境 mac https://github.com/theangryangel/logstash-output-jdbc logstash-plugin install logstash-output ...
- python3下scrapy爬虫(第十三卷:scrapy+scrapy_redis+scrapyd打造分布式爬虫之配置)
之前我们的爬虫都是单机爬取,也是单机维护REQUEST队列, 看一下单机的流程图: 一台主机控制一个队列,现在我要把它放在多机执行,会产生一个事情就是做重复的爬取,毫无意义,所以分布式爬虫的第一个难点 ...
- redis中间件
redis的集群:集群策略:主从复制(从库从主库同步获取数据,本身不提供服务)哨兵(监控主库和从库,当主库挂的时候自动把从库选一个切换为主库,主库存放的是全量数据)集群参考:https://blog. ...
- LTE-U/LAA
将LTE扩展至非授权频谱,得益于一个稳健的无线电通信线路,具有更好协调性的同步节点,以及以授权频谱为基点的载波聚合,LTE-U/LAA能提供比载波Wi-Fi更佳的网络性能和更强的用户体验,为移动运营商 ...
- OpenCV 为程序界面添加滑动条
#include <cv.h> #include <highgui.h> using namespace cv; /// 全局变量的声明与初始化 ; int alpha_sli ...
- made his acquaintance|adequate|advisable|announce|contrived to|made up|toss|considering that
PHRASE 与(某人)初次相识;结识(某人)When you make someone's acquaintance, you meet them for the first time and ge ...