【前后端分离项目实战】从零构建后一个完整的后台项目之vue的学习（一）
文章目录
配合《【前端】前端及其技术栈》一起看更佳。
一）什么是vue？
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。
1、渐进式框架是什么意思？
作者在ningjs 分享中介绍过：https://www.youtube.com/watch?v=EiTORdpGqns
简单理解就是用想用的或者能用的功能，而其他功能可以不用，在前端项目中部分的或者全部的使用 vue 都可以。即一开始不需要你完全掌握它的全部功能特性，可以后续逐步增加或使用不同的功能。
Vue与React、Angular的不同是，它是渐进的：
2、为什么用vue而不是其他的前端框架？
目前流行的前端框架：
1）React：https://reactjs.org/
2）Vue：https://vuejs.org/
3）Angular：https://angular.io/
4）其他的具体可参考：https://zhuanlan.zhihu.com/p/76463271
1）渐进式
每个框架都不可避免会有自己的一些特点，从而会对使用者有一定的要求，这些要求就是主张，主张有强有弱，它的强势程度会影响在业务开发中的使用方式。
而渐进式代表的含义是：主张最少。
对比Angular：
如果你用Angular，必须接受以下东西：
所以Angular是带有比较强的排它性的，如果你的应用不是从头开始，而是要不断考虑是否跟其他东西集成，这些主张会带来一些困扰。
对比React：
React也有一定程度的主张，它的主张主要是函数式编程的理念，比如说，你需要知道什么是副作用，什么是纯函数，如何隔离副作用。
它的侵入性看似没有Angular那么强，主要因为它是软性侵入。你当然可以只用React的视图层，但几乎没有人这么用，为什么呢，因为你用了它，就会觉得其他东西都很别扭，于是你要引入Flux，Redux，Mobx之中的一个，于是你除了Redux，还要看saga，于是你要纠结业务开发过程中每个东西有没有副作用，纯不纯。
Vue可能有些方面是不如React，不如Angular，但它是渐进的，没有强主张。
你可以在底层数据逻辑的地方用OO和设计模式的那套理念，也可以函数式，都可以，它只是个轻量视图而已，只做了自己该做的事，没有做不该做的事，仅此而已。
2）其他优势
作为前端开发人员的首选入门框架，Vue 有很多优势：
二）vue开发环境的搭建
以在mac上面搭建进行说明。
1、安装
Vue.js 设计的初衷就包括可以被渐进式地采用，这意味着它可以根据需求以多种方式集成到一个项目中。
将 Vue.js 添加到项目中主要有四种方式：
1）安装Node环境
和java需要安装JDK一样，vue也要安装Node环境。
什么是node.js？
Node.js 是基于 Chrome 的 V8 引擎开发的一个 C++ 程序，目的是提供一个 JS（Javascript）的运行环境。Node.js 是类似 React/Vuejs 这样的前端框架的开发环境运行的基础。
安装方法参考node.js官网：http://nodejs.cn/learn/how-to-install-nodejs
- 直接在官网下载安装包
- 使用homebrew下载
测试node安装：
Mac下查看node的安装路径：which node
2）安装npm
什么是npm？
npm 是 Node Package Manager 的缩写，意思是 Node 的包管理系统。Nodejs 现在如日中天，其中 npm（https://www.npmjs.com/）这个功不可没。在这里，我们要实现各种功能几乎都能找到现成的别人写好的包，直接拿来用就好了。
新版本Node.js已经包含安装了npm。
查看npm版本：npm -v
如果需要更新npm：npm install -g npm
3）安装vue-cli（Vue命令行工具CLI，脚手架）
Vue 提供了一个官方的 CLI，为单页面应用 (SPA) 快速搭建繁杂的脚手架。它为现代前端工作流提供了功能齐备的构建设置。只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint 校验，以及生产环境可用的构建版本。
安装命令：sudo npm install vue-cli -g
4）安装vue和vuex
命令：npm install vue、npm install vuex
查看版本，测试Vue是否搭建成功：vue -V
2、安装IDE
vue.js可以用vscode或者WebStorm开发工具。
3、导入工程项目
1）把项目导入IDE
打开VSCode，通过打开文件夹即可。
2）安装项目
在项目所在目录下执行命令npm install，安装Vue前台依赖，生成node_modules目录。
3）运行项目
在项目所在目录下执行命令npm run dev。
控制台输出访问地址，比如：http://localhost:8081
4）访问测试
根据控制台输入地址访问。
5）打包项目
命令npm run build，打包后生成dist目录。
【部分内容参考自】
标签：
相关文章
-
无相关信息