在vue上安装和使用elementui教程（附碰到的诸多问题的解决方案）

在vue上安装和使用elementui教程（附碰到的诸多问题的解决方案）

首先我是按照这个教程https://segmentfault.com/a/1190000019647625安装了elementui，然后在下载和使用的时候出现了问题。

后续问题的解决方案可以依次参考：

1. https://blog.csdn.net/u014054437/article/details/79862793
2. https://blog.csdn.net/weixin_42512937/article/details/103475319
3. https://www.jianshu.com/p/32a5edadc29d

第1个和第2个链接方法好像是类似的，可以试完第1个链接的方法之后如果有用就不用试第2个了，第3个链接最好还是看一下。

我在解决问题的过程中还看到了这个教程https://blog.csdn.net/weixin_41662207/article/details/90258577，然后我就把我的两个scrip改为了一个，发现还是报错，之后我还是改回了两个，发现是可以的。

另外说明一下，根据elementui的中文文档代码：

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.13.2/lib/index.js"></script>
<div id="app">
<el-row>
  <el-button>默认按钮</el-button>
  <el-button type="primary">主要按钮</el-button>
  <el-button type="success">成功按钮</el-button>
  <el-button type="info">信息按钮</el-button>
  <el-button type="warning">警告按钮</el-button>
  <el-button type="danger">危险按钮</el-button>
</el-row>
</div>

这里的script是在线引用，而我是需要离线引用，所以需要改一下script的描述，我的script代码如下：

<script src="element-ui/lib/index.js">
</script>
<script>
  export default {
    name : "app",
  }
</script>

全文代码：

<template>
  <div id= "app">
    <el-row>
  <el-button>默认按钮</el-button>
  <el-button type="primary">主要按钮</el-button>
  <el-button type="success">成功按钮</el-button>
  <el-button type="info">信息按钮</el-button>
  <el-button type="warning">警告按钮</el-button>
  <el-button type="danger">危险按钮</el-button>
</el-row>

  </div>


</template>

<script src="element-ui/lib/index.js">
</script>
<script>
  export default {
    name : "app",
  }
</script>

然后就能正常运行使用了（npm run dev）。