01-Vue的介绍和vue-cli

MVVM模式

01-Vue的介绍和vue-cli - 图1

  • Model:负责数据存储

  • View:负责页面展示

  • View Model:负责业务逻辑处理(比如Ajax请求等),对数据进行加工后交给视图展示

关于框架

为什么要学习流行框架

1、企业为了提高开发效率:在企业中,时间就是效率,效率就是金钱;企业中,使用框架,能够提高开发的效率。

提高开发效率的发展历程

原生JS -> Jquery之类的类库 -> 前端模板引擎 -> Angular.js / Vue.js(能够帮助我们减少不必要的DOM操作;提高渲染效率;双向数据绑定的概念)

2、在Vue中,一个核心的概念就是:数据驱动,避免手动操作DOM元素。这样的话,可以让前端程序员可以更多的时间去关注数据的业务逻辑,而不是关心 DOM 是如何渲染的了。

框架和库的区别

框架

框架是一套完整的解决方案。

对项目的侵入性较大,项目如果需要更换框架,则需要重新架构整个项目。但是优点也很明显:功能完善、提供了一整套的解决方案。

库(插件)

只是提供某一个小功能。

对项目的侵入性较小,如果某个库无法完成某些需求,可以很容易切换到其它库实现需求。

举例:

  • 从Jquery 切换到 Zepto

  • 从 EJS 切换到 art-template

前端的各种框架

Vue 和 React 的相同点

  • 利用虚拟DOM实现快速渲染

  • 轻量级

  • 响应式组件

  • 支持服务器端渲染

  • 易于集成路由工具、打包工具以及状态管理工具

PS:Vue 在国内很受欢迎;React 在国内和国外都很受欢迎,适合做大型网站。

什么是虚拟 DOM

传统的web开发,是利用 jQuery操作DOM,这是非常耗资源的。

我们可以在 JS 的内存里构建类似于DOM的对象,去拼装数据,拼装完整后,把数据整体解析,一次性插入到html里去。这就形成了虚拟 DOM。

Vue1.0没有虚拟DOM,Vue2.0改成了基于虚拟DOM。

前端框架回顾

01-Vue的介绍和vue-cli - 图2

01-Vue的介绍和vue-cli - 图3

01-Vue的介绍和vue-cli - 图4

Vue框架中,没有控制器。

Vue 框架

发展历史

  • 2013年底作为尤雨溪个人实验项目开始开发

  • 2014年2月公开发布。

  • 2014年11月发布0.11版本

  • 2016年10月发布2.0版本。

相关网址

01-Vue的介绍和vue-cli - 图5

上方截图的时间:2018-03-02。

介绍

Vue 本身并不是一个框架,Vue结合周边生态构成一个灵活的、渐进式的框架。

Vue 以及大型 Vue 项目所需的周边技术,构成了生态。

渐进式框架图:

01-Vue的介绍和vue-cli - 图6

Vue框架的特点

  • 模板渲染:基于 html 的模板语法,学习成本低。

  • 响应式的更新机制:数据改变之后,视图会自动刷新。【重要】

  • 渐进式框架

  • 组件化/模块化

  • 轻量:开启 gzip压缩后,可以达到 20kb 大小。(React 达到 35kb,AngularJS 达到60kb)。

Vue 的环境搭建

我们首先要安装好 NVM、Node.js环境,然后再来做下面的操作。

常见的插件

  • Webpack:代码模块化构建打包工具。

  • Gulp:基于流的自动化构建工具。

  • Babel:使用最新的 规范来编写 js。

  • Vue:构建数据驱动的Web界面的渐进式框架

  • Express:基于 Node.js 平台,快速、开放、极简的 Web 开发框架。

以上这些包,都可以通过 NPM 这个包管理工具来安装。

引用 Vue.js 文件

1、方式一:(CDN的方式进行引用)

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
  7. </head>
  8. <body>
  9. </body>
  10. </html>

2、方式二:(下载 vue.js 文件)

去网站 https://cdn.jsdelivr.net/npm/vue/ 下载 vue.js 文件,直接放到工程文件里,然后引用。

3、方式三:(NPM的方式安装vue)

  1. # 最新稳定版
  2. $ npm install vue

如果网络不稳定,可以采用下面的方式安装:

  1. $ cnpm i vue --save

然后在代码中通过下面这种方式进行引用:

  1. import Vue from 'vue'

利用 vue-cli 新建一个空的项目

Vue 提供一个官方命令行工具,可用于快速搭建大型单页应用。该工具为现代化的前端开发工作流提供了开箱即用的构建配置。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目。

官方代码参考

  1. npm install -g @vue/cli
  2. vue create my-app
  3. cd my-app
  4. npm run serve

我们根据上方的参考代码,来看看“利用 vue-cli 新建一个空的项目”的步骤。

安装 vue-cli(命令行工具)

安装命令如下:

  1. # 全局安装 vue-cli
  2. $ npm install -g @vue/cli

初始化一个 simple 项目

(1)首先执行:

  1. vue create my-app

输入上方命令后,会弹出一个选项:

01-Vue的介绍和vue-cli - 图7

如果是初学者,直接选default就行。之后会自动生成一个空的初始化项目,包含了项目目录、以及项目依赖的脚本。

这个空项目的工程文件如下:(请务必仔细研究这个项目的写法和目录结构)

我们可以看到这个项目的结构:

01-Vue的介绍和vue-cli - 图8

  • src:项目源码

  • .babelrc:ES6编译插件的配置

  • index.html:单页面的入口

上方截图中,npm install指的是下载各种依赖包,npm run dev指的是打开发包,npm run build指的是打生产包。

(2)本地运行项目:

  1. cd my-app
  2. npm run serve

浏览器输入http://localhost:8080/,就可以让这个空的项目在本地跑起来:

01-Vue的介绍和vue-cli - 图9

备注:我们在 GitHub上下载的任何Vue有关的项目,第一步都是要首先执行 npm install,安装依赖的 mode_modules,然后再运行。我们发给同事的工程文件,建议不要包含 node_modules

构建一个 非 simple 项目

构建一个空的项目,首先执行:

  1. $ vue create vuedemo2

01-Vue的介绍和vue-cli - 图10

上图中,选择 Manually select features,然后根据提示依次输入:

01-Vue的介绍和vue-cli - 图11

  • project name:要求小写

  • description:默认即可。

  • vue-router:需要。

  • ESlint:语法检查,初学者可以暂时不需要。

  • 单元测试:暂时也不需要。

  • e2e test:不需要。

选择 eslint 的配置:

01-Vue的介绍和vue-cli - 图12

然后让这个空的项目就可以在浏览器上跑起来。

vue 项目结构分析

01-Vue的介绍和vue-cli - 图13

  • buid:打包配置的文件夹

  • config:webpack对应的配置

  • src:开发项目的源码

    • App.vue:入口组件。.vue文件都是组件。
    • main.js:项目入口文件。
  • static:存放静态资源

  • .babelrc:解析ES6的配置文件

  • .editorcofnig:编辑器的配置

  • .postcssrc.js:html添加前缀的配置

  • index.html:单页面的入口。通过 webpack打包后,会把 src 源码进行编译,插入到这个 html 里面来。

  • package.json:项目的基础配置,包含版本号、脚本命令、项目依赖库、开发依赖库、引擎等。

图片的base64编码

默认是10k以下,建议都通过 base64编码。在配置文件webpack.base.conf.js中进行修改:

  1. {
  2. test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
  3. loader: 'url-loader',
  4. options: {
  5. limit: 10000,
  6. name: utils.assetsPath('img/[name].[hash:7].[ext]')
  7. }

我的公众号

想学习更多技能?不妨关注我的微信公众号:千古壹号(id:qianguyihao)。

扫一扫,你将发现另一个全新的世界,而这将是一场美丽的意外:

01-Vue的介绍和vue-cli - 图14