vue.js课程心得

目录

前言：

一.vue简介

1.什么是vue？

2.vue的主要特点

二.vue的使用

1.搭配环境

2.创建vue.js项目

三.vue的深入学习

1.vue脚手架项目环境配置

1.1软件安装

vue cli安装成功之后，使用vue -V命令查看版本号，如果成功出现版本号即代表安装成功，我们就可以通过Vue Cli脚手架来创建项目了。如下图​编辑

1.2.使用脚手架创建项目

1.3使用以下在命令终端中创建项目：vue create helloworld

2.2项目运行

4.总结

---

前言：

Vue.js是一个流行的JavaScript框架，用于构建用户界面。它提供了一种声明式、组件化的方式来构建Web应用程序。Vue.js具有简单易学、灵活性强、性能高效等特点，因此在现代Web开发中得到了广泛应用。

本文将介绍Vue.js的基本概念、核心功能、使用方法以及实战案例。通过学习Vue.js，你将能够更好地理解Web应用程序的构建方式，并能够快速开发出高效、可维护的Web应用程序。

在开始学习Vue.js之前，你需要了解一些基本的JavaScript和HTML知识。如果你还不熟悉这些知识，建议先学习相关的基础知识后再继续学习Vue.js。

希望通过本文的学习，你能够掌握Vue.js的基本概念和使用方法，并能够在实际项目中应用Vue.js来开发Web应用程序。

一.vue简介

1.什么是vue？

Vue是一种用于构建用户界面的 JavaScript 框架，主要用于开发 Web 应用程序。它是 Vue.js 框架的文件扩展名，默认包含 HTML、CSS 和 JavaScript 代码块，并使用 Vue.js 提供的语法来定义应用程序的交互式组件。

Vue.js 是一个用于构建用户界面的 JavaScript 框架，它的核心库只关注视图层。Vue.js 的核心库非常容易上手，同时便于与第三方库或既有项目整合。当与现代化的工具链以及各种支持类库结合使用时，Vue.js 能够为复杂的单页应用提供驱动。

2.vue的主要特点

1. 轻量级：Vue.js 的核心库只关注视图层，不依赖任何第三方库。
2. 易于上手：Vue.js 的 API 设计简洁、易于理解，能够快速上手。
3. 组件化：Vue.js 采用组件化的方式构建应用程序，使得代码结构清晰、可维护。
4. 响应式：Vue.js 的数据绑定机制使得视图能够自动响应数据的变化。
5. 插件化：Vue.js 支持插件化开发，可以方便地扩展其功能。
6. 双向数据绑定：Vue.js 支持双向数据绑定，使得数据和视图之间的同步更加简单和高效。
7. 虚拟DOM：Vue.js 使用虚拟DOM来提高渲染性能，减少页面重绘的次数。
8. 路由管理：Vue.js 提供了一套路由管理方案，使得单页应用中的页面导航更加方便和高效。
9. 状态管理：Vuex是Vue.js的状态管理库，它提供了一套集中式的状态管理方案，使得在复杂的应用程序中管理状态更加方便和高效。
10. 生态丰富：Vue.js 的生态非常丰富，有大量的第三方库和插件可供选择和使用，如Element UI、Vuetify等UI组件库，以及Vue Router、Axios等工具库。

二.vue的使用

1.搭配环境

首先我们去官网上下载有关vue.js的插件，然后按照教学步骤安装使用vue.js

2.创建vue.js项目

安装完成后我们创建一个vue.js项目

如上图所示，在创建Vue实例时，必不可少的一个选项就是el。el表示唯一根标签，用于指定一个页面中已存在的DOM元素来挂载Vue实例，即通过class或id选择器将页面DOM元素与Vue实例进行绑定。el的类型可以是string，也可以是HTMLElement。

data是Vue实例的数据对象，Vue.js会将data对象的属性转换为getter/setter，从而让data的属性能够响应数据变化。var app= new Vue({data: {数据}})，Vue通过这种方式监听了data内的数据修改，因此，只要data内的数据进行变动，视图层就会同步自动刷新。

然后打开我们的网页就可以看到我们的项目所输出的页面

上图就是我们所创建的第一个项目运行的结果。通过前期简单项目学习后我们接下来再次学习一个vue.js的脚手架的安装

三.vue的深入学习

1.vue脚手架项目环境配置

1.1软件安装

下载安装node,下载之后一步步默认安装即可。检查node是否安装成功，并查看版本号:按住电脑的win+R键盘，调出终端控制台，输入命令行：node -v或node --version,如果能出现以下界面，即代码node安装成功。

而后继续安装npm插件，使用命令行查看npm是否安装成功

以下是npm的常用命令：

 npm install：安装项目所需要的全部依赖包，需要配置package.json文件。

           npm uninstall：卸载指定名称的包。

           npm install 包名：安装指定名称的包。

           npm update：更新指定名称的包。

           npm run serve：项目启动。

           npm run build：项目构建。

           npm config get registry  ：查看当前npm下载包使用的是哪一个源。

           cmd命令行输入指令安装淘宝镜像:

           npm install -g cnpm --registry=https://registry.npm.taobao.org

1.2vue cli 脚手架的安装

vue cli安装成功之后，使用vue -V命令查看版本号，如果成功出现版本号即代表安装成功，我们就可以通过Vue Cli脚手架来创建项目了。如下图

安装完成后我们就可以去创建项目了

1.2.使用脚手架创建项目

1.3使用以下在命令终端中创建项目：vue create helloworld

在这个步骤中，可以使用键盘的↑和↓方向键选择创建项目的方式，default是默认选择项，表示使用默认的方式创建项目；Manually select features选项表示使用手动配置方式创建项目，在这里，我们选择手动的方式创建，手动配置界面如下图所示：

在选择的时候要看清楚所需要用到的插件，而后按照步骤一步一步的继续下去方可完成。

2.2项目运行

在项目终端输入 npm rum serve命令，出现如图所示，证明项目成功

接下来，在浏览器输入：http://localhost:8080/  地址，即可看到如下页面

以上就是整个脚手架的安装到项目创建运行成功的步骤。

4.总结

经过学习我掌握了以下几点：

1. 了解Vue.js脚手架的组成和作用：Vue.js脚手架主要由CLI工具和项目模板组成，CLI工具提供了命令行界面，可以快速创建和管理Vue.js项目，项目模板则提供了一个完整的项目结构和常用的插件和工具。
2. 学习使用Vue.js脚手架创建项目：可以通过命令行工具使用Vue.js脚手架创建项目，在创建项目时可以选择不同的模板和插件，以满足不同的开发需求。
3. 学习Vue.js脚手架的插件和工具：Vue.js脚手架提供了一系列可重用的插件和工具，如webpack、babel、eslint等，可以帮助开发者快速构建和优化Vue.js项目。
4. 学习使用Vue.js脚手架构建和管理项目：可以使用Vue.js脚手架提供的命令行工具和配置文件来构建和管理项目，如启动开发服务器、构建生产版本、热更新等。
5. 学习使用Vue.js脚手架进行测试和部署：可以使用Vue.js脚手架提供的测试插件和工具进行单元测试和端到端测试，并将项目部署到不同的平台上。