vue学习路线（2.初识vue，第一个“Hello2025”小案例）1.vscode如何启动单个页面； 2.Vue De

Hello2025小案例：

背景：初识vue，第一个“Hello2025”小案例

一、准备

1.安装 Live Server 扩展，它可以快速启动一个本地开发服务器（默认端口 5500），并实现 HTML/CSS/JavaScript 的实时刷新。

Vue Devtools的下载和安装

我是参考的这篇文章，Vue Devtools是一款专为Vue.js设计的调试工具，可以帮助我们监控和管理Vue应用的状态、事件和性能。

3.准备favicon.ico（网站图标）

二、案例实践

1.引入vue.js, 在页面执行Open with Live Server运行页面（需要安装Live Server插件，详见准备），效果如下：

可以看到代码已经运行起来了，但是有报错信息：

报错1： Download the Vue Devtools extension for a better development experience: github.com/vuejs/vue-d…

解决方法：需要下载Vue Devtools扩展，详见准备

报错2： You are running Vue in development mode. Make sure to turn on production mode when deploying for production. See more tips at vuejs.org/guide/deplo…

解决方法：解决方法有两个，方法1不一定总是会生效，这时候可以试一下方法2

方法1：在html文件中设置Vue.config.productionTip = false

<script type="text/javascript">
    Vue.config.productionTip = false //设置为 false 以阻止 vue 在启动时生成生产提示。
</script>

方法2：直接去vue.js里面改productuonTip的配置，将true改为false

报错3： GET http://127.0.0.1:5500/favicon.ico 404 (Not Found)

解决方法：这个问题需要硬刷新才出现，普通刷新错误会消失，解决方法是增加网站图标

解决后效果如下：

2.项目运行起来了，尝试写一个vue例子，原理及代码如下：

1.想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象；

2.root容器里的代码依然符合html规范，只不过加入了一些特殊的Vue语法；

3.root容器里的代码被称为【Vue模板】；

4.Vue实例和容器是一一对应的；

5.真实开发中只有一个Vue实例，且会配合着组件一起使用；

6.{{xxx}}中的xxx要写成js表达式，且xxx可以自动读取到data中的所有属性；

7.一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新；

注意区分：js表达式和js代码（语句）

1.表达式：一个表达式会生成一个值，可以放在任意一个需要值的地方

1）a

2）a+b

3）demo(1)

4）x==y?'a':'b'

2.js代码（语句）

1）if

2）for

完整代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Hello2025小案例</title>
    <!-- 引入开发版vue -->
    <script src="../js/vue.js"></script>
  </head>

  <body>
    <!-- 准备好一个容器 -->
    <div id="root">
      <h1>Hello {{year}}</h1>
    </div>
    <script type="text/javascript">
      Vue.config.productionTip = false; //设置为 false 以阻止 vue 在启动时生成生产提示。
      //创建vue实例
      const vm = new Vue({
        el: "#root", //el用于指定当前vue实例为哪个容器服务，值通常为css选择器字符串，也可以写成  el:document.getElementById('root')
        data: {
          //data中用于存储数据，数据供el所指定的容器中去使用，值我们先暂时写成一个对象
          year: 2025,
        },
      });
    </script>
  </body>
</html>