Vue.js实战记录

前言

前几天介绍了vue.js这个前端框架，今天起决定记录使用这个框架来搭建项目的流程以及遇到的问题。虽然这个项目只是参考慕课网的教程来做的，但自己还是会遇到很多问题。本项目主要是仿“饿了么”开发。

一、icomoon

使用icomoon将自己定义的svg文件转为字体图标。
进入官网，点击右上角IcoMoon App按钮，选择自己已有的svg文件，点击Generate Font,然后会出现自己的图标序列，点击Get Code，会提示你如何使用。

二、mock数据

模拟后端数据。
我们已经事先用vue-cli下了一个vue项目框架了。
根目录下新建一个data.json文件，在其中添加我们的模拟数据。打开工程下build中的dev-server.js，在其中添加

var apiRouters = express.Router();
apiRouters.get('/seller',function(req,res){
  res.json({
    errno: 0,
    data: seller
  });
});

apiRouters.get('/goods',function(req,res){
  res.json({
    errno: 0,
    data: goods
  });
});

apiRouters.get('/ratings',function(req,res){
  res.json({
    errno: 0,
    data: ratings
  });
});

app.use('/api',apiRouters);

以上代码涉及express路由，还没怎么学过，找个时间看一下。

三、-webkit-scrollbar

-webkit-scrollbar这个css3属性可以自定义滚动条样式。

四、一些问题

我们需要代码风格有分号，然而es6是不需要分号的，所以在.eslintrc.js里面进行相应的配置。
1
2
'semi': ['error','always'],
'indent': 0

第一句是关于分号的设置，第二句是关于缩进的设置。
更多关于eslint的配置参考官网

stylus-loader问题
发现有两个问题，一个是stylus-loader，另一个是ecmascript-6问题。
在package.json里设置stylus-loader

"devDependencies": {
  "autoprefixer": "^6.4.0",
  "babel-core": "^6.0.0",
  "babel-eslint": "^7.0.0",
  "babel-loader": "^6.0.0",
  "babel-plugin-transform-runtime": "^6.0.0",
  "babel-preset-es2015": "^6.0.0",
  "babel-preset-stage-2": "^6.0.0",
  "babel-register": "^6.0.0",
  "chalk": "^1.1.3",
  "connect-history-api-fallback": "^1.1.0",
  "css-loader": "^0.25.0",
  "stylus-loader": "^2.1.1",

设置好后，npm install，到这里stylus-loader理论上是解决了。
Text-ecmascript-6问题只是自己的粗心，将type=”text/ecmascript-6”写成了src=”text/ecmascript-6”，而且还写到了文件模板里，晕！
装完stylus-loader之后，又出现了新的问题
没办法，只能继续安装stylus。

1 2	npm install stylus --save-dev npm install

最后运行终于不会提示问题了。但每次我用stylus语法还是报错，只能用css了，虽然有点繁琐。哼！我不管了！

五、vue-router安装

先在package.json里的dependencies里添加vue-router，再npm install。
在main.js里

1
2
3

import VueRouter from ‘vue-router’

Vue.use(VueRouter)

因为视频里使用的vue1.*的版本，而现在vue已经是2.0了，所以格式会有所不同。
比如v-link需要更改为router-link,router.map()不在适用等。
下次写个vue2.0的改动吧。

简约版vue-router的使用

import Vue from 'vue';
import VueRouter from 'vue-router';
import App from './App';
import goods from './components/goods/goods.vue';
import ratings from './components/ratings/ratings.vue';

Vue.use(VueRouter);

const routes = [
  {path: '/goods', component: goods},
  {path: '/ratings', component: ratings}
];

const router = new VueRouter({
  routes
});

new Vue({
  router,
  render: h => h(App)
}).$mount('#app');

router.push('/goods');

最后一句router.push()好像是设置默认显示页

六、路径配置

之前我们引用组件都是./component/……，其实可以忽略./，因为在webpack.base.conf.js的alias里有路径的相关配置。webpack我还没怎么学过，下次再说吧。

七、1像素border的实现

在pc端设置border-bottom为1px，但在dpr为2或3的手机显示时，线变粗。

1	@media (-webkit-min-device-pixel-ratio:X),(min-device-pixel-ratio: X)

使用media查看dpr，再使用-webkit-transform:scaleY()
如果X为1.5，则缩放0.7；如果为2，则缩放为0.5；如此类推。

八、草料二维码生成器

方便手机查看效果，不过我用的时候页面一直没有显示出来，就没继续深究了。

九、使用vue-resource来处理前后端数据的异步请求

简单的说，vue-resource就像jQuery里的$.ajax，用来和后端交互数据的。
看一段代码吧

created: function () {
  this.$http.get('/api/seller').then((response) => {
    response = response.body;
    if (response.errno === ERR_OK) {
      this.seller = response.data;
    }
  });
},

先用图片平铺背景，z-index:-1，再使用filter()进行模糊处理，但有个问题，模糊效果会扩散出元素之外，在父元素设置overflow:hidden解决

九、stickyfooter

header组件弹出浮层，使用sticky footer。这种布局找个时间说一下吧。

十、vue2.0的index

在弹出层商家优惠活动列表，classMap[seller.supports[$index].type]和出错。
但我改为classMap[seller.supports[0].type]和的时候，可以显示。

原因：原来是vue2.0舍弃了$index
解决：

<ul v-if="seller.supports" class="supports">
  <li class="support-item" v-for="(item,index) in seller.supports">
    <span class="icon" :class="classMap[seller.supports[index].type]"></span>
    <span class="text">{{seller.supports[index].description}}</span>
  </li>
</ul>

十一、better-scroll

使用better-scroll，better-scroll是对iscroll的改进版。现在package.json里添加依赖，再npm install。使用该模块来实现滑动。
使用better-scroll，点击事件在手机模式触发一次，但在pc模式会触发两次，需添加

1
2
3

if(!event._constructed){
  return;
}

十二、vue2.0中的ref

一直出现问题
Cannot read property通常就是对象没有获取成功。弄了好久，发现本以为将v-el:menu-wrapper改成ref=”menu-wrapper”，没想到要改成ref=”menuWrapper”，要用驼峰格式，坑

十三、宽高相等小技巧

当设置宽度为100%时，使用

1
2
3

width: 100%;
height: 0;
padding-top: 100%;

可以实现宽高相等

十四、webpack打包

1	npm run build

成功后，会看到多了一个dist目录。
为了不让别人在控制台source中仍然可以调试，在build目录的index.js中改

1	productionSourceMap: false,

修改后重新npm run build

前言