【吐血总结】优质开发:一文带你精通Vue.js前端框架(一)

自我介绍

我是秋说,研究 人工智能、大数据 等前沿技术,传递 Java、Python 等语言知识。
在这里插入图片描述

💬主页链接:秋说的博客
📆 学习专栏推荐:
人工智能:创新无限💫
MySQL进阶之路🏆
C++刷题集🚀
网络安全攻防姿势总结🗡
【从0开始 深度掌握】C程序设计💯
前端开发:探索创新与用户体验✔️
欢迎点赞🌈 收藏⭐ 留言📝

前言

正式开始学习前 确保你已学过前端三件套 HTML CSS JavaScript


什么是Vue.js

Vue.js是一种流行的JavaScript前端框架,用于构建交互式的、响应式的用户界面。它是一种轻量级、灵活和易于学习的框架,广泛应用于现代Web应用程序开发中。

在这里插入图片描述


为什么是Vue.js

前端框架那么多,为什么Vue.js非学不可?

Vue.js的简洁语法和易用性使得它成为构建现代Web应用程序的优秀选择,无论是小型项目还是大型复杂的应用都能发挥出色的效果。

在这里插入图片描述

以下是Vue.js的一些核心特性和概念:

1. 响应式数据绑定: Vue.js使用双向绑定的数据模型,将数据和视图进行关联。当数据发生变化时,视图会自动更新,反之亦然。

2. 组件化开发: Vue.js鼓励通过组件化的方式来构建页面。一个组件封装了HTML、CSS和JavaScript的整个功能单元,可以重复使用和嵌套组合,提高了代码的可维护性和可重用性。

3. 虚拟DOM: Vue.js通过虚拟DOM机制提供高效的渲染性能。它会在内存中构建一个虚拟的DOM树,然后与实际DOM进行比较,只更新需要更新的部分,以减少重新渲染的开销。

4. 指令和过滤器: Vue.js提供了丰富的指令(Directives)和过滤器(Filters),用于处理DOM元素的动态渲染和数据转换。

5. 生命周期钩子: Vue.js提供了一组生命周期钩子函数,可以在不同阶段插入自定义代码,例如在组件创建、挂载、更新和销毁时执行特定的逻辑。

6. 路由和状态管理: Vue.js支持使用Vue Router进行客户端路由管理,以实现单页面应用(SPA)。同时,Vue.js还提供了Vuex状态管理模式,用于集中管理应用程序的状态。

以上只是Vue.js的一些主要特性,它还有更多功能和工具可供探索。


Vue.js安装

安装Vue.js之前,先确保你安装了最新版本的 Node.js,Node.js下载链接:https://nodejs.org/en

接着一路回车安装即可:

在这里插入图片描述

接着创建一个Vue文件夹,作为打算创建项目的目录

在这里插入图片描述

在当前目录打开cmd,输入npm create vue@latest

这一指令将会安装并执行 create-vue,它是 Vue 官方的项目脚手架工具。你将会看到一些诸如 TypeScript 和测试支持之类的可选功能提示:

✔ Project name:<your-project-name>
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add an End-to-End Testing Solution? … No / Cypress / Playwright
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes

Scaffolding project in ./<your-project-name>...
Done.

如果不确定是否要开启某个功能,你可以直接按下回车键选择 No

示例如下:

在这里插入图片描述

在项目被创建后,通过以下步骤安装依赖并启动开发服务器:

> cd <your-project-name>
> npm install
> npm run dev

在这里插入图片描述

由回显可知,我们的第一个Vue项目已运行。

根据 Local: http://localhost:5173/提示,访问 http://localhost:5173/,结果如下:

在这里插入图片描述

注意:Vue.js 不支持 IE8 及其以下 IE 版本。


打包Vue项目

方法一:vite打包

打包 Vue 项目:npm run build

在这里插入图片描述

执行完成后,会在 Vue 项目下生成一个 dist 目录,一般包含 index.html 文件及 assets 目录,assets 目录包含了静态文件 js、css

在这里插入图片描述

如果直接双击 index.html 打开浏览器,页面是空白的。

在这里插入图片描述

想要正常显示,可以修改 index.html 文件中 js、css 文件的路径

例如我们打开 dist/index.html 文件看到路径是绝对路径:

<link href=/dist/css/app.1.css rel=stylesheet>
<script type=text/javascript src=/dist/js/app.2.js></script>

我们把 js、css 路径修改为相对路径:

<link href=dist/css/app.1.css rel=stylesheet>
<script type=text/javascript src=dist/js/app.2.js></script>

这样直接双击 dist/index.html 文件就可以在浏览器中正常显示了

方法二:webpack打包

一般来说,我们采用现代化的静态模块打包工具Webpack进行打包(以上方法不行的读者也可采用此方法)

首先在命令行输入npm create vue@latest

一路回车后cd vue-projectnpm install

在这里插入图片描述

然后我们使用Webpack以生产模式构建Vue:

npm install webpack webpack-cli vue-loader vue-template-compiler css-loader style-loader html-webpack-plugin --save-dev

在这里插入图片描述

接着打开项目目录:

在这里插入图片描述

在src目录中新建index.js文件并写一个测试语句:

在这里插入图片描述

接着在项目的根目录D:\Software\Vue\vue-project 新建index.html文件,并在body中添加<script src="./src/index.js"></script>来加载index.js文件

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h1>hello</h1>
  <script src="./src/index.js"></script>
</body>
</html>

接着浏览器打开index.html,回显如下:

在这里插入图片描述

控制台回显hello,说明加载js文件成功。


webpack执行流程

接着熟悉一下webpack的执行流程

在index.js页面打开命令行,切换到项目路径,进行打包:

npx webpack

在这里插入图片描述
这个报错不需要理会,默认情况下,Webpack 会将 ‘mode’ 设置为 ‘production’

可以发现,项目目录产生了dist路径:

在这里插入图片描述

由于我们没有引入任何import来导入依赖,所以dist文件夹中的main.js就是我们所写的index.js

在这里插入图片描述

接着我们看看在有依赖的情况下webpack打包后的情况:

先修改index.html:

在这里插入图片描述

在src目录下新建data.js:(src目录均为我们的源代码)

在这里插入图片描述

内容如下:

在这里插入图片描述

使用getBlogPosts函数,返回一个包含三个字符串的数组。每个字符串代表一个博客文章。

index.js内容如下:

在这里插入图片描述
导入 getBlogPosts 函数,并调用它,将其结果输出到控制台。

接着我们进行webpack打包:

在这里插入图片描述

打包完成后发现main.js已发生改变且与index.js不同:

在这里插入图片描述

这是因为webpack智能判断了代码逻辑,实现了代码简化。

浏览器成功回显:

在这里插入图片描述


总结

以上为前端开发:一文带你精通Vue.js前端框架系列(一),带领读者了解什么是vue.js、为什么是vue.js以及vue的打包、webpack执行流程等知识点。

后续将分享前端开发:一文带你精通Vue.js前端框架系列(二),读者可收藏订阅专栏。

在这里插入图片描述