webpack

A Vue.js project

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

For detailed explanation on how things work, checkout the guide and docs for vue-loader.

华丽的分割线

本次开发的框架基于vue-cli，使用vue init webpack my-project-name 来创建的，但是默认创建的项目没有提供mock数据的功能，本项目在此基础上添加了前端mock数据的功能，可以作为 spa 项目的脚手架使用。移动端项目：基于 vue-resource 和饿了么的 mint-ui

开发的一点总结：此脚手架是用express4作为服务器来热加载的

关于静态文件的存放：

在npm run dev 其实执行的是 build/dev-server.js ，在文件有这一句app.use(staticPath, express.static('./static')) 其中 staticPath 是 ./static 说明static文件夹是静态资源的存放目录。所以我将全局的normalize.css / 工具less文件common.less 都放在了这里

static
    └── assets
        ├── css
        │   ├── common.less
        │   └── normalize.css
        ├── js
        │   └── zepto-1.2.0.min.js
        └── logo.png

然后normalize.css 在index.html中使用标签link来引入 <link rel="stylesheet" href="./static/assets/css/normalize.css"> common.less则需要在每个组件中引入，如：

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
  @import '../../static/assets/css/common.less';

使用vue-cli 构建项目开发购物车

vue-cli 初始化项目

vue-cli是vue官方提供的用于快速构建vue项目的脚手架，初始化项目十分有用，webpack都是配置好了的，开箱即用。

# 安装vue-cli
cnpm i -g vue-cli

# vue list 用于查看可以初始化是么类型的项目。都用下看下目录结构，我常用 vue init webpack my-project-name
vue list

  Available official templates:

  ★  browserify - A full-featured Browserify + vueify setup with hot-reload, linting & unit testing.
  ★  browserify-simple - A simple Browserify + vueify setup for quick prototyping.
  ★  simple - The simplest possible Vue setup in a single HTML file
  ★  webpack - A full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction.
  ★  webpack-simple - A simple Webpack + vue-loader setup for quick prototyping.

开发中遇到的问题

打算做一个前后端分离的项目，就是前端请求ajax或php接口，后端只需要开发接口就行了。但是前端这里如何mock数据？

使用vue-resource请求的接口：

  methods: {
    getDataSwipe: function () {
      this.$http.get('/api/index_swipe.php').then(response => {
        console.log(response);
        this.swipeArray = response.body.data;
      }, response => {
        console.log(response);
      });
    }
  }

这时候需要把get、post等请求先打到本地的mock数据中，思路就是把所有api打头 .php结尾（如："api/xxx.php"）的请求都定向到mock文件夹中对应xxx.js文件中去

// serve pure static assets
var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)
app.use(staticPath, express.static('./static'))

// 上面几行是原有的代码，便于定位
// app.use('/api', express.static('./mock')) // 之所以不用这一行是因为我们需要特殊处理下，把前端请求的xx.php换成xx.js(前端的mock数据)，而且还需要用all方法处理所有请求
// )
app.all(/api(\/\w+)+\.php$/, function (req, res) {
  var url = req.url || '';
  url = url.replace(/api/, 'mock');
  var temp = url.split('.');
  fs.readFile(path.join(__dirname, '../', temp[0]) + '.js', 'utf-8', function (err, data) {
      if (err) {
        console.log(1, err);
        return;
      } else {
        // res.set('Content-Type','application/json');
        try {
          data = JSON.parse(data);
        } catch (err) {
          console.log(err);
        }
        res.send(data);
      }
  });
});

然后在src的根目录创建mock目录，里面写上mock数据（json）就好了。形如：

  {
      "status": 200,
      "error": null,
      "data": {
        "success": true
        }
  }

mock数据的改进

上面的mock数据方式虽然mock数据中可以直接写json格式的数据，但是还不完美，比如我需要输出数组，直接在mock数据中复制粘贴真的是太恶心了！希望次mock数据是一段js，能够执行然后返回mock数据，在上面我们使用fs.readFile方法读出的是utf-8格式文本格式，需要使用JSON.parse转成json格式的然后发出json形式的mock数据。

现在关键的一步是我们需要把读取的文本文件当成js先执行，然后返回json形式的mock数据。搜索知道这里可以使用nodejs内置的vm模块来执行js。只需要data = JSON.parse(data);换成如下两行即可：

var script = new vm.Script('javascirpt string');
var dat = script.runInNewContext();

先new Script创建一个实例，该函数接受的就是 js的文本字符串，然后通过 runInNewContext() 函数来执行就可返回执行后的js了，此时我们的mock数据可以写成这样：

(function() {
 var data = [];
 for (var i = 0; i < 12; i++) {
   data.push({
     "title": "title" + i,
     "description": "描述" + i,
     "image": "https://img6.bdstatic.com/img/image/smallpic/w1.jpg",
     "url": "/detail?id=123"
   })
 }

 var res = {
   status: 200,
   error: null,
   "data": data
 }

 return res;
})();

怎么，是不是很完美！

打包部署

weppack打包部署后发现静态文件的地址不对，解决：在 config/index.js 中 assetsPublicPath: '/',, 改成 assetsPublicPath: './',，变成相对路径即可