registry=https://registry.npm.taobao.org chromedriver_cdnurl=https://npm.taobao.org/mirrors/chromedriver phantomjs_cdnurl=https://npm.taobao.org/dist/phantomjs
准备工作做好了之后 进行如下步骤
npminstallvue-cli -g #安装脚手架 vueinitwebpackmy-vue #安装 webpack 模板,my-vue 是项目名,自己定义 此命令会提示让你确认设置,一路回车就好了 cdmy-vue #进入工程目录 npminstall #安装依赖
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就已经准备妥当了。
npmrundev
npminstallelement-ui --save-dev
官方网站链接 http://element.eleme.io/#/zh-CN/component/installation
默认主题的样式文件挺大的,压缩后 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 的浏览器兼容性并不好,所以需要通过 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']) }
保存之后,使用命令安装这些加载器,项目初始化时并没有安装,需要手动执行
npminstallpostcss-loader --save-dev npminstallsass-loader --save-dev
引入的组件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 文件
... letappCSS = 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 文件 如下
... letcommonCSS = new ExtractTextPlugin('css/common.css'); //将另外引入的css文件打包到common.css中 ... module: { loaders: utils.styleLoaders({ extract:true, sourceMap: config.dev.cssSourceMap,ExtractPlugin:commonCSS }) }, ... plugins: [ commonCSS, //设置插件 ... ]
这样一来,资源的分类和打包看起来就合理多了,准备工作做完了,可以开心的写代码了。