Vue.js基础介绍与环境搭建

菜狗的小小笔记_
379 阅读6分钟

Vue.js基础

Vue.js简介

  • Vue.js是一个用于构建用户界面的 渐进式‾\underline{\text{渐进式}} JavaScript框架，"自底向上、增量开发‾\underline{\text{自底向上、增量开发}}"的设计方式。
  • Vue.js的核心是只关注视图层。

Vue.js与MVVM架构模型

  • MVVM （Model-View-ViewModel）
    ViewModel在MVVM中负责在Model（模型）和View（视图）中间的桥接工作，当Model改变时通过ViewModel通知View，反之亦然。

双向数据绑定

  • 双向数据绑定就是指View和Model的数据相互同步。

     Vue.js会通过DOM Listeners来监听并改变Model中的数据，当Model中的数据发生改变时，会通过Data Bingings来监听并改变View中数据的展示。
     Vue.js框架底层，是通过使用JavaScript Object对象的defineProperty()方法，重新定义了对象获取属性值和设置属性值的方法，来实现"数据双向绑定"操作的。      因此，其原理仍旧是通过Javascript方式实现的。

Vue.js特点

  • Vue.js是基于MVVM框架设计的，一套用于构建用户浏览器界面的、渐进式的前端WEb框架。
  • Vue.js 是基于数据驱动思想开发的JavaScript框架，实现了在尽可能的条件下减少繁杂的DOM操作。
  • Vue.js开发了一套自己的模版语言，采用虚拟DOM的方式渲染Html页面，实现了将前后端进行分离的开发方式。
  • Vue.js的核心库只关注视图层，同时借助MVVM架构的特点实现了"双向数据绑定"的核心功能
  • Vue.js只聚焦于视图层，具备能力实现单文件组件以及相对复杂的单页面应用。
  • Vue.js是一个轻巧的、高性能可组件化的JavaScript框架，设计了易于学习的API方法，能够非常方便地与其他前端库进行有效整合。

Vue.js快速开发环境

直接 script 引入本地Vue.js

vue.js库文件包含两个版本，分别是"开发版本"和"生产版本"。
开发版本：包含完整的警告信息和调试模式。
生产版本：删除了相关警告信息（体积更小、运行更快），用于最终打包发布时使用。（文件名中加入"min"字符串以示区别）

通过CDN方式引入Vue.js

Vue.js脚手架开发环境

安装Vue.js脚手架

所谓 "脚手架" 就是为了快速搭建应用程序开发框架而设计开发的 自动构建工具‾\underline{\text{自动构建工具}}。
Vue.js框架的脚手架就是vue-cli命令行工具。

Vue.js框架自身迭代速度很快，目前主流的是Vue 2版本和Vue 3+版本。
Vue 3+版本在Vue 2版本的基础上增加了不少新特性和新功能。因此，也造成了Vue 3+版本与Vue 2版本在使用上多少有些差异。
在Vue.js脚手架（vue-cli）的使用上，Vue3+版本与Vue2版本也存在着不同。

当前系统开发环境已经安装好npm工具和Webpack工具，这样就可以继续安装vue-cli命令行工具了

npm install -g @vue/cli //注：Vue 3+版本为 "@vue/cli",Vue 2版本为 "vue/cli"

vue-V // 验证vue-cli命令行工具是否安装成功了 注："-V"要使用大写字母

通过Vue.js脚手架进行快速原型开发测试

Vue.js脚手架支持快速原型开发方式，就是通过单个的Vue页面进行简单应用的设计。
要使用这种快速原型开发方式，需要添加对vue-cli命令行工具的服务支持

npm install -g @vue/cli-service-global

成功添加后，就可以通过 "vue serve" 命令进行快速原型开发测试了。
在开发测试前，需要在VS Code开发工具中安装一个名称为 "Vetur" 的Vue.js扩展插件，该扩展插件添加了VS Code开发工具对Vue文件的支持。

vue serve [文件名].vue  //命令直接启动Http服务测试Vue.js单页面文件

通过Vue.js脚手架进行打包

vue build [文件名].vue //将通过生产模式对Vue.js文件进行打包，打包成功后的文件均输出到 "dist"目录下

在dist目录中，自动生成一个index.html页面文件和一组js文件和map文件（js子目录内）。最后，就可以将dist目录中的文件直接部署到服务器中去测试了。

通过Vue.js脚手架创建应用

通过 "vue create"命令，可以直接创建Vue.js应用项目，该应用项目会自动生成若干必要的框架文件，以及一个默认的Vue单文件页面。同时，这个默认的Vue单文件页面已经是一个最基本的Vue.js应用了，通过"npm run"命令就可以直接运行测试该应用项目。

vue create createvue(项目名称)

安装好后

通过vue-cli结合Webpack创建应用

通过vue-cli命令行工具还可以结合Webpack工具创建Vue.js项目应用。
严格来讲，这其实是Vue 2版本下的操作方式,所结合的Webpack工具其实是Vue.js官方所推荐的模版。

下面具体介绍下Vue 2 版本下通过vue-cli命令行工具创建应用项目及测试运行的过程：

  1. 创建项目       对于Vue 2 版本下vue-cli命令行工具，创建应用项目是通过 "vue init",而不是 "vue create"
vue init webpack your-project-name

       在使用"vue-init"命令之前需要先安装该命令扩展工具，命令如下：

npm install -g @vue/cli-init
  1. 启动运行项目
npm run dev
  1. 对项目进行打包发布
npm run build

* vue create 和 vue init 区别‾\underline{\text{vue create 和 vue init 区别}}

vue create 是vue-cli3.x的初始化方式，目前模板是固定的，模板选项可自由配置，创建出来的是vue-cli3的项目，与cue-cli2项目结构不同，配置方法不同，具体配置方法参考官方文档。vue init 是vue-cli2.x的初始化方式，可以使用github上面的一些模板来初始化项目，webpack是官方推荐的标准模板名。vue-cli2.x项目向3.x迁移只需要把static目录复制到public目录下，老项目的src目录覆盖3.x的src目录(如果修改了配置，可以查看文档，用cli3的方法进行配置)

通过vue-cli结合Webpack创建应用

在 VS Code 安装 vetur 插件，该插件实现了vue代码基本语法的高亮功能。
浏览器打开插件 Debugger for Chrome，Debugger for Firefox。
VS Code 设置断点方法 代码行 F9快捷键即可。
VS Code 运行浏览器调试方法 F5快捷键

学习书籍《vue.js+Node.js全栈开发实战》
cn.vuejs.org Vue.js中文官方网站
（1）cn.vuejs.org/js/vue.js 开发版本
（2）cn.vuejs.org/js/vue.min.… 生产版本

avatar
文章
阅读
粉丝