vue安装element-ui和px2rem的细节


1、按需引入element-ui


vue脚手架搭建完成之后,可以到element-ui官网进行npm 安装:

npm i element-ui -S

如果是完整引入可以按照官网一步一步做即可完成;这里是按需引入,借助 babel-plugin-component,我们可以只引入需要的组件,以达到减小项目体积的目的。

首先,安装babel-plugin-component:

npm install babel-plugin-component -D

然后,需要将项目里的.babelrc修改为:

{ "presets": [ ["env", { "modules": false, "targets": { "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] } }], "stage-2" ], "plugins": ["transform-vue-jsx", "transform-runtime", [ "component", { "libraryName": "element-ui", "styleLibraryName": "theme-chalk" } ] ] }

将这个复制粘贴到你的项目里即可,跟官网修改的有点区别,我去掉了“es2015”,我之前安装了这个会一直报错。

接下来,我们只要引入我们需要的组件,比如Button,那么需要在main.js中写入以下内容:

import { Button,Select } from 'element-ui'
Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
/* 或写为 * Vue.use(Button) */
/*Vue.use(Select)*/

本人更喜欢写成Vue.use(Button),注意,部分组件需要这样引入:

import {Message} from 'element-ui'
Vue.prototype.$message = Message;

message组件是用事件来展示效果。

以上就是安装按需element-ui的过程和细节啦。


2、安装px2rem


首先,安装:

npm install px2rem-loader  lib-flexible --save

然后在main.js中引入

import 'lib-flexible/flexible.js'

在build中utils.js添加以下代码:

const px2remLoader = {
 
  loader: 'px2rem-loader',
 
  options: {
 
    remUnit:37.5
 
  }
 
}

// generate loader string to be used with extract text plugin
 
  function generateLoaders (loader, loaderOptions) {
 
  const loaders = options.usePostCSS ? [cssLoader, postcssLoader,px2remLoader] : [cssLoader,px2remLoader]
 
  if (loader) {
 
    loaders.push({
 
      loader: loader + '-loader',
 
      options: Object.assign({}, loaderOptions, {
 
        sourceMap: options.sourceMap
 
      })
 
    })
 
  }

重启项目后,就可以看到px变成rem啦~

 

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM