現代前端開發入門學習指南

https://cn.vuejs.org/v2/guide/installation.html
http://element.eleme.io/#/zh-CN/guide/design
https://www.infoq.cn/article/04b2Z4HmV4xshXJ*bSFO
Function.prototype.apply是開發任何插件的核心。
使用SPA框架開發的前提是打包與編譯，也就是掌握npm和webpack、babel，至關於java的maven和jenkins以及jcp規範之於實現的選擇（ASF仍是jboss旗下），只不過是早期版本，坑比較多。
npm
npm是javascript的包管理器，使用Node.js開發，因此使用npm的前提是安裝Node.js，可是npm和Node.js又是由不一樣的團隊開發，發佈頻率也不一樣。Node.js安裝實例會在沒有全局權限的位置安裝一個npm。npm推薦安裝一個node版本管理器，windows下推薦nvm https://github.com/coreybutler/nvm-windows/releases。

npm經常使用命令
查看nodejs版本 node -v
查看npm版本 npm -v
安裝最新版本npm npm install npm@latest -g
npm中央倉庫 https://www.npmjs.com/
npm國內鏡像 安裝淘寶鏡像 npm install -g cnpm --registry=https://registry.npm.taobao.org   registry設置npm包的中央倉庫。
npm環境配置

npm package分兩類，全局、本地。maven就沒有這一區分，默認本地。通常來講須要cli的好比grunt CLI，安裝全局的。
安裝包 npm install <package_name> install能夠簡寫i
不帶報名時：會安裝package.json 中dependencies列出的全部模塊。帶--production標記或者NODE_ENV環境變量爲production是，則不安裝devDependencies中的模塊。
帶包名時：該命令會在當前目錄的node_modules（若是不存在，會自動建立）下載包以及依賴的包。若是當前目錄下不存在package.json文件，則默認會安裝最新版本的包，不然安裝語義上(https://docs.npmjs.com/getting-started/semantic-versioning)知足package.json中聲明的包的最新版本。包在node_modules中以後，就可使用require使用了，以下：
// index.js
var lodash = require('lodash');
var output = lodash.without([1, 2, 3], 1);
console.log(output);
而後在cmd下執行node index.js就會輸出[2, 3]。
若是沒有正確安裝lodash的話，就會報下列錯誤：
module.js:340
    throw err;
          ^
Error: Cannot find module 'lodash'

npm install主要選項參考https://docs.npmjs.com/cli/install。
默認狀況下，npm install安裝後會將依賴添加到package.json文件的dependencies。如需額外控制，聲明以下：
-P, --save-prod: 這是默認選項，添加到dependencies. 
-D, --save-dev: 添加到devDependencies.
-O, --save-optional: 添加到optionalDependencies.
--no-save: 不添加到dependencies.
-g全局安裝包。

刪除本地包
npm uninstall --save lodash
必定要帶上--save，他會一併刪除package.json中的dependencies。
刪除全局包
npm uninstall -g <package>

package.json是管理本地安裝的npm包的最佳方式，其完整的結構參考https://docs.npmjs.com/files/package.json。其做用是：
列出依賴的包
build可重複執行
使用語義兼容的規則聲明包版本

package.json中的關鍵屬性：
main：模塊的主入口，通常是index.js。在其餘模塊經過require("foo")加載它時，將返回main中導出的對象，該文件要相對於包目錄的根。
bin：若是模塊須要提供cli，則配置命令名和腳本的對應關係在此處。
scripts:設置在包的不一樣生命週期階段執行的腳本。參考https://docs.npmjs.com/misc/scripts
config：設置環境變量。
dependencies：聲明運行時依賴。
devDependencies：編譯、開發時依賴。

npm run是npm run-script <command> [--silent] [-- <args>...]的簡寫。用於執行package.json中scripts裏定義的任何命令。若是沒有command，則列出全部命令。npm run能夠支持全部內置的npm start, npm test等，後者能夠說是快捷方式。

npm init用於建立package.json
一般管理package.json中依賴的最好方式是使用npm install的-P或-D選項。
  "devDependencies" : {
    "my_test_framework": "^3.1.0"
  }
上述中的^表示從3.1.0開始的子版本。

npm查看倉庫中特定包的全部版本，以下：

D:\GMP\src\front\ebs-k3c>npm view jquery versions

[ '1.5.1',
'1.6.2',
'1.6.3',
'1.7.2',
'1.7.3',
'1.8.2',
'1.8.3',
'1.9.1',

...

]

安裝特定版本：

npm install jquery@1.7.2

模塊與包的區別
package是由package.json描述的一個目錄或文件。
module是能夠被Node.js' require()的任何目錄或文件，最簡單能夠是一個js文件，因此package通常是module，module不必定是package。

npm環境配置
配置的讀取優先級是命令行，環境變量（以npm_config_開頭，大小寫不敏感，命令行選項-分隔單詞，環境變量則是_），npmrc（分別是/path/to/my/project/.npmrc，$HOME/.npmrc，$PREFIX/etc/npmrc，/path/to/npm/npmrc）
查看當前配置 npm config ls -l
更改配置(會更改配置文件) npm config set <key> <value> [-g|--global]

webpack
webpack是一個模塊打包器，主要將js打包後供瀏覽器使用。webpack目前主要在用的版本是2.x和3.x，詳細參考https://www.npmjs.com/package/webpack。可使用npm install --save-dev webpack安裝，安裝後可使用cli或者api使用。核心功能包括：
*打包 ES Modules, CommonJS, AMD 模塊，甚至他們的組合；
*能夠建立一個單獨的文件或者多個片斷，這些文件能夠在運行時異步加載；
*依賴在編譯時解析，以便減小運行時大小；
*能夠在編譯時預處理文件，好比TypeScript轉JavaScript，圖片轉Base64等；
*高度模塊化的插件系統；

webpack demo打包入門參考https://webpack.js.org/guides/getting-started/
ES2015中標準化了import/export，雖然大部分瀏覽器不支持，可是webpack原始支持它們。webpack編譯時會將它們轉換爲瀏覽器支持的語法。webpack還支持其餘的模塊語法，具體能夠參考https://webpack.js.org/api/module-methods/，不過他不會處理其餘任何語句，若是使用了 ES2015外的特性，必須經過加載器系統配置編譯器好比Babel。

webpack除了內置核心功能外，最厲害的就是他的插件系統了，絕大部分外圍功能都是經過外部插件來實現的。
在webpack中，能夠經過加載器預處理文件，這樣能夠將靜態資源從js中剝離出來，加載器使用Node.js編寫。加載器主要分爲文件、JSON、編譯、模板、CSS、測試與LINT類、框架（vue、angular）這幾大類。
webpack 2開箱即用支持ES2015+, CommonJS, AMD模塊。

大部分的實際項目都比較複雜，因此webpack經過配置文件來設置各類規則，這比在命令行中設置各類選項好得多。webpack有不少的選項，其中4個最核心的概念是：
entry:指定了webpack應該用來創建內部依賴樹的模塊。進入入口點以後，webpack就會找出入口依賴的模塊和庫。
output:指定輸出文件名以及目錄。
loaders:加載器使得webpack能夠處理js以外的文件。從本質上來講，webpack加載器會將全部類型的文件轉換爲模塊。module.rules用於聲明加載器。加載器自己也是一個js模塊。
plugins:插件是webpack的核心。webpack自己也是基於插件系統構建的。插件和加載器有一部分重合的功能，可是用途比加載器更加普遍。要使用插件，須要使用require()導入，並將其加入plugins 數組。大部分插件都有自定義選項。
devServer：設置本地HTTP開發服務器。
好比：
在項目中建立一個文件webpack.config.js
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: '[hash].bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};
完整的配置能夠參考：https://webpack.js.org/configuration/output/
filename中有幾個常見的模板會被用於生產：
[hash]
[chunkhash]
[name]
[id]
[query]

運行
npx webpack --config webpack.config.js
輸出以下：
D:\webpack-demo>npx webpack --config webpack.config.js
C:\Users\admin\AppData\Roaming\npm\node_modules\webpack\bin\webpack.js
Hash: 5462c58b0b68cf397893
Version: webpack 3.8.1
Time: 670ms
    Asset    Size  Chunks                    Chunk Names
bundle.js  544 kB       0  [emitted]  [big]  main
   [0] ./src/index.js 303 bytes {0} [built]
   [2] (webpack)/buildin/global.js 488 bytes {0} [built]
   [3] (webpack)/buildin/module.js 495 bytes {0} [built]
    + 1 hidden module
webpack默認會查找當前目錄下的webpack.config.js，也能夠經過--config指定其餘配置文件，通常生產中會區分dev,test,prod。
實際中，通常不會獨立運行webpack命令，而是集成在npm run XX中。以下：
{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "main": "./src/index.js",
  "scripts": {
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "lodash": "^4.17.4"
  }
}

D:\webpack-demo>npm run build

> webpack-demo@1.0.0 build D:\webpack-demo
> webpack

Hash: 5462c58b0b68cf397893
Version: webpack 3.8.1
Time: 666ms
    Asset    Size  Chunks                    Chunk Names
bundle.js  544 kB       0  [emitted]  [big]  main
   [0] ./src/index.js 303 bytes {0} [built]
   [2] (webpack)/buildin/global.js 488 bytes {0} [built]
   [3] (webpack)/buildin/module.js 495 bytes {0} [built]
    + 1 hidden module

在webpack以前，一般使用grunt/gulp將圖片、字體等從src移動到dist目錄，JavaScript 同理。可是webpack會動態打包全部依賴，除了js外，webpack經過加載器能夠一樣處理其餘任何資源。webpack使用正則表達式肯定應該查找那個文件以及使用哪一個加載器處理。其格式以下：
  module: {
     rules: [
       {
         test: /\.css$/,
         use: [
           'style-loader',
           'css-loader'
         ]                       
       }
     ]
   }
其中Rule.loader是Rule.use: [ { loader } ]的快捷方式，Rule.loaders是Rule.use的別名。一個Rule能夠分爲三部分：條件、結果、子Rules。

內置了對json文件加載器的支持。
webpack支持配置文件使用TypeScript、CoffeeScript、JSX和Babel編寫。
默認狀況下，webpack打包輸出的文件名是不會自動更新到index.html的，這樣就會致使沒法使用hash名，爲了解決這個問題，HtmlWebpackPlugin就出現了。HtmlWebpackPlugin默認會生成本身的index.html，即便dist目錄下已經存在了，全部選項參見https://github.com/jantimon/html-webpack-plugin。
webpack-dev-server是一個簡單的web服務器，能夠熱加載變動，其全部配置可參考https://webpack.js.org/configuration/dev-server/。


通常來講，應該對開發和生產使用不一樣的webpack配置文件。
webpack與node.js模塊的差別在於，webpack能夠經過下列任何方式描述模塊依賴關係：
ES2015 import
CommonJS require()
AMD define和require
css/sass/less文件中的@import語句
樣式表中的圖片url

webpack支持的模塊類型（已經有對應的loader）包括：
CoffeeScript
TypeScript
ESNext (Babel)
Sass
Less
Stylus

webpack從resolve.modules環境變量或者初始化參數中指定的全部目錄搜索模塊。

vue,react,angularjs的選擇就像是j2ee標準實現,spring,struts之間的選擇

 由於不使用jquery了，天然要有一個替代ajax請求的庫，不至於使用原生的XMLHttpRequest，因此最多見的就是axios了，在vue裏面，早期是vue-resource，不過已經不維護了。

參考：axios在ie下的兼容性問題 vue webpack es6-promise

參考：2018 web前端應該學什麼 https://zhuanlan.zhihu.com/p/32193591

參考：axios，https://segmentfault.com/a/1190000008470355?utm_source=tuicool&utm_medium=referral，https://www.npmjs.com/package/axios

vuex：Vuex 是一個專爲 Vue.js 應用程序開發的狀態管理模式。它採用集中式存儲管理應用的全部組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。雖然 Vuex 能夠幫助咱們管理共享狀態，但也附帶了更多的概念和框架。這須要對短時間和長期效益進行權衡。若是您不打算開發大型單頁應用，使用 Vuex 多是繁瑣冗餘的。確實是如此——若是您的應用夠簡單，您最好不要使用 Vuex。一個簡單的 global event bus 就足夠您所需了。可是，若是您須要構建是一箇中大型單頁應用，您極可能會考慮如何更好地在組件外部管理狀態，Vuex 將會成爲天然而然的選擇。https://vuex.vuejs.org/zh-cn/intro.html

vue-router：https://router.vuejs.org/zh-cn/

element ui：

mint ui：

 

[Vue warn]: Property or method "name" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

緣由:在data中沒有定義一個name, 致錯

解決方法:在data中定義一個name=" ",