Html页面如何引基于入vue.js引用elementUI控件？

Html页面j基于vue.js引入elementUI控件

你好！ 这是我第一次在html页面里引入 Vue.js 。如果你想学习了解, 可以仔细阅读这篇文章，了解一下vue.js的基本语法知识。

引入vue,js

vue相信大家都不陌生，他是前端最主流框架之一，也是目前市场上运用最广泛的前端框架之一，今天我们主要讲解vue,js的用法而不是vue框架的讲解。

vue.js是什么

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

vue的安装

尝试 Vue.js 最简单的方法是使用 Hello World 例子。你可以在浏览器新标签页中打开它，跟着例子学习一些基础用法。或者你也可以创建一个 .html 文件，然后通过如下方式引入 Vue：

或者

安装教程给出了更多安装 Vue 的方式。请注意我们不推荐新手直接使用 vue-cli，尤其是在你还不熟悉基于 Node.js 的构建工具时。

如果你喜欢交互式的东西，你也可以查阅这个 Scrimba 上的系列教程，它揉合了录屏和代码试验田，并允许你随时暂停和播放。

声明式渲染

*Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：

  {
    { message }}

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

我们已经成功创建了第一个 Vue 应用！看起来这跟渲染一个字符串模板非常类似，但是 Vue 在背后做了大量工作。现在数据和 DOM 已经被建立了关联，所有东西都是响应式的。我们要怎么确认呢？打开你的浏览器的 JavaScript 控制台 (就在这个页面打开)，并修改 app.message 的值，你将看到上例相应地更新。

注意我们不再和 HTML 直接交互了。一个 Vue 应用会将其挂载到一个 DOM 元素上 (对于这个例子是 #app) 然后对其进行完全控制。那个 HTML 是我们的入口，但其余都会发生在新创建的 Vue 实例内部。

基于vue.js引入elementUI控件

引入 Element

引入css:

引入js:

引入你所需要的控件代码：
这里一定得是放在你得app dome里面

 var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!',
            Number: '',
            Name:'',
            drawer:false,
            direction:'rtl',
            currentPage4: 4,
            //表格数据
            tableData:[{
                number: '01',
                Number: 'B00000000000001',
                name:'青海建筑职业技术学院',
                abbreviation:'DT14256375',
                address:'青海省西宁市南川西路96号',
                personnel:'100',
                built:'123453.42',
                air:'123453.43',
                heating:'123453.42',
                operation:'编辑  删除'
            },{
                number: '01',
                Number: 'B00000000000001',
                name:'青海建筑职业技术学院',
                abbreviation:'DT14256375',
                address:'青海省西宁市南川西路96号',
                personnel:'100',
                built:'123453.42',
                air:'123453.43',
                heating:'123453.42',
                operation:'编辑  删除'
            }]
        },
        methods:{
            change(){
                console.error(this.Number)
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            }

        },

    });

至此，一个基于 Vue 和 Element 的开发环境已经搭建完毕，现在就可以编写代码了。各个组件的使用方法请参阅它们各自的文档。