從零構建vue項目(三)--vue經常使用插件

1、直接拉取的模板中,package.json以下:

{
  "name": "vuecli2-test",
  "version": "1.0.0",
  "description": "A Vue.js project",
  "author": "xx <xxxx@qq.com>",
  "private": true,
  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js"
  },
  "dependencies": {
    "vue": "^2.5.2",
    "vue-router": "^3.0.1"
  },
  "devDependencies": {
    "autoprefixer": "^7.1.2",
    "babel-core": "^6.22.1",
    "babel-helper-vue-jsx-merge-props": "^2.0.3",
    "babel-loader": "^7.1.1",
    "babel-plugin-syntax-jsx": "^6.18.0",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-plugin-transform-vue-jsx": "^3.5.0",
    "babel-preset-env": "^1.3.2",
    "babel-preset-stage-2": "^6.22.0",
    "chalk": "^2.0.1",
    "copy-webpack-plugin": "^4.0.1",
    "css-loader": "^0.28.0",
    "extract-text-webpack-plugin": "^3.0.0",
    "file-loader": "^1.1.4",
    "friendly-errors-webpack-plugin": "^1.6.1",
    "html-webpack-plugin": "^2.30.1",
    "node-notifier": "^5.1.2",
    "optimize-css-assets-webpack-plugin": "^3.2.0",
    "ora": "^1.2.0",
    "portfinder": "^1.0.13",
    "postcss-import": "^11.0.0",
    "postcss-loader": "^2.0.8",
    "postcss-url": "^7.2.1",
    "rimraf": "^2.6.0",
    "semver": "^5.3.0",
    "shelljs": "^0.7.6",
    "uglifyjs-webpack-plugin": "^1.1.1",
    "url-loader": "^0.5.8",
    "vue-loader": "^13.3.0",
    "vue-style-loader": "^3.0.1",
    "vue-template-compiler": "^2.5.2",
    "webpack": "^3.6.0",
    "webpack-bundle-analyzer": "^2.9.0",
    "webpack-dev-server": "^2.9.1",
    "webpack-merge": "^4.1.0"
  },
  "engines": {
    "node": ">= 6.0.0",
    "npm": ">= 3.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

View Code

2、經常使用的其餘插件或者文檔:

1. UI插件

　　 element-ui: pc端

　　 iview: pc端

　　 antd: pc端. 順便提一下ant design pro, 基於react的開箱即用的中臺前端項目

　　 vux: 移動端

　　 vant-ui: 移動端

　　 mint-ui: 移動端

2. css

　　 less + less-loader:  CSS 預處理語言

　　 sass: 成熟、穩定、強大的css擴展語言

3. icon

　　 font-awesome: 提供可縮放矢量圖標,它能夠被定製大小、顏色、陰影以及任何能夠用CSS的樣式。

　　 iconfont: 阿里媽媽MUX打造的矢量圖標管理、交流平臺,  非插件。

4. vue全家桶之一狀態管理, 須要的話安裝

　　 vuex: 狀態管理器。

5. 請求

　　axios: 基於 promise 的 HTTP 庫，能夠用在瀏覽器和 node.js 中。

6. 圖表工具

　　e-charts: 一個使用 JavaScript 實現的開源可視化庫，能夠流暢的運行在 PC 和移動設備上，兼容當前絕大部分瀏覽器。

　　v-charts: 基於vue + e-charts 的圖表工具, 使用時須要安裝e-charts.

7. 加密

　　js-md5 / md5: md5加密.

　　jsencrypt / jsencrypt-rsa: rsa加密, 可用來加密md5加密後的文件.

8. 地圖

　　vue-amap: 基於vue 2.x與高德的地圖組件

　　bvuemap: 百度地圖開發文檔

9. 動畫

　　vue-start: 帶動畫的點贊效果

　　vue-touch-ripple: 點擊水滴效果

　　hover.css: 鼠標通過的動畫

　　animate: 動畫

　　tweenmax: 是greensock 動畫平臺的核心插件,greensock 是一套用於在全部主流瀏覽器中製做高性能html5動畫的工具。

10. 其餘插件

　　nprogress: 進度條

　　vue-fullscreen: 全屏組件

　　v-viewer: 圖片點擊放大預覽, element-ui 2.11.0已實現大圖預覽.

　　element-china-area-data: 中國地址

　　vue-city: 手機端地區選擇

　　clipboard : 剪切板

　　vue-video-player / vue-video: 視頻播放器

　　vue-verify-pop: 帶氣泡提示的校驗插件

　　vue-dragging: 拖拽

　　v-lazy: 懶加載