VueStu02-创建一个Vue实例

一、核心步骤

1.准备容器

        准备一个盒子div。 

2.引包

        从官网引包，有开发版本和生产版本之分。 

3.创建Vue实例

        创建一个Vue实例，new Vue()。

4.指定配置项 

        指定配置项，用于渲染数据 。

        el：指定挂载点。知道自己将来要管理的是哪一个容器/盒子。

        data：提供数据。容器里变量的具体数据从 data 这里获取。

二、实操 

 1.打开VSCode

        （1）新建一个.html文件。

        （2） 英文键按 ! 加 Tab 键/Enter键，快速生成 html 基本结构骨架

2.准备容器 div

 3.引包（从官网） 

        浏览器地址栏输入：v2.cn.vuejs.org ,回车进入 Vue2 官网。

        起步→安装→往下滑到#CDN→复制第一个代码（在线使用，也可以往上滑一个内容下载安装直接引入script使用。笔者这里学习就使用在线方式引包）

         将复制的代码粘贴到 div 标签后面。

4.创建实例 new Vue（） 

 5.指定配置项

 6.Alt+B打开浏览器查看效果

        需要事先安装打开浏览器的插件，没安装的先安装：VSCode下载安装教程+安装插件_vscode下载中文插件-CSDN博客

        安装好插件后，Alt+B打开浏览器查看效果：

         然而有些小伙伴可能会发现，浏览器没有跟代码同步，没有显示“Hello World!”，这里用的是360浏览器。

        所以通过实例告诉大家，学习的时候建议使用谷歌浏览器，就不会有这种问题。

       也可以通过安装live server插件的方式解决，这个插件是一个具有实时加载功能的小型服务器。

出现以下界面即安装成功：

后续还需要对这个插件进行一些配置，笔者不太懂这个配置，有需要的小伙伴可以自己去搜一下 ，或者直接看这篇写的挺不错的。

最后附上完整代码：

    
    
    


    
     

        
        {{ msg }}
    

    
    
    

    
    

至此就完成创建一个Vue实例了，若有错处欢迎评论区留言指正。