vue系列教程-01第一个vue程序

第一个vue程序

本内容为系列内容，全部内容请看我的vue教程分类

首先是常见的使用方式

直接引入，就是我们常规的通过script标签引入完整版vue文件
webpack自定义打包，这个打包的意思就好比是你家里买了很多家具，你直接全部乱放也能正常使用，但是肯定不科学，所以要放置到指定的位置，这个过程就相当于是打包，后面会详细讲到
vue-cli脚手架，这个也是通过webpack进行打包，不过打包的规则都是它定义好了，我们直接用就可以了非常方便

首先浏览器安装dev-tools插件

查看教程

初始化程序

基础部分我们会使用直接引入的方式使用vuejs，

如果你使用的是hbuilder工具的话可以直接创建vue程序，它会自动引入vue文件

vue教程-lookroot

如果你使用的是其他工具的话，可以下载vue完整文件然后手动引入

vue教程-lookroot

或者使用cdn的方式引入

<script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>

这里我们新建一个index.html页面文件，引入vuejs文件

首先在body中添加一个盒子，作为挂载点（容器），意思就是把vue程序挂载在这个地方，比如前面我们提到的家具放到房子里面，这个房子就是挂载点

<body>
    <div id="app"></div>
</body>

然后实例化一个vue，传入一个对象

<script>
    let vm = new Vue({
        //挂载到刚刚我们准备的容器上面 这里等同于el: document.getElementById('app'), 
        //其实就是一个dom选择
        el:'#app',
        //el: document.getElementById('app'),
        //生命周期 类似于 jquery 的$.ready()
        created() {
            console.log('hello world');
        },
    })
</script>

现在我们可以直接在浏览器中打开项目了，但是还记得刚刚我们安装的 dev-tools吗，如果直接运行时无法触发它的，

当前情况下（未使用webpack打包）我们有两种方式触发它

使用hbuilder运行到浏览器

vue教程-lookroot

使用vscode就需要安装插件live server

vue教程-lookroot

然后点击 open with live server

vue教程-lookroot

这样的话就能触发刚刚的插件了，我们来到浏览器，按f12首先看控制台，这里执行了刚刚的打印方法，并且这个 vue-devtools 也开启了；

vue教程-lookroot

然后我们点击这个控制台的 vue 选项，这就打开了插件界面，具体怎么使用，后面再讲

vue教程-lookroot

到这里你就完成了第一个vue程序的开发