Vue-cli

2.9.3
Vue-cli  create folder structure，debug on local，deploy，hot call，unit test.
npm install -g  vue-cli   / sudo npm install -g  vue-cli
node -v    //resultr:  v12.9.0
babel-core , ES6 to ES5
>vue list
vue init webpack test-project      //vue init template-name project-name
cd test-project
npm install   // install node_modules folder
npm run dev

package-lock.json, in  npm 5.0 raise speed includes all dependencies.

webpack.config.js
h t t p s : / /youtube.com/watch?v=xKRbf89ewaA&list=PL9nxfq1tlKKm7rafYCLfGgymd-LRfzGEM&index=9

vue-resource AJAX

.babelrc /babel.config.js  es6 to es2015  //node-modules/babel-runtime
.editcorconfig    end_of_line = lf //for Mac
.eslintignore    ignore check grammar  to build and config folders  eslint
.eslintrc.js   format rules
.gitignore
index.html

//WebStorm
format : Command + option + L    //webstore on Mac
Ctrl + alt + L
//Visual Studio Code //https://stackoverflow.com/questions/29973357/how-do-you-format-code-in-visual-studio-code-vscode

The code formatting is available in Visual Studio Code through the following shortcuts:

• On Windows Shift + Alt + F
• On Mac Shift + Option + F
• On Ubuntu Ctrl + Shift + I

hot reload
Webpack
Dev running generated app.js, localhost.html, __webpack__hmr(hot recall)

nmp run dev   //"dev": "vue-cli-service serve",

Root Path:
var projectRoot = path.resolve(__dirname,'../')
In dev-server.js
//running files in memory during development.
var devMiddleware = require('webpack-dev-middleware')(compiler,{
  publicPath:wepackConfig.output.publicPath,
  stats:{colors:true,chunks:false}
})

In webpack.dev.conf.js

plugins:[
new HtmlWebpackPlugin({
filename:'index.html',   //generate the name of html.
template:'index.html',
inject.true                 //CSS, js path insert into html
})
]
Webpack change the images less 10kb into base64 code to merge into html.

Design Resource:

PSD
3* img== 90*54
2* img== 60*36
/psd/*.mkm 标注了设计稿中的尺寸.

DPI
Device Pixel Ratio
www.zhangxinxu.com/wordpress/2012/08/window-devicepixelratio/

SVG
icomoon.io
npm installl stylus --save-dev
npm install stylus-loader stylus --save-dev
Vue-router
router.vuejs.org/zh-cn/installation.html
npm install vue-router
https://cli.im/ generates a code that can be scan by the mobile, and We can see the page on the mobile.
>npm install vue-resource --save-dev
"dependencies": {
    "vue": "^2.5.2",
    "vue-router": "^3.0.1",
    "vue-resource": "^1.5.1",
    "babel-runtime":"^6.26.0"

  },
In eslintrc.js
  rules: {
    // allow async-await
    'generator-star-spacing': 'off',
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
  ,'semi':['error','always']
  ,'indent':'off',
  'space-before-function-paren':'off'
  }
Mock DATA--------------------------------------------

1.npm install webpack-api-mocker --save-dev
2.In webpack.dev.conf.js

const apiMocker = require('webpack-api-mocker')
  devServer: {
   before(app) {
         apiMocker(app, path.resolve('mock/api.js'))
       },
.......
3.Create the folder: mock/data/data.json and mock/api.js

 the following is api.js
-------------------------------
const fs = require('fs');

function fromJSONFile(filename) {
    return (req, res) => {
        const data = fs.readFileSync(`mock/data/${filename}.json`).toString();
        const json = JSON.parse(data);
        return res.json(json);
    };
}
const proxy = {
    'GET /app/user/profile': fromJSONFile('data'),
      'GET /api/user': {id: 1, username: 'kenny', sex: 6 },
      'GET /api/user/list': [
        {id: 1, username: 'kenny', sex: 6 },
        {id: 2, username: 'kenny', sex: 6 }
      ],
      'POST /api/login/account': (req, res) => {
        const { password, username } = req.body;
        if (password === '888888' && username === 'admin') {
          return res.send({
            status: 'ok',
            code: 0,
            token: "sdfsdfsdfdsf",
            data: {id: 1, username: 'kenny', sex: 6 }
          });
        } else {
          return res.send({status: 'error', code: 403 });
        }
      },
      'DELETE /api/user/:id': (req, res) => {
        console.log('---->', req.body)
        console.log('---->', req.params.id)
        res.send({ status: 'ok', message: '删除成功！' });
      }
};
module.exports = proxy;

Mock DATA--------------------------------------------
:class=""
create(){}