此章主要是介绍vue.js及安装方式

一、vue.js介绍

​vue.js官网​​就已经做了说明,vue是渐进式 JavaScript 框架。看到.js后缀一般都能猜出它是js框架;至于什么是渐进式,我这里引用别人网上的

hualinux 进阶 vue 1.1:vue介绍及安装方式说明_vue2.x

笔者理解的“渐进式框架”也非常简单,就是用你想用或者能用的功能特性,你不想用的部分功能可以先不用VUE不强求你一次性接受并使用它的全部功能特性

场景一:公司刚开始一个项目,技术人员对Vue的掌握也不足够。那么我们就不能使用VUE了么?当然不是,如果你只是使用VUE做些基础操作,如:页面渲染、表单处理提交功能,那还是非常简单的,成熟技术人员上手也就一两天。完全可以用它去代替jquery。并不需要你去引入其他复杂特性功能。

场景二:我们项目用了VUE,使用的效果也挺好。那么我们想逐渐实现代码组件化,实现代码的复用,或者是基于组件原型的跨项目的代码复用。那么我们就可以引入VUE的components组件特性了。

场景三:我们的项目规模逐渐的变大了,我们可能会逐渐用到前端路由、状态集中管理、并最终实现一个高度工程化的前端项目。这些功能特性我们可以逐步引入,当然不用也可以。

所以VUE的适用面很广,你可以用它代替老项目中的JQuery。也可以在新项目启动初期,有限的使用VUE的功能特性,从而降低上手的成本。

 二、vue.js的安装方式

根据​​ vue.js官网安装教程​​介绍,主要是有2种安装方式

2.1 使用<script> 标签引入

hualinux 进阶 vue 1.1:vue介绍及安装方式说明_vue介绍及安装方式说明_02

因为我们是开发环境,所以使用的是开发版本,在前期学习中推荐此方式,但是生产环境中不推荐,等下我会做说明

2.2 使用​​NPM​​安装(大型)

在用 Vue 构建大型应用时推荐使用 NPM 安装​​[1]​​​。NPM 能很好地和诸如 ​​webpack​​​ 或 ​​Browserify​​​ 模块打包器配合使用。同时 Vue 也提供配套工具来开发​​单文件组件​​。

# 最新稳定版 
$ npm install vue

2.3 标签引入会npm安装的区别

使用<script> 标签引入只能使用vue的核心功能,基础功能。新手学习vue基础功能时推荐使用标签引入方式。

PS:对于网站很简单的,比如就是公司网站介绍,这个导航的切换

使用npm安装,目前​​node.js​​已经把npm放进去了,所以需要安装node.js,我们知道node.js是js的服务端,既然能做服务器,说明它的功能是强大的,所以它能构建复杂的应用。

vue.js其它组件需要npm安装,为了方便管理,vue也推出了vue-cli。

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