![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue 项目案例
purple_lumpy
先,找一个方向,然后,收拾收拾好,一步一步来
展开
-
vue 一个简单的项目 之一 首页 step 1
首页header 区域开发首先,在项目中安装一些依赖包。 以下。主要是安装 stylus ,它帮助css 的编写。 下面,就可以启动服务了。使用命令 npm run start. 首先,我们在src/pages/home 目录下,建立一个新目录 components 把 home 页将要使用的小组件放这儿,然后在这个目录下建立一个单文件组件 Header...原创 2018-11-10 16:27:53 · 895 阅读 · 0 评论 -
vue 一个简单的项目 之二 城市选择页面 step11 使用keep-alive 优化网页性能
本篇我们将使用keep-alive 优化前面我们的两个网页的性能。先新建一个分支 city-keepalive, pull 下来,在新分支上写代码。network 面板下,选择 XHR .会发现,每次跳转到城市选择页面,会请求一次city.json;每次跳转到主页,会请求一次index.json.而每次这样是,没有必要的。vue 提供了keep-alive 标签。它框住的内容,被加...原创 2018-12-09 09:41:54 · 277 阅读 · 0 评论 -
vue 一个简单的项目 之二 城市选择页面 step6 兄弟组件数据传递
前面我们动态地获取了城市选择页面的数据。下面,我们希望,点击字母表,左边列表能自动滑到相应字母部分。这需要兄弟组件间传递数据啦。首先,创建一个分支 city-components ,pull 下来,在这个分支实现兄弟组件通信。好啦,首先,我们打开,Alphabet.vue 代码,给每一 li 一个click 事件。然后我们把数据 从 Alphabet 传递给父组件 City,再由Cit...原创 2018-12-07 10:58:07 · 276 阅读 · 0 评论 -
vue 一个简单的项目 之二 城市选择页面 step7 列表性能优化
上篇,我们实现在 Alphabet.vue 中实现了,点击、滑动右侧字母表,左边城市列表跟着滑动。但是,在touch 部分,性能比较低。如下是上篇的除style 的代码,Alphabet.vue<template> <ul class="list"> <li class="item" v-for="item of lett...原创 2018-12-07 11:21:07 · 338 阅读 · 0 评论 -
vue 一个简单的项目 之三 详情页面 step2 公用组件画廊组件
上篇,我们实现了详情页面的顶部的样式。本篇我们来实现一个公用组件 —— 画廊组件。画廊组件,就是不会自动轮播的轮播组件。由于项目可能在很多地方需要使用到,因此,我们把它写成公用组件。打开项目,在src 目录下,创建一个common 文件夹,在这个文件夹下存放一些公用的组件。好啦,再在common 目录下,创建文件夹 gallery ,在gallery 目录下,创建文件Gallary.v...原创 2018-12-15 12:06:36 · 815 阅读 · 0 评论 -
vue 一个简单的项目 之三 详情页面 step3 实现Header 渐隐渐现效果
上篇,我们实现了一个公用组件画廊组件。本篇,我们将实现 详情页面 Header 的渐隐渐现效果。首先,创建一个detail-header 分支,pull 下来,在新分支上写代码。主要效果就是,当页面的scroll 是顶部的时候,页面的 顶部会显示返回的标志。当banner 被滑动到视口之外,就显示标准的背景色加title 的header。首先在,pages/deteil/ compon...原创 2018-12-16 16:01:27 · 311 阅读 · 0 评论 -
vue 一个简单的项目 之三 详情页面 step4 对全局事件的解绑
上篇,我们实现了,详情页面的Header.vue 组件。但是,上篇的代码有一个问题。本篇来解决。下面是Header.vue 中script 部分代码。里面 scroll 是定义在window 上的,这样就使得它成为一个全局事件了。这样子,在其他页面滑动页面的时候,也会触发这个事件。这是一个bug 。<script>export default { name: 'Deta...原创 2018-12-16 16:29:41 · 156 阅读 · 0 评论 -
vue 一个简单的项目 之三 详情页面 step5 使用递归组件实现详情页列表
上篇,完成了Header.vue,本篇,我们继续写详情页面。创建分支 detail-list,pull 下来,在新分支上写代码。我们在detail/components 目录下,创建一个组件 List.vue 。初始化,如下。<template> <div>list</div></template><script>...原创 2018-12-16 17:09:23 · 804 阅读 · 0 评论 -
vue 一个简单的项目 之三 详情页面 step6 动态获取详情页面数据 与 跳转页面滚动条设置
上篇,实现了递归组件。本篇,实现详情页面的数据动态获取。先新建一个分支 detail-ajax,pull 下来,在新分支上写代码。其实,动态获取数据,之前就做过。使用axios, 就可以了。父组件 Detail.vue 代码如下。<template> <div> <detail-banner :sightName="sight...原创 2018-12-16 22:08:53 · 533 阅读 · 0 评论 -
vue 一个简单的项目 之三 详情页面 step7 在项目中加入基础动画
本篇我们尝试在项目中加入基础动画。首先,新建分支detail-animation, pull下来,在新分支上写代码。我们要做的效果是,公共画廊组件打开关闭时渐隐渐现。首先,在src/common 下新建一个文件夹 fade。在fade 下,建一个Fade.vue 组件。直接写一下 Fade.vue 如下。<template> <transition>...原创 2018-12-16 22:37:19 · 188 阅读 · 0 评论 -
vue 一个简单的项目 之四 最终 step1 前后端联调
当项目开发完,就不需要模拟数据了。与后端联调的时候就可以把static下面的模拟数据删掉了。然后呢,我们的在config 目录下 index.js 里面该一些参数。这是之前的index.js 的一部分内容module.exports = { dev: { // Paths assetsSubDirectory: 'static', assetsPubli...原创 2018-12-16 22:48:11 · 121 阅读 · 0 评论 -
vue 一个简单的项目 之四 最终 step2 真机测试
首先,查看一下自己电脑在内网的ip 地址。ifconfig / ipconfig 命令。然后,我们将项目地址中的 localhost 换成 自己的ip 。会发现不能用。这是因为webpack dev server 默认不支持通过ip 的形式,进行页面的访问。因此,我们要对它默认的配置项进行修改。打开项目根目录下的 package.json, 往“script” 中的“dev” 加入一些...原创 2018-12-16 23:09:19 · 171 阅读 · 0 评论 -
vue 一个简单的项目 之四 最终 打包上线
当做vue 项目上线的时候。首先,进入项目的根目录,运行命令 npm run build之后,vue-cli 会对项目中的src 下的文件进行打包编译,生成一个能被浏览器运行的代码,同时这个代码也是压缩过后的代码。编译完成后,在项目根目录下,会多出一个dist 目录,这个目录包含的东西,就是我们最终要上线的代码。把这个文件给后端。后端将他们放到后端服务器上,就可以。...原创 2018-12-16 23:21:23 · 160 阅读 · 0 评论 -
vue 一个简单的项目 之三 详情页面 step1
第三个页面 详情页面。本篇主要是来做详情页面的动态路由和banner 布局。首先,git 上新建分支 detail-banner,pull 下来,在新分支上工作。我们希望,在首页点击下面 热销推荐中每一项,会进入详情页。首页,使用的是Recommend.vue 组件。我们该一下Recommend.vue 的代码,给它的li 包裹一个路由跳转的标签,如下。<templat...原创 2018-12-11 23:17:36 · 1105 阅读 · 0 评论 -
vue 一个简单的项目 之二 城市选择页面 step5 页面动态数据渲染
前面,我们将页面布局实现了。现在开始,我们要实现页面逻辑了。本篇,我们将实现城市选择页面的动态数据渲染。通过ajax 获得json 数据。首先,新建一个分支 city-ajax ,pull 下来,在新分支上写代码。好啦。先把模拟数据city.json 放在static/mock 下面。与首页相似,我们把ajax 请求放在city 页面上,这样只要请求一次即可。我们在Ci...原创 2018-12-06 17:16:53 · 298 阅读 · 0 评论 -
vue 一个简单的项目 之二 城市选择页面 step4
上篇,我们实现了城市列表的样式,屏蔽了浏览器的滑动,同时,在子元素中没有设置滑动。本篇我们来设置一个友好的滑动与字母表的布局。我们使用第三方包 BetterScroll 地址:https://github.com/ustbhuangyi/better-scroll先,在项目里下载进来npm install better-scroll --save然后可以重启服务器使用了根据...原创 2018-12-06 13:49:41 · 213 阅读 · 0 评论 -
vue 一个简单的项目 之二 城市选择页面 step3
上篇,我们完成了城市选择页面顶部的布局。本篇,我们来实现城市选择页面的列表布局。首先创建一个分支 city-list, pull 下来,在新分支上写代码。好啦。打开编辑器,在city/components 中创建组件List.vue初始化一下,List.vue 代码 如下。<template> <div class="list"> list ...原创 2018-12-06 13:08:45 · 426 阅读 · 0 评论 -
vue 一个简单的项目 之一 首页 step 2
iconfont 的使用与代码优化在iconfont 上把想要的图标添加到购物车后,再添加到项目。然后在项目中下载到本地。如下图。下载,解压后,有以下文件 我们在 src/assets/styles 下面,建立目录 iconfont, 然后将四个字体文件放进去 然后,将 iconfont.css 放入style 目录下. 要改一下,iconfont.css ...原创 2018-11-13 22:05:58 · 215 阅读 · 0 评论 -
vue 一个简单的项目 之一 首页 step4
下面要来写,图标区域页面布局。就是下图,被框起来的部分。 那么,首先去码云上,新建一个分支 index-icons。然后,本地把新分支拿下来。git pullgit checkout index-icons (切换到该分支)ok.开启项目服务 npm run start在项目目录 src/pages/home/components 下,新建一个 Icons...原创 2018-11-18 16:32:07 · 132 阅读 · 0 评论 -
vue 一个简单的项目 之一 首页 step3
下面要来写,首页的轮播图组件了。因为是新功能,因此,要在码云上新建一个分支。如下。线下,我们要pull 以下,将分支拉到本地。只需要,进入项目目录。使用命令 git pull . 如下,即把index-swiper 分支拉到本地了。 转换当前分支,命令 : git checkout index-swiper 即可。下面,进行开发了。启动服务,npm...原创 2018-11-18 14:48:15 · 427 阅读 · 0 评论 -
vue 一个简单的项目 之一 首页 step5
上一篇,我们写了一个静态的图标区域,这里,我们实现图标区域逻辑部分,有许多图标时分页 轮播显示。我们使用,轮播图插件。首先,使用swiper 进行包裹。在Icons.vue 中。<template> <div class="icons"> <swiper :options="swiperOption"> <swiper...原创 2018-12-04 20:40:25 · 266 阅读 · 0 评论 -
vue 一个简单的项目 之二 城市选择页面 step8 搜索逻辑
上篇,我们实现了字母表与城市列表滑动效果与性能优化。本篇,我们来实现搜索逻辑。首先,创建分支 city-search-logic,pull 下来,在新分支中写代码。好啦。我们在Search.vue 中加入代码。下面是原始的Search.vue。<template> <div class="search"> <input class="se...原创 2018-12-07 16:43:40 · 268 阅读 · 0 评论 -
vue 一个简单的项目 之一 首页 step6
上一篇,我们实现了图标轮播区域,这里,我们将要实现,热销推荐组件部分。当然先去,新建一个单独的分支,pull 下来,在新分支里开发。组件大概的样子,如下。 开始啦。首先在home/components 新建一个文件 Recommend.vueRecommend.vue 代码如下 <template> <div>hello<...原创 2018-12-05 12:34:31 · 174 阅读 · 0 评论 -
vue 一个简单的项目 之二 城市选择页面 step9 Vuex 实现数据共享
上篇,我们实现了城市选择页面的搜索逻辑。本篇,我们来实现,首页与城市选择页面之间的数据共享。首先创建分支 city-vuex, pull 下面,在新分支上写代码。vuex 实是一个数据框架,而且它也是官方推荐的方案。在使用Vue 进行开发时,Vue 主要承担视图层的内容,当我们涉及到大量数据进行传递的时候,就需要数据框架。Vue 之中的这个数据框架,就是Vuex。Vuex 是什么呢?...原创 2018-12-07 20:15:57 · 700 阅读 · 0 评论 -
vue 一个简单的项目 之二 城市选择页面 step10 Vuex的高级使用及localStorage
在上篇中,我们通过Vuex 中保存的数据,完成了组件间的数据传递。通过Vuex 中的states 保存 当前城市。但这样会有一个问题,当刷新的时候,这个值,还是会回到代码中赋的初值。本篇解决这个问题。解决这个问题,要使用localStorage。localStorage 是html5 提供的API,它可以实现类似cookie 的功能,实现本地存储。改起来也非常简单,只需要改store ...原创 2018-12-07 21:36:09 · 221 阅读 · 0 评论 -
vue 一个简单的项目 之一 首页 step7
上一篇,我们实现了热销组件区域,本篇将实现 周末游组件。在 home/components 中创建一个新文件 Weekend.vue这个组件,大概的样子,如下。 它与热销组件,十分相似,偷个懒,先把热销组件的代码拷到Weekend.vue 中,改改内容与引用。<template> <div> <div class="title"&g...原创 2018-12-05 15:00:27 · 164 阅读 · 0 评论 -
vue 一个简单的项目 之一 首页 step8 使用axios 发送ajax 请求
前面,页面的数据,都是写死的,这篇,我们将通过ajax 动态获取页面内容。先创建一个分支,index-ajax, 然后pull 下来,跳转到这个分支上工作。在vue 中使用ajax , 可以通过很多工具。比如,浏览器自带的 fetch 函数,也可以使用以前vue 推荐的第三方模块 vue-resource,现在vue 官方推荐我们使用第三方模块 axios (它可进行跨平台【浏览器,nod...原创 2018-12-05 16:11:57 · 233 阅读 · 1 评论 -
vue 一个简单的项目 之一 首页 step9 父子组件间传值
上篇,我们实现了ajax 请求。这篇,我们实现,获取到的数据传递给子组件。首先呢,我们在Home.vue 中,定义data 属性。如下。首先,我们传递 city 属性给子组件 home-heade 。Home.vue 代码,如下<template> <div> <home-header :city="city"></home-he...原创 2018-12-05 20:36:21 · 318 阅读 · 0 评论 -
vue 一个简单的项目 之二 城市选择页面 step1
前面我们制作了首页,接下来,终于要制作另外的页面啦。先创建一个分支 city-router,pull 下来,在新分支上写代码。城市选择页面大致的样子如下。 好啦。进入新分支,开始写代码啦。首先,我们要配置路由部分的内容。打开 router 目录下的index.js 文件,如下import Vue from 'vue'import Router from 'vu...原创 2018-12-05 22:09:35 · 590 阅读 · 0 评论 -
vue 一个简单的项目 之二 城市选择页面 step2
上篇我们完成了城市选择页面的头部,与主页面之间的跳转。本篇,我们将实现城市选择页面的搜索框布局。首先,创建新分支 city-search ,pull下来,在新分支上写代码。好啦。打开编辑器,在pages 目录下 components 目录下,新建一个组件 Search.vue 初始化一下,Search.vue 代码,如下<template> <div c...原创 2018-12-06 11:54:34 · 263 阅读 · 0 评论 -
vue 一个简单的项目 之四 最终 异步组件实现按需加载
vue 中异步组件的使用合理使用异步组件,能提升vue 项目的性能。上篇,我们完成了项目的打包编译。项目文件中,多了一个文件夹dist , 这个文件夹的内容就是编译后的内容。如下。css 目录下两个文件,.map 是一个source map 文件,目的是为了帮助调试被压缩过的css代码,它的意义是帮助我们在开发的时候调试使用。真正打包在线上有用的文件是里面的.css 文件。上图...原创 2018-12-18 13:13:48 · 2860 阅读 · 0 评论