简单的认识 Vue(vue-cli安装、node安装、开发者工具)

港控/mmm° 2024-03-26 11:18 125阅读 0赞

#### Vue ####

*  1、Vue 与其他框架的对比及特点
 *   *  1.1 Vue.js 是什么
     *  1.2 作者
     *  1.3 作用
     *  1.4 Vue 与其他框架的对比
 *  2、安装 Vue 的方法
 *   *  2.1 CDN 引入
     *  2.2 脚手架工具
     *  2.3 vue 开发者工具安装
 *  3、创建第一个实例
 *  4、理解 Vue 的 MVVM 模式
 *  5、数据双向绑定
 *   *  5.1 感受响应式
 *  实验总结

--------------------

## 1、Vue 与其他框架的对比及特点 ##

> `官网`  
> 中文：https://cn.vuejs.org/  
> 英文：https://vuejs.org/

### 1.1 Vue.js 是什么 ###

> Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。<信息来源：Vue 官网>

### 1.2 作者 ###

> 尤雨溪毕业于上海复旦附中，在美国完成大学学业，本科毕业于 Colgate University，后在 Parsons 设计学院获得 Design & Technology 艺术硕士学位，任职于纽约 Google Creative Lab。<信息来源：百度百科>

### 1.3 作用 ###

> Vue.js 框架的作用主要注重动态的构建用户界面，前端工程化和模块化开发。

### 1.4 Vue 与其他框架的对比 ###

![在这里插入图片描述][69d518e281674dfa9b6bf5b47e297a63.png]

> Vue 是一个推陈出新的前端框架，吸收了很多前端框架的优点。例如，Vue 借鉴了 React 的组件化和虚拟 DOM ，借鉴了 Angular 的模块化和数据绑定。因此，我们以 Vue.js 作为入手，以后深入学习其他框架，你会发现他们的共通之处，更好地高效地学习。

> 选择 Vue.js 的更多原因是，就框架的 API 而言，对比之下，Vue 更加轻便简洁。Vue 自身拥有开箱即用的生态开发包（Vuex、Vue-Router）等，复杂性低、学习成本低，是一门比较好入门的前端框架。

## 2、安装 Vue 的方法 ##

### 2.1 CDN 引入 ###

> 不用下载到本地，即引即用,推荐 2 个较稳定的 cdn，以下任选其一

由于非会员用户无法访问外网，所以统一使用引用链接为 
    https://labfile.oss.aliyuncs.com/courses/1262/vue.min.js。

### 2.2 脚手架工具 ###

> 1、vue-cli 是基于 npm 的，所以应该先安装 node 环境，通过 node 官网：http://nodejs.cn/ 下载系统对应的 node 安装程序。  
> ![在这里插入图片描述][11950aa1c63447a190e5abf206024ea7.png]  
> `注意： NPM 是随同 Node.js 一起安装的包管理工具。因此当我们安装好 Node.js 的时候，也安装好了 NPM。`

> 2、node 安装完毕使用，npm 包管理工具安装 vue-cli。

npm i -g @vue/cli-init

> 3、命令行输入 vue，出现 Usage 表示安装成功。  
> ![在这里插入图片描述][cec02d3967d544e5bb8d4ba7fc54bd2c.png]

> 4、使用 vue create 命令来创建一个 Vue 项目。

vue create first-vue # 这里的 first-vue 项目名

![在这里插入图片描述][06125d40140247caa82bdaab3ec78db2.png]

> 5、完成配置后，使用以下命令将 Vue 项目运行起来。

cd first-vue
    npm run serve

![在这里插入图片描述][240f7e91239c438897719bb92aeb9b16.png]

> 6、成功执行命令行后，我们打开右侧的 Web 服务，即可访问项目的页面。  
> ![在这里插入图片描述][ec45e2b2a21942a3b47854dfd6313905.png]

### 2.3 vue 开发者工具安装 ###

`注意： 由于线上环境使用的是 Preview 或 Mini Browser 是一个轻量级的浏览器，不支持插件安装，如需安装，请在自己的电脑上对应安装。`

> 在使用 Vue 时，推荐在你的浏览器上安装 Vue Devtools。它允许你在一个更友好的界面中审查和调试 Vue 应用。

**1、下载对应浏览器的 Vue Devtools。**

*  [Get the Chrome Extension][] / ([beta channel][])
 *  [Get the Firefox Addon /][Get the Firefox Addon] ([beta channel][beta channel 1])
 *  [Get standalone Electron app][] (works with any environment!)

**2、打开浏览器，打开设置>开发工具>扩展程序，将下载好的 Vue Devtools 拖到界面中，即可完成安装(谷歌浏览器为例)。**  
![在这里插入图片描述][3491ed77071e4d7ebc1fb6c579258404.png]  
**3、你就可以在浏览器中轻松调试你的 vue 应用。**  
![在这里插入图片描述][fa6c1bcf42bd4a099ea771c2217d641f.png]

## 3、创建第一个实例 ##

> 每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例 开始的：

var app = new Vue({
      // 选项
    });

> Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统，我们新建一个 .html 后缀的文件，输入以下代码，运行（右击文件 > open with > Preview 或 Mini Browser），你就会看到 \{ \{msg\}\} 被渲染成 hello。

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>syl-vue-test</title>
        
        <script src="vue.min.js"></script>
      </head>
      <body>
        <div id="app">{
       {msg}}</div>
        <script>
          var app = new Vue({
          
            el: "#app", // dom 挂载点
            data: {
          
              // 数据项
              msg: "hello syl",
            },
          });
        </script>
      </body>
    </html>

![1][]  
`说明： el 为实例挂载点，上面表示挂载在 id 为 app 的 dom 元素中。data 选项为数据选项，存放绑定数据。除了这两个之外还有实例选项，methods（实例方法）、computed（计算属性） 等`

## 4、理解 Vue 的 MVVM 模式 ##

![在这里插入图片描述][350f2f5141474b96b85549031dc96473.png]

*  M：Model 即数据逻辑处理。
 *  V：View 即视图（用户界面）。
 *  VM：ViewModel 即数据视图，用于监听更新，View 与 Model 数据的双向绑定。

> 所以，Vue 一大特点就是数据双向绑定，另一大特点就是响应式，接下来，我们来看看它的魅力。

## 5、数据双向绑定 ##

> 在 Vue 中数据双向绑定随处可见，最常见的是表单数据中的双向绑定，例如：

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>syl-vue</title>
        
        <script src="vue.min.js"></script>
      </head>
      <body>
        
        <div id="app">
          <input type="text" v-model="msg" />
          <p>{
       {msg}}</p>
        </div>
        <script>
          var app = new Vue({
          
            el: "#app", // el: 挂载点
    
            data: {
          
              // data:数据选项
    
              msg: "hello",
            },
          });
        </script>
      </body>
    </html>

**在我们对文本框输入值时，实例 data 中的 msg 值也随之变化。运行效果：**  
![在这里插入图片描述][689ee23518e8418aa7d3d1bb38c1fed9.png]

### 5.1 感受响应式 ###

> 上面我们了解到 Vue 是一个 MVVM 架构的框架，成功创建了一个 Vue 应用！看起来这跟渲染一个字符串模板非常类似，但是 Vue 在背后做了大量工作。现在数据和 DOM 已经被建立了关联，所有东西都是 响应式的。我们可以看看他是不是响应式的，打开你的浏览器的 JavaScript 控制台 (就在这个页面打开)，并修改 app.msg 的值，你将看到上例相应地更新，更改数据也触发视图的相应更新。

## 实验总结 ##

*  Vue 与其他框架的对比及特点
 *  安装 Vue 的方法
 *  node 的安装
 *  vue-cli 的安装
 *  Vue 开发者工具的安装
 *  Vue 创建实例
 *  Vue 数据的双向绑定及响应式

[69d518e281674dfa9b6bf5b47e297a63.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/97a06334a7d04e7eb2ecea8e6f45b0fb.png
[11950aa1c63447a190e5abf206024ea7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/26292178258d494bbea896058b718f77.png
[cec02d3967d544e5bb8d4ba7fc54bd2c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/5861a8238fb149c2b751e61ebd82600f.png
[06125d40140247caa82bdaab3ec78db2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/e797c72509f14cb594a58f011f81f53e.png
[240f7e91239c438897719bb92aeb9b16.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/c8b07fb58fa34783ab035e85e59aa4d6.png
[ec45e2b2a21942a3b47854dfd6313905.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/1d30254f2b864473ab23560ccc4880ea.png
[Get the Chrome Extension]: https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd
[beta channel]: https://chrome.google.com/webstore/detail/vuejs-devtools/ljjemllljcmogpfapbkkighbhhppjdbg
[Get the Firefox Addon]: https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/
[beta channel 1]: https://github.com/vuejs/devtools/releases
[Get standalone Electron app]: https://github.com/vuejs/devtools/blob/main/shells/electron/README.md
[3491ed77071e4d7ebc1fb6c579258404.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/0a732cb15fe347b998ec05f4409261fa.png
[fa6c1bcf42bd4a099ea771c2217d641f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/de413e7fa01749af8959440624ed687d.png
[1]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/c4fa10fd13304900805720487b4ec290.png
[350f2f5141474b96b85549031dc96473.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/cdbd7bae748c455483c59f4ed6f74ced.png
[689ee23518e8418aa7d3d1bb38c1fed9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/adcb12d0168d4ae288d2dd56d605f4b8.png