使用cdn(script)使用vue和element-ui

使用cdn(script)使用vue和element-ui

在开发静态页面时，起一个服务方式很麻烦，也不能直接运行。就只想快速、简介、方便运行的开发一个页面，调用后端接口，展示数据。想着vue的双向数据绑定很好用，对毫无样式可言的原生html又还是有点看不上，样式还是有一定要求，因此选用了element-ui。

安装

按照vue和element-ui的官网开发指南中提供的cdn安装方式，直接以script方式引入

使用

跟官网上教程都一样直接使用即可：

new Vue({
  el: '#app',
  data: {},
  methods:{}
})

element-ui的标签也可以直接按官网上一样使用 

<el-table :data="tableData" style="width: 100%">
      <el-table-column prop="date" label="日期" width="180"></el-table-column>
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
</el-table>

但是再类似Message的组件，需要引用element的类库就会报错：

TypeError: this.$message is not a function at Object.success (index.html:81)

这时候就需要用以下方式调用message方法：

ELEMENT.Message({
  message: '查询音乐列表成功',
  type: 'success'
});

可以看到ELEMENT可以识别到element-ui对象。Message方法调用成功