美文网首页
Vue引入elementUI和less

Vue引入elementUI和less

作者: 圈圈猫 | 来源:发表于2019-01-12 15:20 被阅读24次

    vue新手入门学习,经常会看到别人代码中用到的控件,但是前端后端和移动端的都不太一样,就算是知道一点在如此告诉发展框架的时候也是一头雾水啊,对于我刚入门vue来说,今天突然看到github上有大神的代码使用了element-ui,其实一开始我还以为模板里的全都是html控件的。

    于是就新建一个工程,然后开始使用这玩意,但是在webstore一直没有提示还带有警告。好尴尬,折腾了好久才知道需要安装element模块

    1、在工程下的package.json中查看,直接搜素element会看到是否安装该模块。
    2、没有安装在项目中打开命令行输入回车:
    npm install element-ui --save
    
    3、下载完模块以后我们需要引入到我们的项目中,切换到src下的main.js引入
    import ElementUI from 'element-ui'
    import 'element-ui/lib/theme-chalk/index.css'
    Vue.use(ElementUI);
    
    4、在webstore上的helloworld.vue的template模板下试试,是不是提示了呢?

    上面的问题解决以后,突然发现停留在大学的html+css写东西已经不适合现在了,应该说满足不了我们了,对于前端来说有时候控件的渲染靠css,但是假设两个控件是差不多但又不一样,在传统的css要写两遍甚至更多次,css-loader能帮我解决这样问题。

    1、打开命令行输入

    npm install --save-dev css-loader
    

    2、在src下新建一个style文件夹新建一个test.less文件,在内部书写随便书写一段代码,测试,假设我这边去处理宽高。

    //宽高
    .wh(@width, @height){
      width: @width;
      height: @height;
    }
    

    3、在helloworld.vue的style中引入

    <style lang="less" scoped>
      @import "../style/test";
      .login_page{
          .wh(320px, 210px);
      }
    </style>
    

    是不是觉得方便了很多,写一行代码就搞定了,以前宽高的写两行。好了完工,收工。。。新手记录求大神指导

    相关文章

      网友评论

          本文标题:Vue引入elementUI和less

          本文链接:https://www.haomeiwen.com/subject/wiqcdqtx.html