在原生HTML文件中引入 vue.js（非单文件组件方式）

引入流程

1. 在head标签中通过script标签引入vue.js框架；

2. 在body标签中加上挂载到的节点；

3. 在body标签底部加上script标签，然后在script标签中初始化Vue实例对象；

           // 注册组件（需要在实例化 Vue 对象之前）
           Vue.component("todo-item", {
               // 父组件传值到子组件
               // 定义子组件接收数据的参数
               props: ['item'],
   
               // 定义自定义组件
               template: "
   {{ item }}
   ",
           });
   
           // 实例化 Vue
           var app = new Vue({
               // 指定挂载节点
               el: "#container",
               // 声明并初始化 Vue 实例的成员变量
               data: {
                   str: "hello, Vue.",
               },
               // 定义 Vue 实例的成员方法
               methods: {
                   click() {
                       console.log("我被点啦！！！");
                       this.str = "我被点啦！！！";
                   },
               },
   
               // 生命周期钩子函数
               beforeCreate() {
                   console.log("beforeCreate");
               },
   
               created() {
                   console.log("created");
               },
   
               beforeMount() {
                   console.log("beforeMount");
               },
   
               mounted() {
                   console.log("mounted");
               },
   
               beforeUpdate() {
                   console.log("beforeUpdate");
               },
   
               updated() {
                   console.log("updated");
               },
   
               beforeDestroy() {
                   console.log("beforeDestroy");
               },
   
               destroyed() {
                   console.log("destroyed");
               },
           });
   

怎么确定vue.js框架引入成功？

Download the Vue Devtools extension for a better development experience:
https://github.com/vuejs/vue-devtools

You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html

• 如果控制台输出上面内容，那么说明vue.js引入成功。