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"                                                |
      ]---------------------------------------------------------------
    }

你可能感兴趣的:(vue上线项目中常见的组件以及介绍)