美文网首页
elementUi的引入

elementUi的引入

作者: 绿啊绿啊绿刺猬 | 来源:发表于2019-07-07 16:17 被阅读0次

    1.输入命令安装element:
    widows下:

    npm i element-ui -S
    

    mac下:

    sudo cnpm install element-ui@next -S
    

    2.在main.js(在src文件夹下面)里加上这段:

    import Element from 'element-ui'
    import 'element-ui/lib/theme-chalk/index.css'
    Vue.use(Element)
    

    app.js变成这样:


    image.png

    3.安装完成,可以复制element官网(https://element.eleme.cn/#/zh-CN/component/breadcrumb
    )里的一段代码来试试了:

    image.png
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item>
      <el-breadcrumb-item>活动列表</el-breadcrumb-item>
      <el-breadcrumb-item>活动详情</el-breadcrumb-item>
    </el-breadcrumb>
    

    在components文件夹下新建一个test.vue文件,
    4.在App.vue里引入刚刚新建的test组件:


    image.png
    <template>
      <div id="app">
            <test></test>
        <img src="./assets/logo.png">
        <router-view/>
      </div>
    </template>
    
    <script>
        import test from './components/test.vue'
    export default {
      name: 'App',
        components:{
            test
        }
    }
    </script>
    

    结果:


    loaclhost

    说明element引入成功。
    可以进入开发阶段啦。

    相关文章

      网友评论

          本文标题:elementUi的引入

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