vue学习

基础概念什么是Vue？

概念定义：

  • 渐进式JavaScript框架。

  • web前端框架。

特点：

  • 简单易学，性能优秀。
  • 提升开发体验。
  • 适用场景广泛。

封面

为什么使用Vue？

Vue.js 是一款构建用户界面的渐进式框架，它的设计目的是简化 web 开发。Vue.js 使用简洁的、声明式的代码来描述用户界面和交互。Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定到底层的 Vue 实例的数据上。

使用 Vue.js 的好处如下：

  1. 简洁：Vue.js 简洁的代码和易用的语法使得学习、理解和维护都更加容易。

  2. 声明式：Vue.js 使用基于 HTML 的模板语法，开发者只需要关心界面应该是什么样的，不需要关心实现细节。

  3. 组件化：Vue.js 将应用程序分为组件，使得代码更加模块化，易于维护和扩展。

  4. 响应式：Vue.js 使用响应式设计，当数据发生变化时，视图会自动更新，开发者不需要手动更新 DOM。

  5. 性能优化：Vue.js 使用虚拟 DOM，在实际 DOM 更新之前，先在内存中模拟一次 DOM 更新，这样可以减少不必要的 DOM 操作，提高性能。

总的来说，Vue.js 是一款功能强大、易于使用的框架，可以帮助开发者更轻松地构建复杂的用户界面。

学习Vue前建议掌握的知识

首先前端老三件套：

  • HTML 网页基本结构。
  • CSS 让页面更美观。
  • JavaScript 让页面动起来。

Ajax 无刷新的和服务器交互。

Vue大觅项目的技术栈的几个现代化技术

  • Node 环境：作为前端技术的基础环境，大部分技术都依赖于Node.js。
  • 包管理工具 NPM：它是随Node.js一起安装的，用于管理项目中的依赖包。
  • Vue-cli：用于初始化Vue项目，是Vue.js框架的标准开发工具。
  • UI框架 iView：与Vue框架搭配使用，可以大大节约开发时间和成本。
  • 页面路由 vue-router：用于处理单页面应用的路由。
  • 状态管理 VueX：用于Vue项目中的数据共享和管理。
  • ECMAScript 6：使用ES6语法编写JavaScript，提高代码的可读性和效率。
  • axios：Vue官方推荐的插件，用于发送异步请求。
  • Mock数据：由于大觅项目是前后端完全分离的，所以使用Mock数据来模拟后台数据。

Vue第一课，在Vue环境中执行Hello World

要从头开始配置Node环境并运行一个Vue的Hello World项目，请按照以下步骤操作：

1. 安装Node.js和npm

首先，确保你的电脑上安装了Node.js和npm。可以从Node.js官网下载并安装。

安装完成后，打开命令行工具（如终端或命令提示符），输入以下命令来验证安装是否成功：

node -v
npm -v

如果成功安装，命令行会显示Node.js和npm的版本号。

2. 安装Vue CLI

打开命令行工具（如终端或命令提示符），安装Vue CLI（Vue的命令行工具）：

npm install -g @vue/cli

3. 创建Vue项目

使用Vue CLI创建一个新的Vue项目：

vue create hello-world

在创建过程中，会有一些选项让你选择，比如预设（默认配置或者自定义配置）、Vue版本等。这里选择默认配置即可。

4. 进入项目目录

创建完成后，进入项目目录：

cd hello-world

5. 运行项目

在项目目录下，运行以下命令来启动开发服务器：

npm run serve

运行成功后，命令行会显示一个本地服务器的地址，通常是 http://localhost:8080/。

6. 访问项目

在浏览器中输入上述地址，你应该能看到Vue的Hello World页面。

项目结构简述

你的Vue项目目录结构大致如下：

hello-world/
├── node_modules/
├── public/
│   ├── favicon.ico
│   └── index.html
├── src/
│   ├── assets/
│   ├── components/
│   │   └── HelloWorld.vue
│   ├── App.vue
│   └── main.js
├── .browserslistrc
├── .eslintrc.js
├── .gitignore
├── babel.config.js
├── package.json
└── README.md

修改Hello World内容

如果你想修改显示的内容，可以编辑src/components/HelloWorld.vue文件，在<template>标签内修改文本内容。