Vue基础知识和实例展示

1 Web 概述

Web 三要素：HTML，CSS，JavaScript。

HTML 用于控制网页的结构，CSS 用于控制网页的外观，JavaScript 控制的是网页的行为。

1.1 HTML

HTML 是超文本标记语言（Hyper Text Markup Language），一种纯文本类型的语言，用来设计网页的标记语言，用该语言编写的文件以 .html 或者 .htm 为后缀，由浏览器解释执行，在 HTML 的页面上可以嵌套脚本语言编写程序段，如 JavaScript。

HTML 工作原理：HTML 是部署在服务器上的文本文件，根据 HTTP 协议浏览器发出请求给服务器，服务器做出响应给浏览器返回一个 HTML，浏览器解释执行 HTML，从而显示内容。

1.2 CSS

CSS 是层叠样式表（Cascading Style Sheets），样式定义了如何显示 HTML 元素，样式通常储存在样式表中，CSS 是HTML的化妆师。

1.3 JavaScript

javaScript 是嵌入在 HTML 中在浏览器中的脚本语言，具有与 java 和 C 语言类似的语言，一种网页的编程技术，用来向 HTML 页面添加交互行为，直接嵌入 HTML 页面，由浏览器解释执行代码，不进行预编译。

2 新项目启动

安装依赖包：

代码语言：javascript复制

npm install

若有部分包安装失败：

代码语言：javascript复制

npm audit fix --force

启动：

代码语言：javascript复制

npm run serve

打包：

代码语言：javascript复制

npm run build

3 Vue 的安装

3.1 安装 Node.js

安装 vue 之前，需要先安装 Node.js。

Node.js 下载地址为：https://nodejs.org/en/download/

选择对应版本进行下载，Windows 就选 Windows Installer (.msi) 。双击下载后的 .msi 安装包，按照默认配置一步一步执行即可。

安装完成后，打开命令提示符，输入 path：

代码语言：javascript复制

path

在输出中的众多路径中，看到环境变量中已经包含了安装 node.js 的路径：

D:NodeJS

检查 Node.js 版本：

代码语言：javascript复制

node --version

输出版本号：

v16.15.1

即表示安装成功。

3.2 安装 Vue.js

Node.js 安装成功后，可以安装 Vue.js 了。

国内直接使用 npm 的官方镜像是非常慢的，通常使用淘宝 NPM 镜像。首先切换安装镜像：

代码语言：javascript复制

npm install -g cnpm --registry=https://registry.npmmirror.com

然后使用 cnpm 命令来安装 vue：

代码语言：javascript复制

cnpm install vue

安装完成后，检查 vue 版本，输入：

代码语言：javascript复制

vue --version

输出版本号：

2.9.6

即表示安装成功。

4 单页实例

4.1 安装环境

首先全局安装 vue-cli：

代码语言：javascript复制

cnpm install --global vue-cli

使用 cd 命令切换到一个新目录，用于存放 web 项目（嫌麻烦可以跳过这一步，用默认目录）：

代码语言：javascript复制

# 从C盘切换到D盘
C:Userszblz2>d:
# 进入 vue 目录
D:>cd Vue

创建一个基于 webpack 模板的新项目，项目名为 my-vue：

代码语言：javascript复制

vue init webpack my-vue

进行默认配置：

代码语言：javascript复制

This will install Vue 2.x version of the template.

默认进行回车：

? Project name my-project ? Project description A Vue.js project ? Author runoob test@runoob.com? Vue build standalone ? Use ESLint to lint your code? Yes ? Pick an ESLint preset Standard ? Setup unit tests with Karma Mocha? Yes ? Setup e2e tests with Nightwatch? Yes vue-cli · Generated "my-project". To get started: cd my-project npm install npm run dev Documentation can be found at https://vuejs-templates.github.io/webpack

进入新创建的 my-vue 文件：

代码语言：javascript复制