Vue building project from zero (three) - common plug-ins

A template direct pull in, package.json follows:

{
  "name": "vuecli2-test",
  "version": "1.0.0",
  "description": "A Vue.js project",
  "author": "xx <[email protected]>",
  "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

Second, plug-ins or other commonly used documents:

1. UI plug-in

　　 Ui-Element : Pc end

　　 Iview : Pc end

　　 antd :. PC terminal Incidentally ant design pro, i.e., react with the box on the front-end item

　　 VUX : moving end

　　 UI-Vant : moving end

　　 UI-Mint : moving end

2. css

　　 less  +-less Loader: preprocessing the CSS language

　　 Sass : mature, stable, powerful extension language css

3. icon

　　 Awesome-font : provides scalable vector icons that can be customized size, color, shadows, and any style you can use the CSS.

　　 IconFont : Ali mother MUX to create vector icon management, communication platform, non-plug-in.

4. vue family one bucket state management, needed to install

　　 vuex : Status Manager.

5. Request

　　Axios : based on the promise of the HTTP library, you can use the browser and node.js in.

6. charting tools

　　Charts-E : a visual library with open source JavaScript implementation, can run smoothly on the PC and mobile devices, is compatible with most of the current browser.

　　Charts-V : vue + e-charts based graph tool, need to use e-charts.

7. Encryption

　　MD5-JS / MD5: MD5 encrypted.

　　jsencrypt / jsencrypt-RSA: RSA encryption used to encrypt the file encryption md5.

8. Map

　　AMAP-VUE : Map-based components with high moral vue 2.x

　　bvuemap : Baidu map development documents

9. Animation

　　Start-VUE : thumbs animated effects

　　Touch-Ripple-VUE : Click the effect of water droplets

　　hover.css : mouse over animation

　　Animate : Animation

　　TweenMax : is the core plug greensock animation platform, greensock is a set of tools to create high-performance html5 animation in all major browsers used.

10. Other plug-ins

　　nProgress : progress bar

　　Fullscreen-VUE : Full Screen component

　　Viewer-v : click to enlarge picture preview, element-ui 2.11.0 has achieved big picture preview.

　　-china-Area-Element the Data : China Address

　　City-VUE : phone terminal region selection

　　Clipboard : clipboard

　　Video-Player-VUE / VUE-Video : Video Player

　　vue-verify-pop verification prompt insert with the bubble:

　　dragging-VUE : drag

　　lazy-v : Lazy Load