webpack1.x + ElementUI 初探

前言

ElementUI 目前版本是1.1，虽然还在1.x阶段，但是组件种类已经很丰富了，用来ElementUI 做管理页面，非常合适。本文介绍在真正开始使用ElementUI 之前的准备工作，适合第一次使用webpack打包工具和想体验 ElementUI 的小白同学。

1. 安装Vue2.0

注意：

1. 保证npm版本是3.10.x 及以上，想省事的话就重新安装 nodejs 6.x 的版本

2. 请事先配置国内npm镜像，以免安装失败，配置方法：
   修改 ~/.npmrc 文件如下（ Windows用户最好用gitbash进行编辑 ）

registry=https://registry.npm.taobao.org
chromedriver_cdnurl=https://npm.taobao.org/mirrors/chromedriver
phantomjs_cdnurl=https://npm.taobao.org/dist/phantomjs

准备工作做好了之后 进行如下步骤

npm install vue-cli -g  #安装脚手架 
vue init webpack my-vue #安装 webpack 模板，my-vue 是项目名，自己定义 此命令会提示让你确认设置，一路回车就好了 
cd my-vue #进入工程目录
npm install #安装依赖

vue init 会自动生成 npm 项目，并帮你写好 package.json

通过查看package.json 可以查看项目依赖版本

"dependencies": {
  "vue": "^2.1.0"
},
"devDependencies": {
  "autoprefixer": "^6.4.0",
  "babel-core": "^6.0.0",
  "babel-eslint": "^7.0.0",
  "babel-loader": "^6.0.0",
  "babel-plugin-transform-runtime": "^6.0.0",
  "babel-preset-es2015": "^6.0.0",
  "babel-preset-stage-2": "^6.0.0",
  "babel-register": "^6.0.0",
  "chai": "^3.5.0",
  "chalk": "^1.1.3",
  "chromedriver": "^2.21.2",
  "connect-history-api-fallback": "^1.1.0",
  "cross-spawn": "^4.0.2",
  "css-loader": "^0.25.0",
  "element-ui": "^1.0.7",
  "eslint": "^3.7.1",
  "eslint-config-standard": "^6.1.0",
  "eslint-friendly-formatter": "^2.0.5",
  "eslint-loader": "^1.5.0",
  "eslint-plugin-html": "^1.3.0",
  "eslint-plugin-promise": "^3.4.0",
  "eslint-plugin-standard": "^2.0.1",
  "eventsource-polyfill": "^0.9.6",
  "express": "^4.13.3",
  "extract-text-webpack-plugin": "^1.0.1",
  "file-loader": "^0.9.0",
  "function-bind": "^1.0.2",
  "html-webpack-plugin": "^2.8.1",
  "http-proxy-middleware": "^0.17.2",
  "inject-loader": "^2.0.1",
  "isparta-loader": "^2.0.0",
  "json-loader": "^0.5.4",
  "karma": "^1.3.0",
  "karma-coverage": "^1.1.1",
  "karma-mocha": "^1.2.0",
  "karma-phantomjs-launcher": "^1.0.0",
  "karma-sinon-chai": "^1.2.0",
  "karma-sourcemap-loader": "^0.3.7",
  "karma-spec-reporter": "0.0.26",
  "karma-webpack": "^1.7.0",
  "lolex": "^1.4.0",
  "mocha": "^3.1.0",
  "nightwatch": "^0.9.8",
  "node-sass": "^4.0.0",
  "opn": "^4.0.2",
  "ora": "^0.3.0",
  "phantomjs-prebuilt": "^2.1.3",
  "postcss-loader": "^1.2.1",
  "sass-loader": "^4.1.0",
  "selenium-server": "2.53.1",
  "semver": "^5.3.0",
  "shelljs": "^0.7.4",
  "sinon": "^1.17.3",
  "sinon-chai": "^2.8.0",
  "url-loader": "^0.5.7",
  "vue-loader": "^10.0.0",
  "vue-style-loader": "^1.0.0",
  "vue-template-compiler": "^2.1.0",
  "webpack": "^1.13.2",
  "webpack-dev-middleware": "^1.8.3",
  "webpack-hot-middleware": "^2.12.2",
  "webpack-merge": "^0.14.1"
}

注意：

如果你发现你的 webpack 版本是 2.x

那么你之前应该用了 vue init webpack-simple my-vue 命令

本篇文章就不再实用了

你可以使用 vue list 查看每种模板的描述，然后重新安装模板

执行下面的命令，稍等片刻，如果你看到了一个V字LOGO那么Vue2.0就已经准备妥当了。

npm run dev

2. 安装 ElementUI

npm install element-ui --save-dev

官方网站链接 http://element.eleme.io/#/zh-...

默认主题的样式文件挺大的，压缩后 110K 左右

所以官方文档中推荐了一个按需加载的 babel 插件，在引用指定组件的同时，还能够把组件相应的 css 文件 import 进来

官方文档的示例配置都是基于 webpack2.0 的，webpack1.x 的配置如下

{
  "presets": ["es2015", "stage-2"],
  "plugins": ["transform-runtime",
    ["component", [
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-default"
      }
    ]]
  ],
  "comments": false
}

CSS 文件增加前缀

比较坑的是，这些组件的 css 的浏览器兼容性并不好，所以需要通过 autoprefixer 加工一下

找到 build/webpack.base.conf 文件

将 vue 下的 postcss项，提到外面，并设置兼容更低的浏览器版本

  ...
  postcss: [
    require('autoprefixer')({
      browsers: ["Chrome >= 1","Safari >= 1","Firefox >= 1","ie >= 8"] // 粗暴一点
    })
  ],
  vue: {
    loaders: utils.cssLoaders({ sourceMap: useCssSourceMap })
  }
  ...

找到 build/utils.js 文件的 cssLoaders 方法

给使用到的文件类型 加一个 postcss 加载器，如果没有就不要加

  ...
  return {
    css: generateLoaders(['css','postcss']), // 项目中使用到的文件匹配规则 多加一个 postcss 加载器
    less: generateLoaders(['css', 'less']),
    sass: generateLoaders(['css', 'sass', 'postcss']),// 项目中如果使用到了 sass 多加一个 postcss 加载器
    scss: generateLoaders(['css', 'sass', 'postcss']),// 项目中如果使用到了 scss 多加一个 postcss 加载器
    stylus: generateLoaders(['css', 'stylus']),
    styl: generateLoaders(['css', 'stylus'])
  }

保存之后，使用命令安装这些加载器，项目初始化时并没有安装，需要手动执行

npm install postcss-loader --save-dev
npm install sass-loader --save-dev

CSS 文件分离

引入的组件css文件会打包到 js 文件中，并在执行js时动态加载到 <head> 标签内，产生很多内联样式标签<style>

无论是从文件缓存，还是结构洁癖的角度来看，把CSS代码打包到js中，是件很不舒服的事

按理来说这是webpack 的锅，但是可能会影响到初学者对ElementUI的第一印象

我们可以通过修改 webpack 配置把 ElementUI 的 css ( commonCSS )，和自己写的模块的 css ( appCSS ) 分离开，并用外部文件引用的方式加载

还是 build/utils.js 文件的 cssLoaders 方法，做如下修改

...
if (options.extract) {  // 是否分离文件
  if(options.ExtractPlugin){ // 如果指定了分离插件，就使用插件处理
    return options.ExtractPlugin.extract('vue-style-loader', sourceLoader)
  }else{
    return ExtractTextPlugin.extract('vue-style-loader', sourceLoader)
  }
} else {
  return ['vue-style-loader', sourceLoader].join('!')
}
...

还是 build/webpack.base.conf.js 文件

...
let appCSS = new ExtractTextPlugin('css/app.css'); // vue中的css 会被打包到 app.css 中
...
  vue: {
    loaders: utils.cssLoaders({ extract:true, sourceMap: useCssSourceMap ,ExtractPlugin:appCSS })
  },
  plugins: [
    appCSS, // 设置插件
  ]

修改 build/webpack.dev.conf.js 文件 如下

...
let commonCSS = new ExtractTextPlugin('css/common.css'); //将另外引入的css文件打包到common.css中
...
module: {
  loaders: utils.styleLoaders({ extract:true, sourceMap: config.dev.cssSourceMap,ExtractPlugin:commonCSS })
},
...
plugins: [
  commonCSS,  //设置插件
  ...
]

这样一来，资源的分类和打包看起来就合理多了，准备工作做完了，可以开心的写代码了。

---

本文系力谱宿云LeapCloud旗下MaxLeap团队_UX组成员：王诗诗【原创】
MaxLeap技术博客首发：https://blog.maxleap.cn/archi...

相关文章
5个提高Node.js应用性能的技巧
前端，想说爱你不容易！
浏览器存储及使用

作者往期佳作
多屏互动——H5中级进阶
无需Flash实现图片裁剪——HTML5中级进阶

欢迎关注微信公众号：MaxLeap_yidongyanfa