<template>
  <div>
    <h1 class="h1title" >
      {{titles[0].title}}
    </h1>
    <div class="code">
      <p>//webstrom命令行 输入如下内容</p>
      <p>npm i element-ui -S</p>

    </div>
    <h1 class="h1title">
      {{titles[1].title}}
    </h1>
    <div class="code">
      <p>// 完整引入 Element</p>
      <p>// src/main.js 里面 加入 如下</p>
      <p>import ElementUI from 'element-ui'</p>
      <p>import 'element-ui/lib/theme-chalk/index.css'</p>
      <p>Vue.use(ElementUI)</p>
    </div>

    <h1 class="h1title">
    {{titles[2].title}}
    </h1>
    <div class="code">
    <a :href="getURL(url)" target="_blank" rel="noopener noreferrer">{{url}}</a>
    </div>
  </div>

</template>

<script>
    export default {
        name: "element-ui",
      components: {
      },
      data(){
          return{
            titles : [
              {
                title : '梦开始的地方'
              },
              {
                title : '进一步配置'
              },
              {
                title : '相关资料'
              }
            ],
            url : 'https://element.eleme.cn/2.0/#/zh-CN/component/layout'
          }
      },
      methods:{
        getURL(url){
          let strURL = "";
          if(url.substr(0,7).toLowerCase() == "http://" || url.substr(0,8).toLowerCase() == "https://"){
            strURL = url;
          }else{
            strURL = "http://" + url;
          }
          return strURL;
        }
      }
    }
</script>

<style scoped>
</style>
