从零开始Vue项目实战（四）-路由

一.理解路由传统的页面应用,是用一些超链接来实现页面切换和跳转的.而vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来. 路由中有三个基本的概念 route, routes, router. 1, route,它是一条路由,由这个英文单词也可以看出来,它是单数, Home按钮 => home内容, 这是一条route, about按钮 => about 内容, 这是另一条路由. 2, routes 是一组路由,把上面的每一条路由组合起来,形成一个数组.[{…

从零开始Vue项目实战（一）-准备篇

从前参与过一个react项目的代码编写,大神搭建的框架,我主要负责业务逻辑代码编写,现在回想起来似乎又什么都不会,现在为了巩固前端知识,决定用Vue来做这个项目的移动端网站,我本人Vue是从零开始的,一边学习一边写代码,在这里记录一下过程. 项目说明: 主要功能实现一个投资平台,会员身份为融资人或投资人(不能有两种身份),融资人可以发出融资申请,后台通过后,前端能获取到该融资项目,投资人可以进行投资,投满后,生成还款计划,融资人按月还款,全部还完则项目结束. 模块划分: 1.登陆模块 2.注册模…

从零开始Vue项目实战（三）-项目结构

目录结构 ├── README.md 项目介绍 ├── index.html 入口页面 ├── build 构建脚本目录 │ ├── build-server.js 运行本地构建服务器,可以访问构建后的页面 │ ├── build.js 生产环境构建脚本 │ ├── dev-client.js 开发服务器热重载脚本,主要用来实现开发阶段的页面自动刷新 │ ├── dev-server.js 运行本地开发服务器 │ ├── utils.js 构建相关工具方法 │ ├── webpack.base.…

从零开始Vue项目实战（二）-搭建环境

1.下载node.js并安装下载地址:https://nodejs.org/en/download/. 下载.msi 格式的直接连续下一步就可以了.安装完成后可以用 node -v 和 npm -v 查看版本号. 2.安装vue-cli 脚手架构建工具在命令行中输入npm install -g vue-cli,自动下载vue-cli(会生成一大堆的依赖文件).可输入 vue 查看是否安装成功 3.目使用vux,所以推荐使用vux官网的airyland/vux2 模板. vue init ai…

webpack+vue项目实战（四，前端与后端的数据交互和前端展示数据）

地址:https://segmentfault.com/a/1190000010063757 1.前言今天要做的,就是在上一篇文章的基础上,进行功能页面的开发.简单点说呢,就是与后端的数据交互和怎么把数据展示出来,用到的资源主要是element-ui和vue-resource,其它参考(vue-resource插件使用).今天讲到的一些功能开发,主要就是请求列表数据,详情数据,分页功能操作,搜索,搜索标签等的开发.今天这个,按照下面步骤,一步一步来.一个一个功能的做! 2.数据接口我以'回款…

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…

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

vue项目实战记录,地址在这购物车单界面 npm install npm run dev 跑起来可以看到界面效果这里简单记录一下webpack的编译流程入口 package.json "scripts": { "dev": "node build/dev-server.js", //npm run dev ,执行这里 "build": "node build/build.js" }, build文件下…

miniFTP项目实战四

项目简介: 在Linux环境下用C语言开发的Vsftpd的简化版本,拥有部分Vsftpd功能和相同的FTP协议,系统的主要架构采用多进程模型,每当有一个新的客户连接到达,主进程就会派生出一个ftp服务进程来为客户提供服务.同时每个ftp服务进程配套了nobody进程(内部私有进程),主要是为了做权限提升和控制. 实现功能: 除了基本的文件上传和下载功能,还实现模式选择.断点续传.限制连接数.空闲断开.限速等功能. 用到的技术: socket.I/O复用.进程间通信.HashTable 欢迎技术交…

Vue 项目实战系列（一）

最近一直在学习Vue,基本的文档看完后就需要进行具体的项目进行练手了,本系列文章主要是将我学习过程记录下来,和大家一起学习交流. 我在git上找到了一个淘票票的Vue项目,项目地址: https://github.com/canfoo/vue2.0-taopiaopiao,大家喜欢的话可以给作者点个fork. 看了下项目的代码,然后决定自己在山寨一下这个项目,从零开始自己搭建下. 第一步就是开始进行项目的初始化了,这里使用了Vue的脚手架,Vue-cli进行项目的基础代码结构搭建.由于使用了vu…

vue项目实战总结

马上过年了,最近工作不太忙,再加上本人最近比较懒,毫无斗志,不愿学习新东西,或许是要过年的缘故(感觉像是在找接口). 就把前一段时间做过的vue项目,进行一次完整的总结. 这次算是详细总结,会从项目的搭建,一直到最后的服务器上部署. 废话不多说了.干货直接上. 一. 必须node环境, 这次就不写node环境的安装了.过两天我会写个node环境的安装随笔. 二. node环境配好后.开整vue. 1. 安装vue脚手架. npm install -g vue-cli 2. 用脚手架搭…

vue 项目实战 (入门)

环境搭建安装NodeJS →箭头https://nodejs.org/en/ NPM是随同NodeJS一起安装的包管理工具. 检查环境是否安装成功: 打开一个命令提示符,有成功输出版本号则为安装成功. //检查node 版本号 node -v //检查npm版本号 npm -v 安装vue npm install vue -gnpm install -g @vue/cli 新建项目 vue create vuedemo 选择第一个就是默认配置了babel 跟eslint 一般选择第二个选择相…

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

一.通过vue-cli创建了一个demo. (vue-cli是快速构建这个单页应用的脚手架,本身继承了多种项目模板:webpack(含eslit,unit)和webpack-simple(无eslint,unit)),这些模板都是基于webpack. 安装步骤如下: 1)安装vue-cli ,配置vue命令环境:运行cnpm install vue-cli -g 2)初始化项目,生成项目模板:运行 vue init webpack-simple vue-cli-demo cd vue-cli-d…

如何在Vue项目中给路由跳转加上进度条

1.前言在平常浏览网页时,我们会注意到在有的网站中,当点击页面中的链接进行路由跳转时,页面顶部会有一个进度条,用来标示页面跳转的进度(如下图所示).虽然实际用处不大,但是对用户来说,有个进度条会大大减轻用户的等待压力,提升用户体验.本篇文章就来教你如何在Vue项目中实现这样的进度条. 2.安装Nprogress 虽然我们也可以自己手动实现这样的功能,但是,nprogress.js已经帮我们把进度条的样式呀,功能呀都已经封装的很好了,既然有现成的轮子,我们就直接使用轮子就好啦! npm inst…

vue项目实战经验汇总

目录 1.vue框架使用注意事项和经验 1.1 解决Vue动态路由参数变化,页面数据不更新 1.2 vue组件里定时器销毁问题 1.3 vue实现按需加载组件的两种方式 1.4 组件之间,父子组件之间的通信方案 1.5 vue中 $event 的用法--获取当前父元素,子元素,兄弟元素 1.6 vue常用工具函数总结 1.7 axios二次封装http请求 2.elementui组件修改经验总结 2.1 element-ui 中步骤条的深度使用 2.2 v-loading框中的提示文字换行 2.…

Spring Boot +Vue 项目实战笔记（一）：使用 CLI 搭建 Vue.js 项目

前言从这篇文章开始,就进入真正的实践了. 在前端项目开发中,我们可以根据实际情况不同程度地使用 Vue.利用 Vue CLI(或写成 vue-cli,即 Vue 脚手架)搭建出来的项目,是最能体现 Vue 的特性的.这点在接下来的内容中我们可以慢慢感受. 关于项目的构建其实类似的文章网上有很多,但我还是重新写了一下,一是为了确保项目能够运行成功,二是对几个细节作了解释,三是加入了使用 IDE 的构建方法. 在动手操作之前,我希望大家已经清楚什么是 "前后端分离" ,什么是 "…

Vue 项目实战系列（二）

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

vuejs angularjs 框架的一些比较（vue项目重构四）

使用Angularjs和Vue.js对比首先需要说明的是:现在默认angularjs指angular1.0+版本,angular默认指2.0以上版本.本文的名词也默认指定angular的1.0+版本. 先让我们看一下这两个框架的设计上的一些不同. Angularjs 1,MVC框架 2,模块化(Module)控制器(Contoller)依赖注入:这种模块话的注入,其实在代码层面上显得并不够整洁,比如我任何一个控制器controller 里面其实要注入很多的服务. 3,双向数据绑定:界面的操作…

vue项目中router路由配置

介绍路由:控制组件之间的跳转,不会实现请求.不用页面刷新,直接跳转-切换组件>>> 安装本地环境安装路由插件vue-router: cnpm install vue-router --save-dev *没有安装淘宝镜像的可以将 cnpm 替换成 npm 想要安装的可以看这篇文章http://www.cnblogs.com/padding1015/p/7162024.html,(打开搜索镜像即可跳转到对应位置) 配置两种配置方法:在main.js中 || 在src/r…

Spring Boot +Vue 项目实战笔记（二）：前后端结合测试（登录页面开发）

前言:关于开发环境每位 Coder 都有自己偏好的开发工具,从大的方面划分主要有文本编辑器流和 IDE 流两种,我有一段时间也喜欢用编辑器(Sublime Text.Vim),但对我来说开发效率确实不如使用 IDE 高,所以就放弃了.不过需要修改某一代码片段时,使用编辑器还是比较便捷的. 虽说大家可以按照自己的情况任意选择工具,但做教程只能顾及其中一种,所以不好意思了读者大人们. 我比较习惯用 IntelliJ IDEA,在 Java 后端方面地位没得说,然而我前端也是用它做的...说实话没感…

Vue 项目实战系列（三）

我们继续前两节的开发.本节教程实现的效果如下: 效果很简单,但是实现起来却要用到Vue的很多知识,下面我们将一步一步的实现这个效果. 首先这些城市的信息都是从后台的server里面获取的,所以我们需要一个后台,后台的代码可以从 https://github.com/EzrealDeng/Taopiaopiao里面的server 文件夹获取,这个server端具体怎么实现的我们暂时不用关心,只需要知道这是一个可以返回我们需要的数据的后台服务即可. 下载完后进入文件夹执行: npm run star…

vue 项目实战 (vue全家桶之--- vuex)

老规矩先安装 npm install vuex --save 在看下面内容之前你应该大概的看了一边vuex官方的文档对vuex有个大概对了解首先 vuex 是什么? vuex 是属于vue中的什么,它在项目中扮演着一个什么样的角色,起到什么作用,在项目中我是否要用到vuex. 官方文档对vuex的解读是:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式. 如果你是在开发一个大型的应用程序,组件与组件之间,兄弟组件之间,或者说多层嵌套组件之间,你是无法传递数据的.子父组件之间,也…

Vue 项目中对路由文件进行拆分（解构的方法）

项目需求场景: 在开发项目过程中,在项目过于庞大,路由信息非常多的情况下,如果将路由配置信息都放在一个文件里面,那么这个JS是不方便维护的, 那么,这个时候需要我们把这个庞大的路由文件,根据项目功能分类,拆分为几个不同的路由文件. 实现步骤: 1.不管你拆分为几个,最后都是要整合到一个js文件里面的, 2.比如你建立了两个文件夹,分别为router,router2,里面都有一个index.js,其中router为主文件夹,在里面的index.js中引入外部配置的路由信息 3.在router2中的…