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 新项目启动
安装依赖包：
若有部分包安装失败：
启动：
打包：
3 Vue 的安装
3.1 安装 Node.js
安装 vue 之前，需要先安装 Node.js。
Node.js 下载地址为：https://nodejs.org/en/download/
选择对应版本进行下载，Windows 就选 Windows Installer (.msi) 。 双击下载后的 .msi 安装包，按照默认配置一步一步执行即可。
安装完成后，打开命令提示符，输入 path：
在输出中的众多路径中， 看到环境变量中已经包含了安装 node.js 的路径：
D:\NodeJS\
检查 Node.js 版本：
输出版本号：
v16.15.1
即表示安装成功。
3.2 安装 Vue.js
Node.js 安装成功后，可以安装 Vue.js 了。
国内直接使用 npm 的官方镜像是非常慢的，通常使用淘宝 NPM 镜像。 首先切换安装镜像：
然后使用 cnpm 命令来安装 vue：
安装完成后，检查 vue 版本，输入：
输出版本号：
2.9.6
即表示安装成功。
4 单页实例
4.1 安装环境
首先全局安装 vue-cli：
使用 cd 命令切换到一个新目录，用于存放 web 项目（嫌麻烦可以跳过这一步，用默认目录）：
创建一个基于 webpack 模板的新项目，项目名为 my-vue：
进行默认配置：
默认进行回车：
? 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 文件：
4.2 启动项目
执行 install 和 run 命令：
看到输出：
DONE Compiled successfully in 5292ms
I Your application is running here: http://localhost:8080
表示成功执行，打开浏览器，访问 http://localhost:8080/，可以看到前端输出结果：
打包 Vue 项目：
执行完成后，会在 vue 项目下生成一个 dist 目录。dist 目录包含 static 目录和 index.html 文件，static 目录包含了静态文件 js、css 和图片目录 images。
4.3 目录结构
node_modules 文件夹下是项目依赖包，也就是 cnpm install 命令下载下来的依赖。
src 文件夹下即代码主体。
学习更多编程知识，请关注我的公众号：
版权声明: 本文为 InfoQ 作者【代码的路】的原创文章。
原文链接:【http://xie.infoq.cn/article/d8338dc2ec520e8c4d3e700e3】。文章转载请联系作者。
公众号：代码的路 2023-01-10 加入
Java、Python、C++、图像处理、深度学习相关知识分享
评论