前言ElementUI目前是1.1版本。虽然还是1.x阶段，但是组件的种类已经很丰富了。非常适合用ElementUI作为管理页面。本文介绍实际使用ElementUI前的准备工作，适合初次使用webpack打包工具，想体验ElementUI的初学者。1、安装Vue2.0注意：确保npm版本为3.10.x或以上。如果想省事，重新安装nodejs6.x版本。请提前配置好国内的npm镜像，以免安装失败。配置方法：修改~/.npmrc文件如下（Windows用户要用gitbash编辑）://npm.taobao.org/dist/phantomjs准备工作做好后，进行如下操作npminstallvue-cli-g#安装脚手架vueinitwebpackmy-vue#安装webpack模板，my-vue为项目名，如果你自己定义这个命令，会提示你确认设置，一路回车就行cdmy-vue#进入项目目录npminstall#安装依赖vueinit会自动生成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”，“业力”：“^1.3.0”，“业力覆盖”：“^1.1.1”，“业力摩卡”：“^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，那你之前应该用过vueinitwebpack-simplemy-vue命令，本文不再实用，可以使用vuelist来查看每个模板的描述，然后重新安装模板执行以下命令，稍等片刻，如果看到一个VLOGO，则说明Vue2.0已经准备好了npm运行dev2。安装ElementUInpminstallelement-ui--save-dev官网链接http://element.eleme.io/#/zh-...默认主题的样式文件比较大，压缩后110K左右，所以官方文档推荐了一个按需加载的babel插件。在引用指定组件的同时，还可以导入该组件对应的css文件。官方文档中的示例配置都是基于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']),//添加项目中使用的更多文件匹配规则Apostcssloaderless:generateLoaders(['css','less']),sass:generateLoaders(['css','sass','postcss']),//如果项目中使用了sass，添加一个postcssloaderscss:generateLoaders(['css','sass','postcss']),//如果项目中使用了scss，添加一个postcssloaderstylus:generateLoaders(['css','stylus']),styl:generateLoaders(['css','stylus'])}保存后，使用命令安装这些加载器。项目初始化时未安装它们。需要手动执行npminstallpostcss-loader--save-devnpminstallsass-loader--save-devCSS文件分离导入的组件css文件会打包到js文件中，js时动态加载到
标签中被执行，导致很多内联样式标签