Vue 项目 引入第三方饿了吗组件(ElementUI)分析

符号 阅读:191 2021-03-31 21:14:53 评论:0

第一步:新建Vue 项目(详细创建步骤请参考:http://blog.csdn.net/zhouzhiwengang/article/details/70344522

 

#创建一个基于webpack模板的新项目 
vue init webpack d:\nodeworkspace\nodeone 
# 切换至项目路径 
cd d:\nodeworkspace\nodeone 
# 安装项目依赖文件 
cnpm install 
# 项目启动 
cnpm run dev 


第二步:引入饿了吗组件(ElementUI)

 

1、打开cmd 窗口,切换到vue 所在目录,执行如下指令: cnpm  i  element-ui  s

 

第三步:vue 项目引用ElementUI.,(注意红色字体部分)

src/router/index.js

 

import Vue from 'vue' 
import Router from 'vue-router' 
import Hello from '@/components/Hello' 
 
import ElementUI from 'element-ui' 
import 'element-ui/lib/theme-default/index.css' 
 
Vue.use(Router) 
Vue.use(ElementUI) 
 
export default new Router({ 
  routes: [ 
    { 
      path: '/', 
      name: 'Hello', 
      component: Hello 
    } 
  ] 
})


组件引用相关样式:src/components/Hello.vue

 

 

<template> 
  <div class="hello"> 
    <!-- 文本绑定--> 
    <h1>{
  { msg }}</h1> 
 
    <!--html 绑定--> 
    <div v-html="message"></div> 
    <h2>Essential Links</h2> 
    <ul> 
      <li><a href="https://vuejs.org" target="_blank">Core Docs</a></li> 
      <li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li> 
      <li><a href="https://gitter.im/vuejs/vue" target="_blank">Gitter Chat</a></li> 
      <li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li> 
      <br> 
      <li><a href="http://vuejs-templates.github.io/webpack/" target="_blank">Docs for This Template</a></li> 
    </ul> 
    <h2>Ecosystem</h2> 
    <ul> 
      <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li> 
      <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li> 
      <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li> 
      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li> 
    </ul> 
    <el-button type="primary">主要按钮</el-button> 
    <el-button type="text">文字按钮</el-button> 
  </div> 
</template> 
 
<script> 
export default { 
  name: 'hello', 
  data () { 
    return { 
      msg: '欢迎来到菜鸟教程', 
      message:'<p>欢迎来到菜鸟A大队</p>', 
    } 
  } 
} 
</script> 
 
<!-- Add "scoped" attribute to limit CSS to this component only --> 
<style scoped> 
h1, h2 { 
  font-weight: normal; 
} 
 
ul { 
  list-style-type: none; 
  padding: 0; 
} 
 
li { 
  display: inline-block; 
  margin: 0 10px; 
} 
 
a { 
  color: #42b983; 
} 
</style> 


效果展示:

 

声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

发表评论
搜索
排行榜
关注我们

一个IT知识分享的公众号