MockJs学习准备

构建开发环境

npm管理工具

作用： 我们使用npm来初始化项目和引入MockJs、webpack；

下载安装： 详情见： http://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/00143450141843488beddae2a1044cab5acb5125baf0882000

初始化项目

指令：

终端cd到指定目录；（之后的操作都是在此目录下完成）
npm init
输入项目的名字、作者、git地址、git密码、协议等信息（不填将会填充默认值）
成功初始化项目
webpack开发工具

作用： 我们使用webpack来设置项目的入口和打包项目，并且设置一个开发用的服务器。

下载：

npm install webpack --save-dev

npm install webpack-dev-server --save-dev
配置：
1-目录下创建web文件夹，web文件夹下创建index.html；
2-目录下创建src文件夹，src文件夹下创建index.js；
3-目录下创建webpack文件夹，webpack文件夹创建webpack.dev.config.js和webpack.build.config.js； 4-webpack.dev.config.js写入webpack server的配置内容，设置webpack的js入口（index.js），打包出来的文件名（bundle.js）,开发服务器的端口号(默认为8080)。


* * var webpack = require('webpack')

* * module.exports = {
* *   entry: './src/index.js',
* *   output: {
* *     path: __dirname + '/web/build',
* *     filename: 'bundle.js'
* *   },
* *   module: {
* *     loaders: [
* *       
* *     ]
* *   },
* *   devServer: {
* *     contentBase: 'web',
* *     port: 18000,
* *     hot: true,
* *     inline: true
* *   }
* * }

5-webpack.build.config.js与webpack.dev.config.js结构相似，但是没有devServer这一块。


* * var webpack = require('webpack')

* * module.exports = {
* *   entry: './src/index.js',
* *   output: {
* *     path: __dirname + '/web/build',
* *     filename: 'bundle.js'
* *   },
* *   module: {
* *     loaders: [
* *       
* *     ]
* *   }
* * }

6-package.json设置运行webpack server的script


{
  "name": "mockjs_demo",
  "version": "1.0.0",
  "description": "用于学习mockjs",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "./node_modules/.bin/webpack-dev-server --config webpack/webpack.dev.config.js --progress --colors --inline --hot"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "mockjs": "^1.0.1-beta3"
  },
  "devDependencies": {
    "webpack": "^2.2.1",
    "webpack-dev-server": "^2.3.0"
  }
}

7-终端上运行npm start即可运行开发服务器，浏览器输入127.0.0.1:18000即可看到运行结果

MockJs

步骤： 1.终端执行npm install mockJs -save 2.在index.js中编写测试代码，调用MockJs，测试MockJs的数据产生功能


// 使用 Mock
var Mock = require('mockjs')
var data = Mock.mock({
    // 属性 list 的值是一个数组，其中含有 1 到 10 个元素
    'list|1-10': [{
        // 属性 id 是一个自增数，起始值为 1，每次增 1
        'id|+1': 1
    }]
})
// 输出结果
document.write('由MockJs产生的随机数组：' + JSON.stringify(data, null, 4));

blankzust / blog

MockJs学习 #1

MockJs学习准备

构建开发环境

npm管理工具

初始化项目

webpack开发工具

MockJs

Webpack server搭建Mock开发服务器

目标

好处

思路