发表于 | 阅读次数:

1、初始化

1
2
3
$ npm i -D eslint
$ npm i -D eslint-loader
$ eslint --init

选择 standard，并安装了以下依赖

1
2
3
4
5
6
7
8
9
10
// package.json
{
    "eslint": "^4.19.1",
    "eslint-config-standard": "^11.0.0",
    "eslint-loader": "2.0.0",
    "eslint-plugin-import": "^2.11.0",
    "eslint-plugin-node": "^6.0.1",
    "eslint-plugin-promise": "^3.7.0",
    "eslint-plugin-standard": "^3.0.1"
}

1
2
3
4
5
6
7
// .eslintrc.js
module.exports = {
  'extends': 'standard',
  'plugins': [
    'html'
  ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
// webpack.config.js
var config = {
  module: {
    rules: [
      {
        enforce: 'pre',
        test: /\.(js|vue)$/,
        exclude: /node_modules/,
        loader: 'eslint-loader'
      }
    ]
  }
}

2、其他依赖

  1. eslint-plugin-html
    This ESLint plugin allows linting and fixing inline scripts contained in HTML files.(检查 HTML、Vue 中的 javascript)
    1
    $ npm i --D eslint-plugin-html

3、指令

1
2
// 禁用规则
/* eslint-disable no-new */

4、问题

  1. Intellij 默认启用检查 eslint 时，node_modules 包太多导致卡死

5、参考

  1. eslint-loader

发表于 | 阅读次数:

1、跳转
方式一：使用 router-link

1
2
3
4
5
6
<template>
    <div>
        <div>首页</div>
        <router-link to="/about">跳转到 about</router-link>
    </div>
</template>

方式二：通过 js 跳转

1
2
3
4
5
6
7
8
9
<script>
    export default {
        methods: {
          handleRouter () {
            this.$router.push('/user/123');
          }
        }
    }
</script>

阅读全文 »

发表于 | 阅读次数:

包

1、css-loader
The css-loader interprets @import and url() like import/require() and will resolve them.
日期：2018-03-16 10:35:34，版本：0.28.11
日期：2017-03-13 13:45:04，版本：0.27.3

1
npm i -D css-loader

1
2
3
4
5
6
7
8
9
10
11
12
13
var config = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }
};
阅读全文 »

发表于 | 阅读次数:

1.CSS解决高度自适应问题

1
2
3
4
<div id="main">
    <div id="nav">nav</div>
    <div id="content">content</div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
html, body, #app {
    height: 100%;
    margin: 0;
    padding: 0;
}
#main {
    position: relative;
    height: 100%;
    width: 120px;
    background-color: #999;
}
#nav {
    height: 50px;
    background-color: #85d989;
}
#content {
    position: absolute;
    top: 50px;
    bottom: 0;
    width: 100%;
    background-color: #cc85d9;
}

发表于 | 阅读次数:

出错

使用 npm 报错
no_perms Private mode enable, only admin can publish this module
切换回原本的

1
$ npm config set registry http://registry.npmjs.org

阅读全文 »

发表于 | 阅读次数:

安装

1
2
3
$ mkdir webpack-demo && cd webpack-demo
$ npm init -y
$ npm install --save-dev webpack
阅读全文 »

发表于 | 分类于 | 阅读次数:

一、安装

安装 express

1
npm install express --save

二、使用 express-generator 生成应用骨架

安装 express-generator

1
$ npm install express-generator -g

查看可选命令

1
$ express -h

创建应用

1
$ express webapp

安装依赖

1
2
$ cd myapp 
$ npm install

启动应用

1
npm start

允许跨域

1
2
3
4
5
6
7
8
app.all('*', function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Content-Type,Content-Length, Authorization, Accept,X-Requested-With");
    res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
    res.header("X-Powered-By",' 3.2.1')
    if(req.method === "OPTIONS") res.send(200);/*让options请求快速返回*/
    else  next();
});

热部署

1
2
$ npm install -g supervisor
$ supervisor app.js

参考

  1. Express 中文网