Vue基础架构

最新推荐文章于 2023-04-06 16:58:31 发布

VIP文章张兵游勇

最新推荐文章于 2023-04-06 16:58:31 发布

阅读量1w

点赞数 4

分类专栏： Vue 文章标签： vue python java javascript

本文链接：https://blog.csdn.net/qq_43623447/article/details/105715195

版权

基础回顾

假设作为一个机智后端开发的你已经了解了如何使用 Maven 去创建一个项目，并且用 JSP 写过前后端不分离的业务系统。

在讲解枯燥的技术细节之前，我们不妨先回顾一下基础知识放松一下

首先了解一下 Web 网页的加载原理。我们都知道 Web 网站最初是只有 HTML 和 CSS 的，HTML 是一个 Document，由 Body 和 Header 组成。

Document 的层次结构又称为 DOM 树。像下面这样：

<html>
    <header>
    </header>
    <body>
        <div>aaaa</div>
        <table>
        </table>
        <div>bbb</div>
    </body>
  </html>

HTML 只能作为静态展现，没有交互效果。所以最初网页的跳转是通过链接标签实现的。

JavaScript 的出现让动态的修改 DOM 结构成为现实。这样网页就有了新的生命 -> 交互。

最早的 JavaScript 代码，是通过 document.getElementById("id"); 这种方式进行 DOM 元素的选择。选择完 DOM 后通过 DOM 元素本身的 Api 来控制 DOM 的行为的。如果是复杂的网页，那么写一个页面都会非常的耗费时间，即使后面的 jQuery 时代，其也只不过方便了 DOM 元素的选取。对于一些组件之间的参数传递和全局系统状态维护是没有封装的。

现在比较流行的单页面开发方式，比如 React、Vue、Angular 提供了数据和 DOM 元素的双向绑定，视图和数据项分离的开发方式，将之前手工维护全局状态和组件直接数据传递的开发方式改成由框架来维护。大大的简化了开发方式。

当打开一个 Vue 项目时，看到那些杂乱的打包配置和路由配置，一个个不认识的标签，又怎么去从整体上认识这些呢。如果没有人去专门讲解这些，对于一个专职的后端开发来讲其实理解起来是很困难的。但是作为一个后端如果对于现在的前端开发一点都不懂，那么实际在开发过程中经常会出现给前端的数据格式不方便，引起前端的吐糟。所以哪怕不去专职做前端，理解和懂得原理也是一个优秀的工程师应该去做的事情，本文不致力于一篇文章让你精通前端开发，旨在提供学习的思路和思考方式。

为了方便快速的理解和开发出能看到的效果，可以去下载个后端的脚手架工程，自己开发不需要从头造轮子。vue-admin-template 或者 Ant Design Pro Vue，这两个是已经搭建好了的后台项目基本模板工程。任何一个都可以，我们以第一个这个作为讲解的基础，这个以 Element-UI 为基础，用的比较多一些。

Node.js 环境需要提前搭建好。本文不再讲解。Node.js 本身有一个版本管理工具 NVM。如果版本有问题可以通过 NVM 来切换 Node.js 的版本。

后端思维

入口

假设正在阅读的你对于这个工程一无所知，那么我们从建一个后端项目开始。

打开熟悉的 IDEA 新建一个 Maven 项目，起好名字，点击完成。现在最基础的一个文件是 pom.xml，pom.xml 文件是 Maven 管理我们项目依赖的各种组件和 jar 包的。

打开刚才下载的模板项目在项目的根目录下有个 package.json 文件。这个文件就相当于 pom.xml 文件，是管理前端项目依赖的组件的，其中 dependencies 是前端项目在运行时依赖的组件。devDependencies 里面的组件是开发时使用的，相当于 Maven dependency 里面的 test。

scripts 是什么呢，还是回到后端思维，pom.xml 是给 Maven 用的，Maven 执行 mvn install clean 等命令来进行打包部署测试。scripts 是一样的，这个是给 Node.js 用的，Node.js 使用这个命令来进行打包、测试。

项目的 readme 里面 npm run dev 的 dev 就是对应这个 scripts 里面的 dev : vue-cli-service serve。

安装新的依赖项命令 npm install xxx 会看到 package.json 文件，会更新在 dependencies 节点里面，自动添加了版本和依赖项。这么来看前端比后端还更智能一些。

package.json 是项目的入口，跟 pom.xml 一样，通过这个文件我们能知道我们的项目都依赖了哪些插件。这么来看前端和后端除了语法不太一样，思想是一样的。

配置

环境

后端项目创建完成之后，我们在 resources 下面通常都会创建几个配置文件 application-dev.yml,application-pro.yml 来区分多环境下的变量，如果不是 Spring Boot 项目，那么会在 pom.xml 下创建多个配置，像下面这样：

<profiles>
        <profile>
            <id>dev</id>
            <properties>
                <xxx></xxx>
            </properties>
        </profile>
        <profile>
            <id>test</id>

最低0.47元/天解锁文章

张兵游勇

关注

4
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
Vue基础架构

基础回顾假设作为一个机智后端开发的你已经了解了如何使用 Maven 去创建一个项目，并且用 JSP 写过前后端不分离的业务系统。在讲解枯燥的技术细节之前，我们不妨先回顾一下基础知识放松一下首先了解一下 Web 网页的加载原理。我们都知道 Web 网站最初是只有 HTML 和 CSS 的，HTML 是一个 Document，由 Body 和 Header 组成。Document 的层次结构又...
复制链接

扫一扫