Vue.js 2 高仿饿了么开发及解注一:基础准备

Vue.js 2 高仿饿了么开发及解注一

欢迎交换友链: Laker’s Blog–进击的程序媛
Github:https://github.com/younglaker
V信: lakerHQ (请注明‘来自博客’)

慕课网早期出了《Vue.js 1 高仿饿了么APP》的课程,本系列文章根据课程,使用 Vue.js 2 版本进行开发,并进行了一步步开发流程记录和详细的代码注解。

原作者的代码

我做的含有详细代码注解的版本

安装 Vue 模板

安装vue-cli

1
npm install --global vue-cli

安装好vue-cli后执行:

1
$ vue init webpack AppName #建立一个webpack打包的应用,默认使用最新版vue

然后按照提示填写信息:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
? Project name sell
? Project description sell
? Author younglaker <younglaker8@gmail.com>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard #
? Setup unit tests with Karma + Mocha? No #单元测试
? Setup e2e tests with Nightwatch? No
vue-cli · Generated "sell".
To get started:
cd sell
npm install
npm run dev

文件目录

– build : webpack配置相关
– config : webpack配置相关
– node_modules : 依赖
– src : 开发目录
– static : 第三方静态资源
| – .gitkeep : 使得如果文件为空也提交到git仓库
– babelrc : babel 配置
– .editorconfig : 编辑器配置。sublime要安装插件EditorConfig
– .eslintignore : 设置忽略语法检查的文件
– .eslintrc.js : eslint 配置。
– index.html : 项目入口
– pakage.json : 配置。script设置执行的命令,npm run dev/start/build即执行相应的脚本。dependencies生产需要的依赖, devDependencies编译过程的依赖,版本号前面有个 ^ 表示最低版本

EsLint 配置

extends: 'standard' 是初始化文件时候选的,可以在'rules'里添加自己的规则(条件名:0 即为不检测此条件)。

  • 默认js不能输入分号,想要分号则添加'semi': ['error', 'always']
  • 忽略缩进报错'indent': 0
  • 不检测 new 实例,在 vue 代码前添加注释 /* eslint-disable no-new */
1
2
3
4
5
6
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
render: h => h(App)
});

组件

查看示例组件App.vue,每个组件包括:

1
2
3
4
5
<template>...</template>
<script>...</script>
<style>...</style>

新增目录

https://github.com/ustbhuangyi/vue-sell/tree/1.0/src/common

把图标SVG上传到 https://icomoon.io/app/#/select 制作 ico fonts 并下载

  • 在 src 文件夹下新建文件夹 common, js
  • common 下新建 fonts, js, stylus
  • fonts 下把 ico fonts 字体文件放到这
  • stylus 下把 ico fonts 的 style.css 改成 ico.styl 放到这,把文字路径的 fonts/ 改为 ../fonts/
  • 在 static 文件加入 css/reset.css,并在 index.html 里引用<link rel="stylesheet" type="text/css" href="static/css/reset.css" />

安装 stylys:

1
npm[or cnpm] install stylus stylus-loader --save-dev

模拟数据

添加 data.json 到根目录:

https://github.com/ustbhuangyi/vue-sell/blob/1.0/data.json

dev-server.js,在var app = express() 后面添加(因为用到 express,所以要在起定义后),然后重启服务:
(每次修改 data.json、build文件夹、config文件夹下内容时,都要重启服务)

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
// import data.json
var appData = require('../data.json')
var seller = appData.seller
var goods = appData.goods
var ratings = appData.ratings
var apiRoutes = express.Router()
apiRoutes.get('/seller', function (req, res) {
res.json({
status: 1, // 定义状态码
data: seller
});
})
apiRoutes.get('/goods', function (req, res) {
res.json({
status: 1,
data: goods
})
})
apiRoutes.get('/ratings', function (req, res) {
res.json({
status: 1,
data: ratings
});
})
app.use('/api', apiRoutes)

调用的方法见下一篇文章关于 App.vue 菜单导航的写法。

index.html

1
2
<meta name="viewport"
content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">

router/index.js

把 Hello 的引入删掉,删除 components: Hello。 header 已经在 App.vue 里引入,这里不用再引入。

App.vue:

1
2
3
4
5
6
7
8
9
10
11
12
13
<v-header></v-header>
import header from './components/header/header.vue'
export default {
name: 'app',
components: {
'v-header': header
}
}
<style lang="stylus">
</style>

components/header/header.vue

1
2
3
4
5
6
7
8
9
10
<template>
<div class="header">header
</div>
</template>
<script>
</script>
<style lang="stylus">
</style>

tabs 路由

App.vue:

1
2
3
4
5
6
7
8
9
10
11
12
<v-header></v-header>
<div class="tab border-1px">
<div class="tab-item">
<router-link to="/goods">商品</router-link>
</div>
<div class="tab-item">
<router-link to="/ratings">评论</router-link>
</div>
<div class="tab-item">
<router-link to="/seller">商家</router-link>
</div>
</div>

build/webpack.base.conf.js 新增路径别称 (需要重启服务)

1
2
3
4
5
6
7
8
9
10
resolve: {
......
alias: {
'@': resolve('src')
// 就能用 @/ 表示 src/
// 或改为 'src': path.resolve(__dirname, '../src'),
'common': path.resolve(__dirname, '../src/common'),
'components': path.resolve(__dirname, '../src/components')
}
}

router/index.js 修改路由配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 如果没有上一步配置路径别称,就要用 @/components
import goods from 'components/goods/goods'
import ratings from 'components/ratings/ratings'
import seller from 'components/seller/seller'
export default new Router({
routes: [{
path: '/',
redirect: '/goods' // 重定向,进入就显示goods信息
}, {
path: '/goods',
component: goods
}, {
path: '/ratings',
component: ratings
}, {
path: '/seller',
component: seller
}]
})

tabs 选中后高亮

router/index.js
全局配置 的默认『激活 class 类名』
http://router.vuejs.org/zh-cn/api/options.html

1
2
3
4
5
6
7
export default new Router({
linkActiveClass: 'active',
routes: [{
path: '/',
redirect: '/goods'
}, {....

新建 common/stylus/mixin.styl
添加 1px border 的样式,通过传颜色使用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
border-1px($color)
position: relative
&:after
display: block
position: absolute
left: 0
bottom: 0
width: 100%
border-top: 1px solid $color
content: ' '
border-none()
&:after
display: none

新建 common/stylus/base.styl
对 1px border 的样式在不同dpi相应缩放,避免 iphone6 下 1px BUG。

1
2
3
4
5
6
7
8
9
10
11
@media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5)
.border-1px
&::after
-webkit-transform: scaleY(0.7)
transform: scaleY(0.7)
@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2)
.border-1px
&::after
-webkit-transform: scaleY(0.5)
transform: scaleY(0.5)

新建 common/stylus/index.styl
引用所有样式

1
2
3
@import "./mixin"
@import "./icon"
@import "./base"

main.js 里引用

1
import 'common/stylus/index.styl'

App.vue:
tab基础样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@import "./common/stylus/mixin.styl"
.tab
display: flex
width: 100%
height: 40px
line-height: 40px
border-1px(rgba(7, 17, 27, 0.1))
.tab-item
flex: 1
text-align: center
& > a
display: block
font-size: 14px
color: rgb(77, 85, 93)
&.active
color: rgb(240, 20, 20)

在手机上预览

获取本机ip,例如 192.168.1.2 , 把 localhost:8080/ 改成 192.168.1.2:8080 ,PC上也可以用这个地址访问。

可以用工具生成二维码,微信扫描访问。确保PC与手机同一局域网下。

一些常见报错

报错 原因
spaced-commnet 注释///*后面没有空格,*/前面没有空格
unkown custom element 自定义标签没有正确注册
indent 缩进问题
space-before-function-paren 函数名和括号之间没有加空格

Vue.js 2 高仿饿了么开发及解注一:基础准备

本文原创自http://laker.me/blog,转载请注明出处,欢迎交换友链

如果本文对您有帮助,微信扫一扫,请我喝杯咖啡吧

评论组件不稳定,有事请联系V信 lakerHQ (请备注来自博客)