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

第一个vue程序

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

  • 我的个人博客
  • 本节仓库地址
  • 视频教程地址

首先是常见的使用方式

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

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

查看教程

初始化程序

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

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

vue系列教程-01第一个vue程序_第1张图片

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

vue教程-lookroot

或者使用cdn的方式引入


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

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


    

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


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

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

  • 使用hbuilder运行到浏览器

vue系列教程-01第一个vue程序_第2张图片

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

    vue教程-lookroot

然后点击 open with live server

vue系列教程-01第一个vue程序_第3张图片

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

vue系列教程-01第一个vue程序_第4张图片

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

vue系列教程-01第一个vue程序_第5张图片

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

你可能感兴趣的:(vue系列教程-01第一个vue程序)