前后端分离项目实战从零构建后一个完整的后台项目之vue的学习

Posted 黑黑白白君

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前后端分离项目实战从零构建后一个完整的后台项目之vue的学习相关的知识,希望对你有一定的参考价值。

文章目录


配合《【前端】前端及其技术栈》一起看更佳。

一)什么是vue?

Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。


1、渐进式框架是什么意思?

作者在ningjs 分享中介绍过:https://www.youtube.com/watch?v=EiTORdpGqns

简单理解就是用想用的或者能用的功能,而其他功能可以不用,在前端项目中部分的或者全部的使用 vue 都可以。即一开始不需要你完全掌握它的全部功能特性,可以后续逐步增加或使用不同的功能。


Vue与React、Angular的不同是,它是渐进的:

  • vue.js只提供了vue-cli生态中最核心的组件系统和双向数据绑定
  • 就好像 vuex、vue-router都属于围绕vue.js开发的库

2、为什么用vue而不是其他的前端框架?

目前流行的前端框架:

1)React:https://reactjs.org/

  • React 是一个用于构建用户界面的 javascript 库。React 主要用于构建 UI,很多人认为 React 是 MVC 中的 V(视图)。React 起源于 Facebook 的内部项目,用来架设 Instagram 的网站,并于 2013 年 5 月开源。React 拥有较高的性能,代码逻辑非常简单,越来越多的人已开始关注和使用它。

2)Vue:https://vuejs.org/

  • Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue也完全能够为复杂的单页应用提供驱动。

3)Angular:https://angular.io/

  • AngularJS 诞生于 2009 年,由 Misko Hevery 等人创建,后为 Google 所收购。是一款优秀的前端 JS 框架,已经被用于 Google 的多款产品当中。AngularJS有着诸多特性,最为核心的是:MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。

4)其他的具体可参考:https://zhuanlan.zhihu.com/p/76463271

1)渐进式

每个框架都不可避免会有自己的一些特点,从而会对使用者有一定的要求,这些要求就是主张,主张有强有弱,它的强势程度会影响在业务开发中的使用方式。

而渐进式代表的含义是:主张最少。


对比Angular:

如果你用Angular,必须接受以下东西:

  • 必须使用它的模块机制
  • 必须使用它的依赖注入
  • 必须使用它的特殊形式定义组件(这一点每个视图框架都有,难以避免)

所以Angular是带有比较强的排它性的,如果你的应用不是从头开始,而是要不断考虑是否跟其他东西集成,这些主张会带来一些困扰。


对比React:

React也有一定程度的主张,它的主张主要是函数式编程的理念,比如说,你需要知道什么是副作用,什么是纯函数,如何隔离副作用。

它的侵入性看似没有Angular那么强,主要因为它是软性侵入。你当然可以只用React的视图层,但几乎没有人这么用,为什么呢,因为你用了它,就会觉得其他东西都很别扭,于是你要引入Flux,Redux,Mobx之中的一个,于是你除了Redux,还要看saga,于是你要纠结业务开发过程中每个东西有没有副作用,纯不纯。


Vue可能有些方面是不如React,不如Angular,但它是渐进的,没有强主张

  • 你可以在原有大系统的上面,把一两个组件改用它实现,当jQuery用;
  • 也可以整个用它全家桶开发,当Angular用;
  • 还可以用它的视图,搭配你自己设计的整个下层用。

你可以在底层数据逻辑的地方用OO和设计模式的那套理念,也可以函数式,都可以,它只是个轻量视图而已,只做了自己该做的事,没有做不该做的事,仅此而已。


2)其他优势

作为前端开发人员的首选入门框架,Vue 有很多优势:

  • Vue.js 可以进行组件化开发,使代码编写量大大减少,读者更加易于理解。
  • Vue.js 最突出的优势在于可以对数据进行双向绑定(在之后的编写中我们会明显地感觉到这个特点的便捷)。
  • 使用 Vue.js 编写出来的界面效果本身就是响应式的,这使网页在各种设备上都能显示出非常好看的效果。
  • 相比传统的页面通过超链接实现页面的切换和跳转,Vue 使用路由不会刷新页面。


二)vue开发环境的搭建

以在mac上面搭建进行说明。

1、安装

Vue.js 设计的初衷就包括可以被渐进式地采用,这意味着它可以根据需求以多种方式集成到一个项目中。

将 Vue.js 添加到项目中主要有四种方式

  • 在页面上以 CDN 包的形式导入。
  • 下载 JavaScript 文件并自行托管。
  • 使用 npm 安装它。
  • 使用官方的 CLI 来构建一个项目,它为现代前端工作流程提供了功能齐备的构建设置 (例如,热重载、保存时的提示等等)。

1)安装Node环境

和java需要安装JDK一样,vue也要安装Node环境。

什么是node.js?

Node.js 是基于 Chrome 的 V8 引擎开发的一个 C++ 程序,目的是提供一个 JS(Javascript)的运行环境。Node.js 是类似 React/Vuejs 这样的前端框架的开发环境运行的基础。

  • 最早 Nodejs 主要是安装在服务器上,辅助大家用 JS 开发高性能服务器代码,但是后来 Nodejs 在前端也大放异彩。
  • Node.js 下运行 JS 代码有两种方式,一种是在 Node.js 的交互环境下运行,另外一种是把代码写入文件中,然后用 node 命令执行文件代码。
  • Node.js 跟浏览器是不同的环境,写 JS 代码的时候要注意这些差异。

安装方法参考node.js官网:http://nodejs.cn/learn/how-to-install-nodejs

  1. 直接在官网下载安装包
  2. 使用homebrew下载

测试node安装:

  • 查看node.js当前版本:node -v
  • 打开终端,输入node,出现>交互命令行,然后可以输入console.log(“Hello,World”);测试安装。 返回​Hello,World和undefined表示成功。输入.exit退出node。

Mac下查看node的安装路径:which node


2)安装npm

什么是npm?

npm 是 Node Package Manager 的缩写,意思是 Node 的包管理系统。Nodejs 现在如日中天,其中 npm(https://www.npmjs.com/)这个功不可没。在这里,我们要实现各种功能几乎都能找到现成的别人写好的包,直接拿来用就好了。

  • 很多 npm 包都对应一个 Github 项目,但是如果只有代码,那么使用起来还不是特别方便。而当系统上安装好了 Node.js 之后,就会配套安装一个命令,叫做 npm 。
  • 执行 npm install moment 就可以把 moment 这个包从 npm 的软件包仓库中下载这个包,然后安装到本地了。而 npm 的软件包仓库中,有数以万计的 moment 这样的包。

新版本Node.js已经包含安装了npm。

  • 默认的npm包下载地址为registry = “registry https://registry.npmjs.org”,在国外,速度较慢,可以用阿里定制的cnpm命令行工具代替默认的npm。

查看npm版本:npm -v

如果需要更新npm:npm install -g npm


3)安装vue-cli(Vue命令行工具CLI,脚手架)

Vue 提供了一个官方的 CLI,为单页面应用 (SPA) 快速搭建繁杂的脚手架。它为现代前端工作流提供了功能齐备的构建设置。只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint 校验,以及生产环境可用的构建版本。

  • 注意:CLI 工具假定用户对 Node.js 和相关构建工具有一定程度的了解。如果你是新手,我们强烈建议先在不用构建工具的情况下通读指南,在熟悉 Vue 本身之后再使用 CLI。

安装命令:sudo npm install vue-cli -g


4)安装vue和vuex

命令:npm install vuenpm install vuex

查看版本,测试Vue是否搭建成功:vue -V

  • 注意:V为大写;此为vue-cli版本,非vue版本。
  • 如果出现command not found的报错,则尝试用命令sudo npm install -g vue-cli重新安装一次vue-cli。(https://www.cxymm.net/article/qq_22368681/89375629)

2、安装IDE

vue.js可以用vscode或者WebStorm开发工具。

  • 其中vscode(Visual Studio Code)是微软出的一款轻量级代码编辑器(它不是那个大块头的Visual Studio,它是一个精简版的迷你Visual Studio,并且可以跨平台,Windows、Mac和Linux通用),官网下载:https://code.visualstudio.com/
  • 而WebStorm是JetBrains出品的JavaScript编程语言集成开发环境,官网下载:https://www.jetbrains.com/webstorm/

3、导入工程项目

1)把项目导入IDE

打开VSCode,通过打开文件夹即可。

2)安装项目

在项目所在目录下执行命令npm install,安装Vue前台依赖,生成node_modules目录。

3)运行项目

在项目所在目录下执行命令npm run dev
控制台输出访问地址,比如:http://localhost:8081

4)访问测试

根据控制台输入地址访问。

5)打包项目

命令npm run build,打包后生成dist目录。

  • 注意:提交代码时,不要上传node-modules、dist文件夹目录下的内容。


【部分内容参考自】

  • vue.js:https://v3.cn.vuejs.org/guide/introduction.html
  • 什么是渐进式框架?:https://zhuanlan.zhihu.com/p/140378027
  • 从零开始学习Vue–什么是渐进式框架,什么是自底向上逐层应用:http://goopuu.com/archives/5/
  • Vue2.0 中,“渐进式框架”和“自底向上增量开发的设计”这两个概念是什么?:https://www.zhihu.com/question/51907207
  • vue.js是什么框架?有什么优势?:https://zhuanlan.zhihu.com/p/129061442
  • Mac下vue开发环境的搭建步骤以及新建项目:https://www.jianshu.com/p/d3c675019c09
  • mac系统下搭建Vue开发环境,配置运行Webstorm:https://blog.csdn.net/qq_25284679/article/details/108604008

以上是关于前后端分离项目实战从零构建后一个完整的后台项目之vue的学习的主要内容,如果未能解决你的问题,请参考以下文章

前后端分离项目实战从零构建后一个完整的后台项目之vue的学习

从零开始搭建django前后端分离项目 系列五(实战之excel流式导出)

Ruoyi前后端分离式开源项目实战部署总结-环境搭建准备工作

前后端分离开发,基于SpringMVC符合Restful API风格Maven项目实战(附完整Demo)!

Java SSM开发大众点评后端项目实战教程 Java SSM项目实战教程 共9章

从零开始搭建前后端分离的NetCore(EF Core CodeFirst+Au)+Vue的项目框架之三统一返回数据