在Vue项目中使用ElementUI（一）

初始化一个Vue项目F:\Test>vueinitwebpackTest1?项目名称test1？项目描述Vue.js项目？作者Selience<********@qq.com>？Vue独立构建？安装vue路由器？不？使用ESLint来检查你的代码？不？设置单元测试否？使用Nightwatch设置端到端测试？不？我们应该在项目创建后为您运行`npminstall`吗？（推荐）npmvue-cli生成“Test1”。ReleaseNotesvue:^2.5.2webpack:^3.6.0,启动Vue项目cdTest1npmrundevdownloadElementUInpminstall--saveelement-ui按需导入ElementUI有时项目中只会用到ElementUI中的几个组件，而且全局导入会增加项目量，所以按需导入比较合适importandregistercomponentsinmain.jsimportVuefrom'vue';//导入按钮组件（Button）和下拉选择器组件（Select）import{Button,Select}from'element-ui';importAppfrom'./App.vue';//注意：样式文件需要单独导入import'element-ui/lib/theme-chalk/index.css';//将导入的组件注册为全局Vue组件Vue.component(Button.name,Button);Vue.component(Select.name,Select);/*或者写成*Vue.use(Button)*Vue.use(Select)*/newVue({el:'#app'，渲染：h=>h(App)});上面使用，我们已经将Elementui组件注册为Vue组件，我们就可以在Vue页面中使用该组件了。不过需要注意的是，样式文件是需要单独导入的，上面已经介绍了样式文件，我们在Vue页面中使用吧！在app.vue中，按照官网的例子使用button组件其他组件和上面的导入方式基本类似，但也有区别，官网也有介绍，大部分组件从“Importedbyelement-ui”导入{XXXX}，然后注册到Vue.component(XXX.name,XXX);或者Vue.use(XXX)，当然也有例外，例如：Message消息提示组件是在main.js中引入的import{Message}from'element-ui是在main.js中注册的，这里是Vue.prototype.$message=挂在Vue原型上的消息；使用例如：MessageBox系列弹框这一系列弹窗都依赖于MessageBox组件在main.js中引入import{MessageBox}from'element-ui'并在main中注册.js，这里是挂在Vue原型上的Vue.prototype.$msgbox=MessageBox;Vue.prototype.$alert=MessageBox.alert;Vue.prototype.$confirm=MessageBox.confirm;Vue.prototype.$prompt=MessageBox.prompt;消息提示框——会在用户执行操作时触发，对话框打断用户的操作，ClickBtn只有在用户确认后才能关闭：function(){this.$alert('这是一段内容','titlename',{confirmButtonText:'OK',//点击确定后的回调函数callback:action=>{}});}Confirmationmessagepopup--该对话框用于提示用户确认他们已经触发的动作，并询问是否这样做。.clickBtn:function(){this.$confirm('这是用户提示','这是标题',{//确认按钮文字confirmButtonText:'OK',//取消按钮文字cancelButtonText:'Cancel',//弹框类型(success,error,info)type:'warning'})//点击OK后的回调函数.then(()=>{})//点击Cancel后的回调函数.catch(()=>{});}提交内容弹出框--当用户执行操作时触发，打断用户操作，提示用户进入对话框clickBtn:function(){this.$prompt('prompt','title',{confirmButtonText:'OK',cancelButtonText:'Cancel',})//确认回调函数.then(()=>{})//取消回调函数.catch(()=>{});}popup--可以定制和配置不同的内容。clickBtn:function(){this.$msgbox({title:'title',message:'提示信息',//弹框类型type:'error',//是否在右上角显示关闭按钮showCancelButton:true,confirmButtonText:'OK',cancelButtonText:'Cancel',//关闭弹窗前的回调函数beforeClose:(action,instance,done)=>{}})//确认回调函数.then(action=>{});}当然上面的导航都是比较简单的例子。还有HTML片段作为弹出内容。还有像周期函数这样的属性和方法。更多使用方法请参考ElementUI官网注2019.07.20更新：之前按需介绍elementui的时候，没注意到官网上的介绍。虽然我漏掉了上面的部分，也没有使用babel-plugin-component插件，但是按需引入的组件也可以正常使用。这让我很郁闷。是因为这个吗？是3.0的吗？但是我把官网文档调到2.0版本了，还是这样引入，emmmmmmm...，然后我想，既然按需引入是为了减小体积，那会不会是这个babel-plugin-component就是在打包的时候按需打包引入的组件的资源。使用npmrundev看不到效果。因此，我试验了不使用babel-plugin-component插件打包，使用babel-plugin-component插件打包首先下载babel-plugin-component插件npminstallbabel-plugin-component--devconfiguration.babelrc文件，这里注意不要直接复制官网的配置覆盖原来的配置，正确的做法是把官网的配置添加到原来的配置中，配置完记得重启项目{"presets":[[“环境”，{“莫dules":false,"targets":{"browsers":[">1%","last2versions","notie<=8"]}}],"stage-2"],"plugins":["transform-vue-jsx","transform-runtime",//添加以下部分["component",{"libraryName":"element-ui","styleLibraryName":"theme-chalk"}]]}Package可以看到大小差异还是很大的，当我们在项目中用到很多ElementUI组件的时候，可以全局导入，方便简单，在main.js中添加如下代码全局导入//importelementuiimportElementUIfrom'element-ui'//样式需要单独导入import'element-ui/lib/theme-chalk/index.css'//挂载Vue.use(ElementUI)在app中使用.vue与按需比较导入，全局导入方便多了