ElementUI的学习记录 <一>

ElementUI是饿了么前端团队基于Vue2.0开发的一组控件库，就像bootstrap基于css。
官网地址：http://element.eleme.io/#/zh-CN
Github: https://github.com/ElementUI

快速上手

通过官网的引导，我们可以去github上的快速上手模板开始。<https://github.com/ElementUI/element-starter>

框架分析

主要分析以下几个文件：package.json 、webpack.config.js、postcss.config.css

package.json

  {
    "name": "element-starter",
    "description": "A Vue.js project",
    "author": "yi.shyang@ele.me",
    "private": true,
    "scripts": {
      #执行 npm run dev 时所执行的操作，具体是通过inline模式和hot模式启动webpack-dev-server。达到热替换的功能
      "dev": "webpack-dev-server --inline --hot --env.dev",

      #执行 npm run builde 时所执行的操作
      "build": "rimraf dist && webpack -p --progress --hide-modules"
    },
    "dependencies": {
      "element-ui": "^1.1.2",
      "vue": "^2.1.8"
    },
    "engines": {
      "node": ">=6"
    },
    "devDependencies": {
      "autoprefixer": "^6.6.0",
      "babel-core": "^6.24.1",
      "babel-loader": "^6.4.0",
      "babel-preset-vue-app": "^1.2.0",
      "css-loader": "^0.27.0",
      "file-loader": "^0.10.1",
      "html-webpack-plugin": "^2.24.1",
      "postcss-loader": "^1.3.3",
      "rimraf": "^2.5.4",
      "style-loader": "^0.13.2",
      "url-loader": "^0.5.8",
      "vue-loader": "^11.1.4",
      "vue-template-compiler": "^2.1.8",
      "webpack": "^2.4.1",
      "webpack-dev-server": "^2.4.2"
    }
}

然后是webpack.config.js

  #1.resolve处理路径问题
  const resolve = require('path').resolve

  #2.webpack用来打包
  const webpack = require('webpack')

  #3.HtmlWebpackPlugin为webpack的一个插件
  const HtmlWebpackPlugin = require('html-webpack-plugin')

  #4.处理字体或者图片
  const url = require('url')
  const publicPath = ''

  module.exports = (options = {}) => ({
      //5.入口文件
      entry: {
        vendor: './src/vendor',
        index: './src/main.js'
      },

      //6.输出文件
      output: {
        //定义文件夹
        path: resolve(__dirname, 'dist'),
        //定义文件名字，如果是build的话还会跟张哈希值
        filename: options.dev ? '[name].js' : '[name].js?[chunkhash]',
        chunkFilename: '[id].js?[chunkhash]',
        //定义路径
        publicPath: options.dev ? '/assets/' : publicPath
      },

      //7.定义loader
      module: {
          rules: [{
              test: /\.vue$/,
              use: ['vue-loader']
            },
            {
              test: /\.js$/,
              use: ['babel-loader'],
              exclude: /node_modules/
            },
            {
              test: /\.css$/,
              //8.postcss-loader可以通过postcss.config.css查看到其引用了autoprefixer的插件来完成 ：“根据不同浏览器自动加上不同前缀”
              use: ['style-loader', 'css-loader', 'postcss-loader']
            },
            {
              test: /\.(png|jpg|jpeg|gif|eot|ttf|woff|woff2|svg|svgz)(\?.+)?$/,
              use: [{
                //9.通过url-loader 会使图片转换为base64编码进行显示，而不用显示其具体路径！
                loader: 'url-loader',
                options: {
                  limit: 10000
                }
              }]
            }
          ]
      },
      plugins: [
      new webpack.optimize.CommonsChunkPlugin({
        names: ['vendor', 'manifest']
      }),
      new HtmlWebpackPlugin({
        template: 'src/index.html'
      })
      ],
      resolve: {
      alias: {
        '~': resolve(__dirname, 'src')
      }
      },
      devServer: {
      host: '127.0.0.1',
      port: 8010,
      proxy: {
        '/api/': {
          target: 'http://127.0.0.1:8080',
          changeOrigin: true,
          pathRewrite: {
            '^/api': ''
          }
        }
      },
      historyApiFallback: {
        index: url.parse(options.dev ? '/assets/' : publicPath).pathname
      }
      },
      devtool: options.dev ? '#eval-source-map' : '#source-map'
  })

然后postcss.config.css

//引用了autoprefixer的插件来完成 ：“根据不同浏览器自动加上不同前缀”
module.exports = {
  plugins: [
    require('autoprefixer')()
  ]
}

组建使用

参照官网的组建介绍，直接在Vue.app的<template>模块使用即可。