关于程序员: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 新我的项目启动

装置依赖包：

npm install

若有局部包装置失败：

npm audit fix --force

启动：

npm run serve

打包：

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：

path

在输入中的泛滥门路中，看到环境变量中曾经蕴含了装置 node.js 的门路：

D:\NodeJS\

查看 Node.js 版本：

node --version

输入版本号：

v16.15.1

即示意装置胜利。

3.2 装置 Vue.js

Node.js 装置胜利后，能够装置 Vue.js 了。

国内间接应用 npm 的官网镜像是十分慢的，通常应用淘宝 NPM 镜像。首先切换装置镜像：

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

而后应用 cnpm 命令来装置 vue：

cnpm install vue

装置实现后，查看 vue 版本，输出：

vue --version

输入版本号：

2.9.6

即示意装置胜利。

4 单页实例

4.1 装置环境

首先全局装置 vue-cli：

cnpm install --global vue-cli

应用 cd 命令切换到一个新目录，用于寄存 web 我的项目（嫌麻烦能够跳过这一步，用默认目录）：

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

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

vue init webpack my-vue

进行默认配置：

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

默认进行回车：

? Project name my-project
? Project description A Vue.js project
? Author runoob mailto: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.githu…

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

cd my-vue

4.2 启动我的项目

执行 install 和 run 命令：

cnpm install
cnpm run dev

看到输入：

DONE Compiled successfully in 5292ms

I Your application is running here: http://localhost:8080

示意胜利执行，关上浏览器，拜访 http://localhost:8080/，能够看到前端输入后果：

打包 Vue 我的项目：

npm run build

执行实现后，会在 vue 我的项目下生成一个 dist 目录。dist 目录蕴含 static 目录和 index.html 文件，static 目录蕴含了动态文件 js、css 和图片目录 images。

4.3 目录构造

node_modules 文件夹下是我的项目依赖包，也就是 cnpm install 命令下载下来的依赖。

src 文件夹下即代码主体。

学习更多编程常识，请关注我的公众号：

代码的路