写在前面：该课程为慕课网付费课程，笔记内容代码居多、内容简略，仅供本身往后翻阅。若有疑问或者不妥，欢迎提出指正，我看到了会回复，谢谢！javascript
Ctrl+Alt+l 快捷整理代码cnpm install -g vue-clivue init webpack sellcd sellcnpm installcnpm run dev 或者 node build/dev-server.js// 文件位置：build/dev-server.js
// 注：此处是关键代码，并不是所有
var app = express()
/* 自定义接口数据 开始 */
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({
error: 0,
data: seller
})
})
apiRoutes.get('/goods', function (req, res) {
res.json({
error: 0,
data: goods
})
})
apiRoutes.get('/ratings', function (req, res) {
res.json({
error: 0,
data: ratings
})
})
app.use('/api', apiRoutes)
/* 自定义接口数据 结束 */
New -> Edit File Templates... -> +<template>
</template>
<script type="text/ecmascript-6"> /* eslint-disable semi */ export default {} </script>
<style lang="stylus" rel="stylesheet/stylus"> </style>
cnpm install stylus stylus-loader less less-loader sass sass-loader --save-devmodule.exports = {
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
// 路径别名配置（自定义）
'assets': resolve('src/assets'),
'components': resolve('src/components')
}
}
}
cnpm install vue-resource --save-dev// 文件位置：src/APP.vue
<template>
<div>
<v-header :seller="seller"></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>
<!-- 路由外链 -->
<keep-alive>
<router-view :seller="seller"></router-view>
</keep-alive>
</div>
</template>
<script type="text/ecmascript-6"> /* eslint-disable semi */ import {urlParse} from './common/js/util'; import header from './components/header/header.vue'; const ERR_OK = 0; // 错误码--成功 export default { data() { return { seller: { id: (() => { let queryParam = urlParse(); // console.log(queryParam); return queryParam.id; })() } } }, created() { // ajax请求 this.$http.get('/api/seller?id=' + this.seller.id).then(response => { // get body data response = response.body; // 返回json对象 if (response.error === ERR_OK) { // this.seller = response.data; // 给对象扩展属性 this.seller = Object.assign({}, this.seller, response.data); console.log(this.seller.id); } }, response => { // error callback }); }, components: { 'v-header': header } } </script>
<style lang="stylus" rel="stylesheet/stylus"> @import "common/stylus/mixin.styl" .tab display: flex width: 100% height: 40px border-1px(rgba(7, 17, 27, 0.1)) line-height: 40px .tab-item flex: 1 text-align: center & > a display: block font-size: 14px color: rgb(77, 85, 93) &.active color: rgb(240, 20, 20) </style>
// 文件位置：src/router/index.js
import Vue from 'vue';
import Router from 'vue-router';
/* import Hello from '@/components/Hello'; */
import goods from '@/components/goods/goods.vue';
import ratings from '@/components/ratings/ratings.vue';
import seller from '@/components/seller/seller.vue';
Vue.use(Router);
const routes = [{
path: '/',
component: goods
}, {
path: '/goods',
component: goods
}, {
path: '/ratings',
component: ratings
}, {
path: '/seller',
component: seller
}];
export default new Router({
linkActiveClass: 'active', // 自定义路由激活class名
routes: routes
});
// 文件位置：src/main.js
/* eslint-disable semi */
import Vue from 'vue';
import App from './App.vue';
import router from './router';
import VueResource from 'vue-resource';
Vue.config.productionTip = false;
import '../static/css/reset.css';
import './common/stylus/base.styl';
import './common/stylus/index.styl';
import './common/stylus/icon.styl';
// 使用Vue-resource必须放在前面，放在后面报错
Vue.use(VueResource);
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
render: h => h(App)
});
// router.push('goods'); // 设置默认路由
// 文件位置：static/css/reset.css
/** * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/) * http://cssreset.com */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header,
menu, nav, output, ruby, section, summary,
time, mark, audio, video, input {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font-weight: normal;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* custom */
a {
color: #7e8c8d;
text-decoration: none;
text-decoration: none;
-webkit-backface-visibility: hidden;
}
li {
list-style: none;
}
::-webkit-scrollbar { width: 5px;
height: 5px;
}
::-webkit-scrollbar-track-piece { background-color: rgba(0, 0, 0, 0.2);
-webkit-border-radius: 6px;
}
::-webkit-scrollbar-thumb:vertical { height: 5px;
background-color: rgba(125, 125, 125, 0.7);
-webkit-border-radius: 6px;
}
::-webkit-scrollbar-thumb:horizontal { width: 5px;
background-color: rgba(125, 125, 125, 0.7);
-webkit-border-radius: 6px;
}
html, body {
width: 100%;
}
body {
-webkit-text-size-adjust: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
// 文件位置：src/common/stylus/base.styl
body, html
line-height: 1 font-weight: 200 font-family: 'PingFang SC', 'STHeitiSC-Light', 'Helvetica-Light', arial, sans-serif .clearfix display: inline-block &:after display: block content: '.' height: 0 line-height: 0 clear: both visibility: hidden @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) // 文件位置：src/common/stylus/mixin.styl 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 bg-image($url) background-image: url($url+"@2x.png") @media (-webkit-min-device-picel-ratio: 3),(min-device-picel-ratio: 3) background-image: url($url+"@3x.png") // 引用mixin @import "common/stylus/mixin.styl"
cnpm install better-scroll --save-dev// ref属性必定是驼峰式命名的，不能用连字符的；
// ref能够用来获取HTML元素，同时也能获取子组件
/*
<ul ref='food'>
<li></li> </ul>
<shopcart ref="shopcart" :select-foods="selectFoods" :delivery-price="seller.deliveryPrice" :min-price="seller.minPrice"></shopcart> */
this.$refs.food
this.$refs.food.getElementByTagName('li')
this.$refs.shopcart.drop(target);
export default {
created() {
this.classMap = ['decrease', 'discount', 'special', 'invoice', 'guarantee'];
this.$http.get('/api/goods').then(response => {
// get body data
response = response.body; // 返回json对象
if (response.error === ERR_OK) {
this.goods = response.data;
console.log(this.goods);
// DOM异步加载完成后
// 调用better-scroll封装的方法
// 动态计算每一个区块的高度
this.$nextTick(() => { this._initScroll(); this._calculateHeight(); }) } }, response => {
// error callback
});
}
}
export default {
methods: {
selectMenu(index, event) {
if (!event._constructed) { // 不是better-scroll派发的事件
return;
}
console.log(index);
let foodList = this.$refs.foodsWrapper.getElementsByClassName('food-list-hook');
let el = foodList[index];
this.foodsScroll.scrollToElement(el, 300);
},
_initScroll() {
this.menuScroll = new BScroll(this.$refs.menuWrapper, {
click: true // 不由止点击事件
});
this.foodsScroll = new BScroll(this.$refs.foodsWrapper, {
click: true, // 不由止点击事件
probeType: 3 // 实时监听位置配置
});
// 监听scroll事件，绑定scrollY
this.foodsScroll.on('scroll', (pos) => { this.scrollY = Math.abs(Math.round(pos.y)); }) }, _calculateHeight() { let foodList = this.$refs.foodsWrapper.getElementsByClassName('food-list-hook'); let height = 0; this.listHeight.push(height); for (let i = 0; i < foodList.length; i++) { let item = foodList[i]; height += item.clientHeight; this.listHeight.push(height); } } }, components: { shopcart, cartcontrol } }
// 给food添加count属性，并设置它的值为1，这样VUE就能够观测到
Vue.set(this.food, 'count', 1);
export default {
methods: {
drop(el) {
// console.log(el);
for (let i = 0; i < this.balls.length; i++) {
let ball = this.balls[i];
if (!ball.show) {
ball.show = true;
ball.el = el;
this.dropBalls.push(ball);
return;
}
}
},
// 小球动画钩子
beforeDrop: function (el) {
let count = this.balls.length;
while (count--) {
let ball = this.balls[count];
if (ball.show) {
let rect = ball.el.getBoundingClientRect();
let x = rect.left - 32;
let y = -(window.innerHeight - rect.top - 22);
el.style.display = '';
el.style.webkitTransform = `translate3d(0,${y}px,0)`;
el.style.transform = `translate3d(0,${y}px,0)`;
let inner = el.getElementsByClassName('inner-hook')[0];
inner.style.webkitTransform = `translate3d(${x}px,0,0)`;
inner.style.transform = `translate3d(${x}px,0,0)`;
console.log(el, x, y);
}
}
},
// 此回调函数是可选项的设置
// 与 CSS 结合时使用
dropping: function (el, done) {
/* eslint-disable no-unused-vars */
let rf = el.offsetHeight; // 触发一下浏览器重绘
this.$nextTick(() => { el.style.display = ''; el.style.webkitTransform = 'translate3d(0,0,0)'; el.style.transform = 'translate3d(0,0,0)'; let inner = el.getElementsByClassName('inner-hook')[0]; inner.style.webkitTransform = 'translate3d(0,0,0)'; inner.style.transform = 'translate3d(0,0,0)'; // 监听动画结束事件，以后执行done函数 el.addEventListener('transitionend', done); }); // done(); }, afterDrop: function (el) { let ball = this.dropBalls.shift(); if (ball) { ball.show = false; el.style.display = 'none'; } } } }
<div class="content-right" @click.stop.prevent="pay">
<div class="pay" :class="payClass">{{payDesc}}</div>
</div>
// 文件位置：src/common/js/date.js
export function formatDate(date, fmt) {
// 实现思路：正则表达式把fmt动态的替换成对应的字符串
/* eslint-disable semi */
if (/(y+)/.test(fmt)) {
fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
}
let o = {
'M+': date.getMonth() + 1,
'd+': date.getDate(),
'h+': date.getHours(),
'm+': date.getMinutes(),
's+': date.getSeconds()
};
for (let k in o) {
if (new RegExp(`(${k})`).test(fmt)) {
let str = o[k] + ''; // 要替换的值
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str));
}
}
return fmt;
}
function padLeftZero(str) { // 补全两位数字
return ('00' + str).substr(str.length);
}
// 模板结构
// <div class="time">{{rating.rateTime | formatDate}}</div>
// js代码
import {formatDate} from '../../common/js/date'; // 引入公共date.js文件的formatDate方法
export default {
filters: { // 自定义过滤器
formatDate(time) {
let date = new Date(time);
return formatDate(date, 'yyyy-MM-dd hh:mm');
}
}
}
mounted() 钩子和 updated() 钩子里面（注：异步请求数据的是放在created钩子里）export default {
mounted() {
console.log('mounted'); // 等同于VUE1.0的的ready
this._initScroll();
this._initPics();
},
updated() {
console.log('updated'); // 至关于watch
this._initScroll();
this._initPics();
}
}
/** * 文件位置：src/common/js/store.js */
// 存储到本地存储
export function saveToLocal(id, key, value) {
/* eslint-disable semi */
let seller = window.localStorage.__seller__; // localstorage前面要加window，alert也同样
if (!seller) {
seller = {};
seller[id] = {};
} else {
seller = JSON.parse(seller);
if (!seller[id]) {
seller[id] = {};
}
}
seller[id][key] = value;
window.localStorage.__seller__ = JSON.stringify(seller);
}
// 从本地存储里面读取
export function loadFromLocal(id, key, def) {
/* eslint-disable semi */
let seller = window.localStorage.__seller__;
if (!seller) {
return def;
}
seller = JSON.parse(seller)[id];
if (!seller) {
return def;
}
let ret = seller[key];
return ret || def;
}
/**
* 文件位置: src/common/js/util.js
*/
export function urlParse() {
/* eslint-disable semi */
let url = window.location.search; // ?id=12&a=b
let obj = {};
let reg = /[?&][^?&]+=[^?&]+/g;
let arr = url.match(reg);
// ['?id=12', '&a=b']
if (arr) {
arr.forEach((item) => { let tempArr = item.substring(1).split('='); let key = decodeURIComponent(tempArr[0]); let val = decodeURIComponent(tempArr[1]); obj[key] = val; }) } return obj; }
优化：tab点击再也不重复请求，并保存状态，使用keep-alive组件css
cnpm run build // 配置打包规范：config/index.js
module.exports = {
build: {
// 生产环境
productionSourceMap: true, // 配置是否生成sourceMap调试文件
port: 9000 // 起一个build的端口
},
dev: {
// 开发环境
}
}
// 文件位置：./prod.server.js
/* eslint-disable semi */
let express = require('express');
let config = require('./config/index');
let port = process.env.PORT || config.build.port;
let app = express();
let router = express.Router();
router.get('/', function (req, res, next) {
req.url = '/index.html';
next();
});
app.use(router);
/* 自定义接口数据 开始 */
let appData = require('./data.json');
let seller = appData.seller;
let goods = appData.goods;
let ratings = appData.ratings;
let apiRoutes = express.Router();
apiRoutes.get('/seller', function (req, res) {
res.json({
error: 0,
data: seller
})
});
apiRoutes.get('/goods', function (req, res) {
res.json({
error: 0,
data: goods
})
});
apiRoutes.get('/ratings', function (req, res) {
res.json({
error: 0,
data: ratings
})
});
app.use('/api', apiRoutes);
/* 自定义接口数据 结束 */
app.use(express.static('./dist'));
module.exports = app.listen(port, function (err) {
if (err) {
console.log(err);
return;
}
console.log('Listening at http://localhost:' + port);
});
/* eslint-disable semi */ // 文件位置：./.eslintrc.js
// http://eslint.org/docs/user-guide/configuring
module.exports = {
root: true,
parser: 'babel-eslint',
parserOptions: {
sourceType: 'module'
},
env: {
browser: true,
},
// https://github.com/standard/standard/blob/master/docs/RULES-en.md
extends: 'standard',
// required to lint *.vue files
plugins: [
'html'
],
// add your custom rules here
'rules': {
// allow paren-less arrow functions
'arrow-parens': 0,
// allow async-await
'generator-star-spacing': 0,
// allow debugger during development
'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
// 自定义规则：分号、缩进
// 'semi': ['error', 'always'], // 须要添加分号
'indent': 0, // 空格缩进
'space-before-function-paren': 0, // 不检查函数名后面的空格
'camelcase': 0 // 不检查驼峰式常量
}
}
font-size: 0 或者 标签不换行/* 模板结构
<div class="background">
<img :src="seller.avatar" width="100%" height="100%">
</div>
*/
/* CSS样式 */
.background {
position: absolute
top: 0
left: 0
width: 100%
height: 100%
z-index: -1
filter: blur(10px)
}
/* 模板结构 <div class="detail"> <div class="detail-wrapper"> <div class="detail-main"></div> </div> <div class="detail-close"> <i class="icon-close"></i> </div> </div> */
/* CSS样式 */
.detail { position: fixed; z-index: 100; top: 0; left: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(7,17,27,0.8); }
.detail-wrapper { width: 100%; min-height: 100%; }
.detail-main { padding: 64px 0; }
.detail-close { width: 32px; height: 32px; margin: -64px auto 0; font-size: 32px; }
/* <div class="container"> <p class="text">文字</p> <img class="img" src="imgurl" /> </div> */
.container { margin-bottom: 5px; }
.text, .img { display: inline-block; vertical-align: top; }
.text { line-height: 18px; }
.parent { display: table; }
.child { display: table-cell; vertical-align: middle; }
.content-left { flex: 0 0 105px; width: 105px; }
.content-right { flex: 1; }
.image-header { position: relative width: 100% height: 0 padding-top: 100% /*把padding设置的跟宽度同样*/ }
.image-header img { position: absolute top: 0 left: 0 width: 100% height: 100% }
name-hook class名<div class="ball ball-hook"></div>
// 组件私有的
_privateFunc() {}
// 其余组件能够调用的
publicFunc() {}
package.json 拷贝新的依赖 build目录 直接拷贝，修改webpack.base.conf.js兼容前缀、别名配置，多了个check-versions.js config目录 直接拷贝