vue上線項目中常見的組件以及介紹

本文主要從一個上線項目的packge.json分析一個上線項目中常見的插件以及為什么會引入這些插件。

通過這些配置介紹,你可以去優化已有的項目或者找到解決棘手問題的靈感

{

"name": "bimserver-admin",

"version": "1.0.0",

"description": "A Vue.js project",

"author": "wbjqiqi",

"private": true,

"scripts": {———script中是我們在npm中輸入的npm run * 所執行的對應的node命令

"dev": "node build/dev-server.js",? => npm run dev 相當于執行 => node build/dev-server.js

"start": "node build/dev-server.js",

"build": "node build/build.js",

"unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",

"e2e": "node test/e2e/runner.js",

"test": "npm run unit && npm run e2e",

"lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs"

},

"dependencies": {------------------------------npm run build 打包的時候依賴的插件

"axios": "^0.16.2", => 一款封裝了一些ajax方法的插件,類似于jquery中的ajax封裝。與此類似的插件還有vue-resource

"commander": "^2.11.0", => 獲取命令行中用戶輸入的參數,從而執行不同的打包方式。

在命令行中輸入參數的方式為? ? npm run dev -- -p => 參數為-p

"element-ui": "^1.4.3", => vue的一款ui插件,封裝了一些常見的ui,類似于jquery和jquery-ui的關系

"vue": "^2.3.3",

"vue-loader": "^12.2.2", => 識別我們寫的.vue后綴的文件,將這些文件轉化成js

"vue-logger": "^0.0.2", => 控制臺輸出的一個插件,讓我們在控制臺中輸出的信息更多元化

"vue-router": "^2.6.0", => vue中路由跳轉的插件

"vuex": "^2.3.1" => vue中存儲一些所有文件中都能獲取和控制的變量和方法

},

"devDependencies": {-------------------------------npm run dev 開發環境測試的時候依賴的插件

"@types/node": "^8.0.25",

"@types/webpack": "^3.0.10",

"@types/webpack-env": "^1.13.0",

"autoprefixer": "^7.1.2", => 自動給我們的css代碼添加瀏覽器兼容性,用法,在webpack中css規則使用postcss-loader

module.exports = {

module: {

rules: [ { test:?? /\.css$/,use: ["style-loader", "css-loader", "postcss-loader"]}

}

plugins: [require('autoprefixer')]

}

"axios": "^0.16.2",

"babel-core": "^6.22.1",------------------------------------------------------

"babel-eslint": "^7.1.1",? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? |

"babel-loader": "^7.1.1",? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? |

"babel-plugin-istanbul": "^4.1.1",? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? |

"babel-plugin-transform-runtime": "^6.22.0",? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? |=>babel轉碼換,將一種語法轉換成另一種語法

"babel-preset-env": "^1.3.2",? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? |例如es6=>es5,在.babelrc中配置

"babel-preset-es2015": "^6.24.1",? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? |

"babel-preset-stage-2": "^6.22.0",? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? |

"babel-register": "^6.22.0",--------------------------------------------------

"body-parser": "^1.17.2", => node搭建服務端時,將前端請求體中的內容規則化

搭配express組件

app.use(bodyParser.json());

app.use(bodyParser.urlencoded({ extended: false }));

"chai": "^3.5.0", => 用于自動化測試腳本開發 斷言庫(assert,expect,should)

"chalk": "^2.0.1", => 粉筆,在命令行報彩色錯誤,炫酷吧

"chromedriver": "^2.27.2", => e2e測試的時候使用,可以瀏覽器自動測試你的代碼效果是否正確(用戶的角度)

"connect-history-api-fallback": "^1.3.0",? => vue路由實現的基礎,識別url中的’/user‘等,沒有會產成404錯誤

"copy-webpack-plugin": "^4.0.1", => 拷貝資源和文件夾到打包目錄

"cross-env": "^5.0.1", -------------------------------------------

| => 解決跨平臺設置NODE_ENV的問題

"cross-spawn": "^5.0.1",-------------------------------------------

"css-loader": "^0.28.5",

"cssnano": "^3.10.0", => css代碼的壓縮,去除一些無用的空格

"element-ui": "^1.4.3", => 同生產環境

"eslint": "^3.19.0",----------------------------------------------------------

"eslint-config-standard": "^6.2.1",? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? |

"eslint-config-vue": "^2.0.2",? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? |

"eslint-friendly-formatter": "^3.0.0",? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? | => 設定一些大家都喜歡的代碼格式,方便大多人

"eslint-loader": "^1.7.1",? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? |看代碼

"eslint-plugin-html": "^3.0.0",? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? |

"eslint-plugin-promise": "^3.4.0",? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? |

"eslint-plugin-standard": "^2.0.1",-------------------------------------------

"eventsource-polyfill": "^0.9.6", => 實現瀏覽器的熱更新

"express": "^4.14.1", => 封裝了一些node寫服務端的api

"extract-text-webpack-plugin": "^2.0.0",? => 將我們在.vue中寫的內聯樣式提取到單獨的css文件中

"file-loader": "^0.11.1", => 讀取文件

"friendly-errors-webpack-plugin": "^1.1.3", => 將我們報的錯分類整理在命令行上顯示

"html-webpack-plugin": "^2.28.0", => 壓縮打包html文件

"http-proxy-middleware": "^0.17.3",? => node服務端的代理插件,讓代碼在服務端跑起來

"inject-loader": "^3.0.0", => webpack找到我們的文件引用的文件,一并打包

"karma": "^1.4.1",-------------------------------------------------------------

"karma-coverage": "^1.1.1",? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? |

"karma-mocha": "^1.3.0",? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? |

"karma-phantomjs-launcher": "^1.0.2",? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? |

"karma-phantomjs-shim": "^1.4.0",? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? | => 調用selenium-server,進行代碼的unit測試

"karma-sinon-chai": "^1.3.1",? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? |

"karma-sourcemap-loader": "^0.3.7",? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? |

"karma-spec-reporter": "0.0.31",? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? |

"karma-webpack": "^2.0.2",-----------------------------------------------------

"less": "^2.7.2",

"less-loader": "^4.0.5",

"lolex": "^1.5.2", => 封裝了一些定時器的api,在測試框架中使用。

此外,在瀏覽器環境中,lolex提供了一個performance從時鐘開始的實現。

在節點環境中,lolex提供了nextTick與時鐘同步的實現,以及與時鐘一起使用的process.hrtime墊片。

"mocha": "^3.2.0", => js測試框架

"nightwatch": "^0.9.12", => 類似與karma,在vue-cli中,e2e使用的該插件

"opn": "^5.1.0", => 跨平臺打開資源

"optimize-css-assets-webpack-plugin": "^2.0.0", => css打包插件,調用cssnano

"ora": "^1.2.0",? => node中彩色圖標的輸出

"phantomjs-prebuilt": "^2.1.14", => 調用瀏覽器的unit測試用到

"rimraf": "^2.6.0", => 節點的UNIX命令 rm -rf

"sass-loader": "^6.0.6",

"scss-loader": "^0.0.1",

"selenium-server": "^3.0.1", => 將JavaScript代碼注入到瀏覽器中測試代碼(自動化)

"semver": "^5.3.0", => 可以判定當前npm/webpack/node...的版本是否大于自己想要的版本

"shelljs": "^0.7.6", => 調用shell命令

"sinon": "^2.1.0", ----------------

| => 用于JavaScript的unit測試,存根和模擬。適用于任何單元測試框架。

"sinon-chai": "^2.8.0",------------

"string-replace-loader": "^1.3.0", =>替換字符串工具,可以在webpack打包前將源文件中某一些可配置項替換掉再打包

"ts-loader": "^2.3.3", => typescriptde的解釋器

"typescript": "^2.4.2",

"url-loader": "^0.5.8",

"vue-loader": "^12.2.2",

"vue-resource": "^1.3.4", => 封裝了一些ajax請求的模板,可以方便的調用

"vue-style-loader": "^3.0.1", => 解釋vue內部的css樣式

"vue-template-compiler": "^2.3.3",

"vuex-router-sync": "^4.2.0",

"webpack": "^2.6.1",----------------------------------------------------------

"webpack-bundle-analyzer": "^2.2.1",? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? |

"webpack-dev-middleware": "^1.10.0",? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? | => vue資源模塊化管理

"webpack-hot-middleware": "^2.18.0",? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? |

"webpack-merge": "^4.1.0"-----------------------------------------------------

},--------------------------------------------------------------

"engines": {? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? |

"node": ">= 4.0.0",? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? |

"npm": ">= 3.0.0"

},--------------------------------------------------------------

"browserslist": [-----------------------------------------------

"> 1%",? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? |

"last 2 versions",? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? | => 適用的瀏覽器版本范圍

"not ie <= 8"? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? |

]---------------------------------------------------------------

}

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容