精华内容
下载资源
问答
  • 深入浅出学 Vue 开发

    万次阅读 多人点赞 2018-08-14 00:42:55
    前端技术日新月异,每一种新的思想出现,都代表了一种技术的跃进、架构的变化,那么对于目前的前端技术而言,MVVM 的思想已经可以代表当今前端领域的前沿思想理念,Angular、React、Vue 等基于 MVVM 思想的具体实现...

    课程介绍

    前端技术日新月异,每一种新的思想出现,都代表了一种技术的跃进、架构的变化,那么对于目前的前端技术而言,MVVM 的思想已经可以代表当今前端领域的前沿思想理念,Angular、React、Vue 等基于 MVVM 思想的具体实现框架,也成为了人们争相学习的一个热点。而 Vue 作为其中唯一没有大公司支持但却能与它们并驾齐驱并且隐隐有超越同类的趋势,不得不说这种增长让人感到惊奇。

    本系列课程内容将会带领大家由浅入深的学习 Vue 的基础知识,了解 Vue 的源码设计和实现原理,和大家一起看一下尤雨溪先生的编程思想、架构设计以及如何进行代码实现。本系列课程内容主要分为三大部分:

    • Vue 的基础知识:在这一部分将学习 Vue 的基础语法及其源码的实现。例如,Vue 的生命周期钩子如何设计?当声明了一个 directive 时,Vue 究竟执行了什么?为什么只有通过 vue.set 函数才能为响应式对象添加响应式属性?如果我们自己要实现一个响应式的框架的话,应该如何下手、如何思考等。
    • Vue 的周边生态:在这一部分将学习 Vue 的周边生态圈,包括有哪些 UI 库可以和 Vue 配合快速构建界面、如何使用 vue-router 构建前端路由、如何使用 Vuex 进行状态管理、如何使用 Axios 进行网络请求、如何使用 Webpack、使用 vue-cli 构建出的项目里的各种配置有什么意义?
    • 项目实战:在这一部分将会通过一个有意思的自动对话系统来进行项目实战,争取通过这个小项目把学到的知识点进行一个整合。

    作者介绍

    刘国栋,资深软件开发工程师、慕课网认证讲师、开源爱好者,目前就职于济南某国企,并且成立了个人工作室,负责前端和移动端的工作。拥有 5 年前端、移动端开发经验,在 JS、Android、iOS 领域有独特的见解,统筹过的多个项目用户数已过千万。

    课程内容

    导读:为什么选择 Vue

    读者朋友们好,很高兴选择这门课程来学习,作为撰写者的我,也感到非常的荣幸。

    程序人生

    我们选择了这个 IT 行业,自然希望能够在这里走得更远。我相信没有任何一个人会甘于平庸,大家都希望能够在自己所处的行业以及所处的领域中有所建树,希望可以实现自己的价值,以获取社会的认可。而如果要实现这个目标的话,我们将要投入更多的时间和精力,才能博得更多的机会。在成长的过程中,不可避免的会踩一些坑、走一些弯路,那么有没有办法可以避免少踩一些坑、少走一些弯路呢?万幸的是,答案是有的。

    站在巨人的肩膀上,我们可以看得更远,约翰 · 雷西格发布了 jQuery 的第一个版本,从此让我们进入了 jQuery 时代;尤雨溪创造了 Vue,使我们正式迈入 Vue 的时代。这些领军者,让我们能够看得更远,让我们的工作和生活变得更加简单。我与这些领军者相去甚远,微不足道,但依然希望可以尽自己的一些能力来帮助到一些人,让大家可以少走一些弯路、少踩一些坑。怀揣着这样的一个梦想,我开设了这一门课程。

    框架为什么会存在

    这个世界上任何事物的存在,必然是解决了世界上的一些问题。同样的道理,框架为什么会存在呢?框架的存在也必然是解决了某一个或某一类的问题,这里引入一下 Vue 的作者尤雨溪说过的话:框架的存在是为了帮助我们应对复杂度。框架作为一个工具用来帮助我们应对一类复杂的问题,我想这就是框架的定义了。

    当然框架本身一样存在着复杂度,就好像我们使用扳手去拧螺丝时,扳手就是框架,它是一个工具,这个工具本身一样有学习成本,只不过它的学习成本比较低,我们使用这个工具来去解决拧螺丝这样一个如果没有扳手会变得相当复杂的问题,这和使用前端框架去解决在工作中遇到的一个复杂项目的时候所经历的过程是一样的。

    所以,很自然的就会在我们使用的框架(工具——扳手)和想要去解决的问题(复杂度——拧螺丝)之间进行抉择,我们会更趋向于使用一个简单的工具来去解决一个复杂的问题,这就是框架存在的意义了。

    所以我们本能的希望框架变得越来越简单,而它能够解决的问题越来越复杂。万幸的是:这个时代正在按照我们的希望来发展

    主流框架

    目前讨论比较多的前端框架主要有三个:

    Angular React Vue

    通过它们在 GitHub 的 Star 历史和 NPM 的下载趋势图来看一下。

    Angular、React 和 Vue 的 GitHub Star 历史:

    这里写图片描述

    npm 的下载趋势图:

    这里写图片描述

    可以看到在 GitHub 上面,Vue 的数据上升最快,并且在 2018 年 6 月 28 日已经超过了 React,成为了最受欢迎的前端框架。而在 npm 中,React 的数据遥遥领先,这得益于 React 强大的社区力量,我们无法否认,React 社区作为当前最活跃的前端社区,提供出了特别多优秀的想法和理念,它们为 React 提供了强大的生态支持,同时也让我们在选择周边框架的时候需要进行更多的选择。

    当然这三个框架都非常的优秀,我们不去讨论它们的优劣,我们的选择都只是基于我们的取舍:我们希望工具足够简单,而它可以解决的问题却要足够复杂。这就够了,不是吗?

    Angular:Angular 期望做的事情非常多,比如说它会包含着它自己的路由,这让我们决定去使用 Angular 的时候,就必须要接受它的全部,这就使得学习成本变得更高,但同时选择变得会更少,不过有时候选择少了并非是一件坏事,它可以让我们更加专注。

    React 与 Vue:React 与 Vue 一样都是专注只做界面,而其他的所有一切都会有各种配套的工具,比如说路由,或者状态管理工具,所以说使用它们的话你可能需要做更多的选择,而这种方式则使得它们本身(React、Vue)的学习曲线相对平缓。

    从上面的分析可以看出,Angular 提供了一个复杂的工具,用于解决一整套复杂的问题。而 React 与 Vue 则专注于解决一个特定的问题,而把其他的问题交给了它们的生态圈来处理,这样做的同时也会让我们花更多的时间来选择合适的周边工具。

    所以说这些框架各有优劣,并没有绝对的谁好谁坏之分,我们选择什么样的工具,取决于我们面对了什么样的问题。没有人会喜欢用大炮去打蚊子,也没有人会想到用苍蝇拍来打大象。我们喜欢刚刚好,追求事半功倍,如果你也是这么想的,那么至少我们的底层观念是一致的。

    Vue 的特点

    经过了那么多的铺垫,总算到了本次课程内容的重点:Vue,它到底有什么魅力?为什么值得我们花费时间去学习?先来看一下 Vue 到底拥有什么样的特点。

    我们会从以下8个方面来对 Vue 进行分析:

    • MVVM 框架
    • 单页面应用程序
    • 轻量化与易学习
    • 渐进式与兼容性
    • 视图组件化
    • 虚拟 DOM(Virtual DOM)
    • 社区支持
    • 未来的 Vue 走向

    (1)MVVM 框架

    所谓 MVVM 框架就是:Model-View-ViewModel,就像下面这样:

    这里写图片描述

    那么这个 MVVM 框架,应该怎么去理解呢?它的第一个 View,相当于页面中的 DOM,最后一个 Model 相当于数据源,就像下面这个样子:

    这里写图片描述

    其中,a 标签就是 DOM,data 对象就是数据源,这两者之间永远不会直接通信,它们所有的联系都是通过 ViewModel,也就是监控者来进行的。监控者会去负责检测数据的变化,然后把数据实时展示在页面中。例如,把 text 的内容更改为 “Hello Vue” 的话,那么 a 标签中展示的内容,也会自动变为 “Hello Vue”。这样就不需要手动的操作 DOM,所有对 DOM 操作都会通过监控者来完成。如果以前写过复杂的 DOM 操作的话(如 **.parent().parent().parent()...),就会发现这种方式带来的便利。

    Vue 正是使用了这种 MVVM 的框架形式,并且通过声明式渲染响应式数据绑定的方式来帮助我们完全避免了对 DOM 的操作。

    (2)单页面应用程序

    单页面应用程序(SPA),一般指为:一个页面就是一个应用(或子应用)。随着技术的发展,现在的前端网页早已不只局限于在浏览器上展示了,手机 App 上、微信公众号上都有了越来越多的展示机会。

    那么如果把传统的多页面应用形式放入到我们的手机上面会是什么样子呢?当进行页面跳转打开一个新的页面的时候,它会变成这样:

    这里写图片描述

    等的花儿都谢了 有没有?

    而如果使用单页面的形式来开发的话,就不会出现这样一种情况。因为我们的整个应用就只有一个页面,当我们的这一个单页被加载进来之后,就不会在进行关于页面的网络请求。Vue 配合生态圈中的 Vue-Router 就可以非常方便的开发复杂的单页应用。

    (3)轻量化与易学习

    我们知道网页中引入的 JS 体积越大,那么加载所需要耗费的时间就越长,反之体积越小,则越节省时间。所以我们会更倾向于使用体积更小的 JS 文件,这也是为什么在生产版本会引入 .min 的 JS 的原因。下面是我从 Vue 官网的截图:

    这里写图片描述

    目前 Vue 的最新稳定版本为 2.5.16,从截图中可以看到 Vue 的生产版本只有 30.90KB 的大小,几乎不会对我们的网页加载速度产生影响。同时因为 Vue 只专注于视图层,单独的 Vue 就像一个库一样,所以使我们的学习成本变得非常低。

    (4)渐进式与兼容性

    渐进式框架就是:我只做分内的事情,并且不会对你要求太多。

    Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。

    这是 Vue 官网上面的一句话,正如在上面所说的,Vue 只做界面,而把其他的一切都交给了它的周边生态来做处理,这就要求 Vue 必须要对其他的框架拥有最大程度的兼容性。

    例如,一开始只想做一个静态站,那么可以只引入 Vue 来去构建界面,过了一段时间,你想在网站上加入访问网络的功能,那么你可以再引入 axios(Vue 官方推荐)或者其他的(哪怕是 jQuery)网络请求框架,而后来随着你的网站越做越大,你想要把你的网站变成一个大型的 Web 应用的时候,可以引入一些其他你需要的 JS 文件,如 Loadsh.js、Velocity.js 等。

    (5)视图组件化

    所谓视图组件化就是把我们的网页拆分为一个个的组件,就像下面这样:

    这里写图片描述

    Vue 允许通过组件来去拼装一个页面,每个组件都是一个可复用的 Vue 实例,组件里面可以包含自己的数据,视图和代码逻辑。比如说:

    这里写图片描述

    CSDN 的这个个人资料模块,大家都已经不陌生了吧,当我们的 Web 应用中有多个页面都使用到这个个人资料模块的时候,就可以把它封装成一个组件,这个组件拥有单独的代码逻辑、CSS 样式、数据等,在任何一个我们需要使用到它的地方,就可以通过

    <component-name></component-name>Vue.component('component-name', {    ...});

    这种方式来直接引入了。

    (6)Virtual DOM

    Virtual DOM 也就是虚拟 DOM,大家知道浏览器去处理 DOM 操作时,是存在性能问题的,这也是我们在使用 jQuery 或者原生 JavaScript 来去频繁操作 DOM 进行数据渲染的时候,我们的页面经常出现卡顿的原因。

    而虚拟 DOM 则是预先通过 JavaScript 的各种运算,把最终需要生成的 DOM 计算出来,并且进行优化,在计算完成之后才会将计算出的 DOM 放到我们的 DOM 树中。由于这种操作的方式并没有进行真实的 DOM 操作,所以才会叫它虚拟 DOM。

    我们在前面说过:

    Vue 是通过声明式渲染响应式数据绑定的方式来帮助我们完全避免了对 DOM 的操作。

    Vue 之所以可以完全避免对 DOM 的操作,就是因为 Vue 采用了虚拟 DOM 的方式,不但避免了我们对 DOM 的复杂操作,并且大大的加快了我们应用的运行速度。

    (7)来自社区的支持

    虽然在全球中 Vue 的社区并没有 React 社区那么的繁华,但得益于 Vue 的本土化身份(Vue 的作者为国人尤雨溪),再加上 Vue 本身的强大,所以涌现出了特别多的国内社区,如 https://www.vue-js.com/、https://vuejs.com.cn/ 等。这种情况在其他的框架身上是没有出现过的,这使得我们在学习或者使用 Vue 的时候,可以获得更多的帮助。

    (8)未来 Vue 的走向

    Vue 是由国人尤雨溪在 Google 工作的时候,为了方便自己的工作而开发出来的一个库,而在 Vue 被使用的过程中,突然发现越来越多的人喜欢上了它。所以尤雨溪就进入了一个边工作、边维护的状态,在这种情况下 Vue 依然迅速的发展。

    而现在尤雨溪已经正式辞去了 Google 的工作,开始专职维护 Vue,同时加入进来的还有几十位优秀的开发者,他们致力于把 Vue 打造为最受欢迎的前端框架。事实证明 Vue 确实在往越来越好的方向发展了(从 Angular、React、Vue 的对比图中可以看出 Vue 的势头)。所以我觉得完全不需要担心未来 Vue 的发展,至少在没有新的颠覆性创新出来之前,Vue 都会越做越好。

    本课能够帮你些什么

    说了那么多,大家应该已经对 Vue 有了一个基础的了解了,那么我们看一下,这节课的主要内容。

    本课将从基础语法、生态系统、项目实战这三个部分来帮助大家详细的了解 Vue 的知识,看一下下面的脑图。

    enter image description here

    这就是我们本课将要学习的所有内容,我们会通过一个对话项目完成课程的学习,教你真正掌握 Vue 开发。扫描以下二维码查看项目。

    be4e1810-8b00-11e8-9fe1-c1b3d2332fb0

    通过本次课程可以学习到:

    • Vue 的基础语法
    • Vue 的实现原理
    • Vue 的周边生态
    • Webpack 模块打包器
    • vue-cli 脚手架解析
    • 如何通过 vue-cli + Webpack 来开发我们的自动聊天系统

    因为本次课程涉及到了 Vue 的一些实现原理,同时也会对使用 vue-cli + Webpack 构建出来的代码进行解析,所以在学习本课程之前需要具备 JavaScript 的基础知识,如果对 Vue 已经有了一些了解或者已经使用 Vue 开发过一两个项目的话,那么我相信你会在本次课程中拥有更大的收获!

    点击了解更多《深入浅出学 Vue 开发》

    第01课:初探 Vue

    在正式开始学习 Vue 的知识之前,我们需要先对 Vue 的整体有一个大致的了解。为了达到这个目的,首先了解以下内容:

    • Vue 对移动端和浏览器版本的支持
    • 如何初始化一个 Vue 的项目
    • Vue 的代码结构

    Vue 对移动端和浏览器版本的支持

    因为 Vue 本身使用了 ECMAScript 5 特性,所以 Vue 支持所有兼容 ECMAScript 5 的浏览器。我们根据下面的图示来解释一下,数据来自-caniuse.com

    这里写图片描述

    红色:几乎不支持

    黄色:大部分支持(有很小的可能会影响使用)

    绿色:几乎全部支持(不影响使用)

    由上面的图示可以看出,对 IE 来说,在 IE 8 及其以下的时候,是不支持 ECMAScript 5 的,也就是说,是无法使用 Vue 的,我们看一下对 IE 8 的描述。

    这里写图片描述

    IE 8 几乎没有 ES 5 支持,仅支持对字符串的 Object.defineProperty、Object.getOwnPropertyDescriptor、JSON 解析和属性访问。

    所以说对使用了 ECMAScript 5 特性的 Vue 来说,是没有办法在 IE 8 及以下使用的。IE 8 作为天坑的分界线,其实是一直被大家所诟病的,那么 IE 9 呢?从图示中可以看出,IE 9 的背景为黄色,也就是说大部分支持,那么不支持的部分是哪些呢?我们来看一下。

    这里写图片描述

    可以看到,对 IE 9 来说,它不支持严格模式,这对我们使用 Vue 的影响就已经很小了,所以说可以在 IE 9 及以上可以安全的使用 Vue。

    而对于其他的浏览器和移动端来说,对 ECMAScript 5 的支持还是非常不错的,Chrome 和 Firefox 都对 ECMAScript 5 早早的提供了支持,而 iOS 6 和 Android 4.4 以上也都对 ECMAScript 5 的支持非常完善了,也就是说我们可以在这些浏览器上面放心地使用 Vue 了。

    如果大家对这些数据比较感兴趣,也可以点击这里,自己来看一下,这里就不再过度赘述了。

    如何初始化一个 Vue 的项目

    然后我们来看一下,应该如何去初始化一个 Vue 的项目。引入 Vue 的方式主要有两种:

    • 直接通过 <script> 标签引入;
    • 通过 npm 的方式引入。

    分别看一下这两种引入方式应该如何去做,然后再去把它们做一些对比。

    先来看一下第一种,如何通过 <script> 标签来引入 Vue。

    通过 <script> 标签引入 Vue

    目前 Vue 最新的稳定版本为 2.5.16,可以直接把 Vue 编译之后的代码下载到本地,然后在本地通过 <script> 标签引入,也可以直接通过 cdn 的方式来引入 Vue。具体方法如下:

    // 开发版本,包含完整的警告和调试模式。// 下载地址:https://vuejs.org/js/vue.js    <script src="vue.js"></script>     // 生产版本,删除了警告,30.90KB min+gzip。    // 下载地址:https://vuejs.org/js/vue.min.js    <script src="vue.min.js"></script>     // CDN引入方式,版本号为2.5.16。    // 你也可以直接通过 https://cdn.jsdelivr.net/npm/vue/ 这个地址来查看Vue的源码    // 如果你想要引入生产版本的话,那么只需要把最后的vue.js改为vue.min.js    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

    通过这种方式来引入 Vue,就可以在 .js 文件或者 .vue 文件(需要对 .vue 文件进行解析,比如使用 vue-loader)中直接使用 Vue 的语法了。

    通过 npm 的方式引入

    第二种方式为通过 npm 来直接引入。对于 npm,大家如果有过前端开发经验的话,那应该已经不陌生了。npm 作为在前端被广泛使用的包管理工具,Vue 自然也是需要提供支持的,可以直接使用如下命令来安装 Vue 的最新版本。

    npm install vue

    两种方式的对比

    Vue 的官网推荐我们在用 Vue 去构建大型项目时,使用 npm 的方式去安装,但是说的却并不是很详细,先来看一下官网的说法:

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

    翻译一下官网的意思:之所以推荐使用 npm 的方式来安装 Vue,是因为:

    • 使用 npm 的方式可以更好的配合模块打包器(Webpack 或者 Browserify);
    • 可以更方便的使用单文件组件(.vue 文件)。

    上面两点就是推荐使用 npm 方式的原因,关于模块打包器(Webpack)和单文件组件(.vue 文件),在后面的篇幅中会详细讲解,如果大家现在就想对 Webpack 或者单文件组件进行详细了解,也可以点击链接到它们的官网来详细了解。我们在这里只大概的说一下,目的是让大家更清楚的了解 Vue 引入方式的区别。

    一般在使用 Vue 来构建大型项目的时候,通常会通过npm + vue-cli + webpack的方式进行项目初始化。

    我们需要安装好 npm,可以点击这里下载最新的 Node 版本。

    然后使用 npm install -g vue-cli 指令下载最新的 vue-cli。

    然后通过vue init <template-name> <project-name>这种方式初始化我们的项目,<template-name>是模块打包器,<project-name>是项目名称;比如可以通过 vue init webpack my-project 构建一个名字叫做 my-project 的项目。

    一路回车之后,就可以得到一个使用npm + vue-cli + webpack构建出的项目了,来看一下项目的结构:

    ├── README.md├── build├── config├── index.html├── node_modules├── package.json├── src├── static└── test

    在 package.json 文件下,可以看到一个dependencies:{"vue": "版本号"},这个 vue 就是通过 npm 来引入的 Vue,在 src 文件夹下面也已经生成了 .vue 的单文件组件。

    我们可以直接通过npm run dev的方式在本地运行这个项目,也可以通过 npm run build 对这个项目进行打包。

    那么是不是通过npm + vue-cli + webpack方式生成的项目就不能通过<script>标签的形式引入 Vue 了呢?显示不是的。

    通过 npm 引入 vue,在项目执行打包的时候,会被打包到可执行文件之中,在通过浏览器去访问项目的时候,则会访问项目所部署的服务器中的 vue 文件,而如果服务器的带宽并不高的话(特别是一些个人的服务器,经常只有 1M 的带宽),此时,我们就要尽量的避免服务器中的流量流出。

    在这种情况之下,要使用<script>标签的形式在 CDN 中去引入 vue,不失为是一个好的选择,比如可以在项目的 index.html 文件中,通过<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> 这种方式来引入 vue,从而尽量减少服务器的压力。

    就像在导读中说的:我们选择什么样的工具,取决于我们面对了什么样的问题。没有任何一种工具或者方式是在任何一种情况下都完全适用的。

    Vue 的代码结构

    在使用 Vue 开发项目时,我们的代码一般会写到两种文件中,分别是:

    • 非单文件组件(.js 文件);
    • 单文件组件(.vue 文件)。

    通过这两种文件来看一下 Vue 的代码结构是什么样子的。

    非单文件组件(.js 文件)

    非单文件组件就是我们正常的 js 文件,js 文件是可以直接被浏览器解析的,可以在 js 文件中,直接通过(可以直接新建一个 html 文件,通过<script>标签的形式引入 Vue,然后复制上面的代码,看一下运行的效果)以下方式直接生成一个 Vue 对象。其中,el 为 element 的简写,#app表示 ID 为 App 的 div 标签,意思为ID 为 App 的 <div> 标签中的所有 html 内容都将被 Vue 解析。而 data 对象则是在 Vue 中生成的数据集,当修改 message 的内容时,div 中展示的数据也会随之改变。

    <div id="app">  {{ message }}</div>var app = new Vue({  el: '#app',  data: {    message: 'Hello Vue!'  }})

    大家还记得我们在导读中说过的 MVVM 模型吗?下面的代码是View:

    <div id="app">  {{ message }}</div>

    下面的代码是 Model。

    data: {    message: 'Hello Vue!'  }

    而 Vue 框架,即 ViewModel,Vue 连接了视图和数据,当数据发生改变时,视图中展示的数据也会发生改变,这种方式在 Vue 中被称作声明式渲染

    而其他的一些声明也都会被写入到 Vue 对象之中,例如,如果要在 Vue 中去定义以下方法,那么则需要使用到 methods 声明,如下:

    var app = new Vue({  el: '#app',  data: {    message: 'Hello Vue!'  },  methods: {      methodsName: function (event) {          ...      }  }});

    同样,如果要监听 Vue 的声明周期或者计算属性的话,也同样以这种方式来声明即可,后面在讲解到这些这些内容的时候,会详细解释。

    单文件组件(.vue 文件)

    第二种方式,也就是通过单文件组件的方式来使用 Vue,这也是官网所推崇的一种方式。大家可以想一下,如果项目足够复杂,若通过上面的方式使用 Vue 的话,那 js 文件得多大啊,同样也非常不利于以后代码的维护,那在以前构建项目的时候遇到这种问题时,一般想到的处理方式是什么?相信大家如果使用过 jQuery 来开发过完整项目的话,都应该能够想到,那就是模块化,比如我们常用的:AMD、CMD 或者 ES6 Module 的模块化,那么在 Vue 中的这种模块化方式,我们称它为单文件组件(.vue 文件)

    先来看一下单文件组件(.vue 文件)的文件结构。

    <template>     // html</template><script>    // js</script><style>    // css</style>

    每一个 .vue 文件都会被当成使一个“组件”,每个“组件”中都有其单独的 html、css、js,然后再把这些“组件”拼装成一个完整的项目(如果大家对这一块不了解,可以看一下导读中提到的组件化知识)。

    使用这种单文件组件(.vue 文件)的优势非常明显,它使得项目组件化,因为每个模块的功能都被单独分割,所以代码耦合性变得更低,也更利于团队开发日后维护(这块会在项目实战中实地展示这种方式的优势)。

    但是 .vue 文件浏览器是无法直接解析的,需要使用到一些解析工具把 .vue 文件解析成浏览器能够看懂的 html、css 和 js 文件。干这个事的工具一般为vue-loader(就好像我们去解析 .less 文件的 Koala,不同的是vue-loader并不是一个单独的应用),而我们去使用vue-loader也都会配合 Webpack 来使用,这也是为什么构建正式大型项目的时候,一般都会使用npm + vue-cli + webpack方式的原因之一。

    然后再看一下,在刚才通过npm + vue-cli + webpack来生成的my-project项目,通过这个项目来大体的认识一下单文件组件(.vue 文件)

    分别打开/src/App.vue/src/main.js这两个文件,为了防止过多的代码对大家造成困扰,我把这些代码进行了一些简化。

    App.vue:

    <template>  <div id="app">    <img src="./assets/logo.png">    <p>{{message}}</p>  </div></template><script>export default {  data: function () {    return {      message: 'Hello Vue'    }  }}</script><style>#app {  font-family: 'Avenir', Helvetica, Arial, sans-serif;  -webkit-font-smoothing: antialiased;  -moz-osx-font-smoothing: grayscale;  text-align: center;  color: #2c3e50;  margin-top: 60px;}</style>

    main.js:

    import Vue from 'vue'import App from './App'new Vue({  el: '#app',  components: { App },  template: '<App/>'})

    大家可以把这两部分的代码复制到项目中,然后执行npm run dev,通过浏览器打开http://localhost:8080/#/,则可以看到一个 Vue 的图标和“Hello Vue”的一串文字。

    如果可以正常运行,那么来看一下这些代码的具体含义。

    main.js里面它通过 ES6 的方式引入了 Vue 和 App.vue 两个文件,然后在初始化 Vue 的时候,通过 el 指定最外层的 div 为id为app的<div>,然后指定了 App.vue 作为 Vue 的一个组件 components,并且给他指定了模板 template 为<App/>

    然后在 App.vue 中,它在<template>标签中声明了 html,在<script>标签中,指定了数据 data 为{message : 'Hello Vue'},在<style>中声明了样式,这就生成了一个完整的组件,然后把这个组件通过 ES6 module 的方式注入到 main.js 的 components 中,这样的一个循环的过程,就构成了模块化方针。

    从第02课开始会正式进入 Vue 的学习,我们会依照如下脑图的顺序进行。

    enter image description here

    在基础语法部分,会通过html+<script>的形式来引入 Vue,致力于通过最简单直接的方式能够让大家对 Vue 的常用 API 有一个足够的了解。

    在周边生态部分,会通过各种实例来帮助大家去学习 Vue 的周边生态。

    最后会通过npm + vue-cli + webpack的方式,以一个实战项目来让大家把本课程所学到的所有内容都整合起来。

    点击了解更多《深入浅出学 Vue 开发》

    第02课:基础语法(上)

    从本篇开始将学习 Vue 的基础语法,在学习基础语法的时候会使用<script>标签的形式来引入 Vue,一直持续学习到vue-cli+webpack之后,才会通过npm + vue-cli + webpack的形式来带大家进行项目实战。

    本篇的内容主要包括以下 3 点:

    • 声明式渲染
    • 条件渲染
    • 列表渲染

    声明式渲染

    声明式渲染:允许采用简洁的模板语法声明式地将数据渲染进 DOM。

    用第01课中使用的事例,我们创建一个 index.html 文件,通过<script>标签的形式引入 Vue,body 中的代码如下:

    <div id="app">    {{ message }}  </div>  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>  <script>    var app = new Vue({      el: '#app',      data: {        message: 'Hello Vue!'      }    })  </script>

    通过在 data 字段中声明的 message 字段,然后通过{{}}双大括号的形式在id 为 app 的 div中展示出来,这样的一种方式,Vue 称它为声明式渲染,这种{{}}双大括号的形式可以称为 Mustache(这种方式最初是由 Mustache.js 提出的),并且当声明 message 发生变化的时候,渲染出的 dom 内容也会同步发生改变,可以在打开的 index.html 的控制台中,通过app.message = '改变message内容' 命令,来观察一下 DOM 内容的变化。

    我们刚才说了,声明式渲染为一种方式,也就是说所有符合通过简洁的语法来声明式的将数据渲染进 DOM 的方法,都属于声明式渲染的一种。比如把上面的代码略作修改:

    <div id="app">    {{ message }}    <span v-bind:title="spanTitle">我是一个span</span>    <img v-bind:src="imgSrc" v-bind:alt="imgAlt">  </div>  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>  <script>    var app = new Vue({      el: '#app',      data: {        message: 'Hello Vue!',        spanTitle: '我是span的title',        imgAlt: '我是一个img',        imgSrc: 'https://avatar.csdn.net/6/F/4/3_u011068996.jpg'      }    })  </script>

    我们新增了两个标签<span><img>,然后声明了三个数据 spanTitle、imgAlt 和 imgSrc,通过 v-bind 指令来把数据渲染到 DOM 中,其中的v-bind为 Vue 中的指令。在 Vue 中,所有带v-前缀的,都表示它们为 Vue 提供的特殊特性。

    我们刷新页面,可以看到声明出来的数据都已经被渲染到 DOM 中了:

    这里写图片描述

    这个时候如果细心的读者,应该可以发现,当我们去刷新页面的时候,声明的 {{ message }},会在 DOM 中一闪而过。

    这里写图片描述

    这是因为在 Vue 尚未编译到关联实例的时候,我们的指令还无法被解析。如果有使用过 jQuery 或者原生 JS 开发项目经验的话,那么应该知道我们一般在使用 jQuery 或者原生 JS 时,一般会监听$().ready(function)或者document.addEventListener("DOMContentLoaded", function);用于处理 DOM,而在 Vue 中使用的是虚拟 DOM 的方式,把这两者的运行速度进行一个简单的对比:

    <div id="app" >    {{ new Date().getTime() }}  </div><script>    document.addEventListener('DOMContentLoaded', function(event) {        console.log('DOMContentLoaded:' + new Date().getTime());    });  </script>

    通过{{}}语法直接去渲染编译完成之后的时间戳,然后去监听 JS 的 DOMContentLoaded 事件,并打印出当前的时间戳。

    通过对比可以发现 Vue 的编译速度是在 DOMContentLoaded 之前的,同时 Vue 提供了v-cloak指令,用来解决这种闪烁的问题。我们可以使用v-cloak配合 CSS 规则[v-cloak] { display: none }来隐藏未编译的 Mustache({{Mustache}})标签直到实例准备完毕。

    <div v-cloak>  {{ message }}</div><style>    [v-cloak] {      display: none;    }</style>

    条件渲染

    Vue 中的条件渲染指令主要包括以下两个:

    v-if v-show

    通过代码来看一下:

     <div id="app">    <div v-if="isIf === 1">        isIf为1的时候展示:{{isIf}}    </div>    <div v-else-if="isIf === 2">        isIf为2的时候展示:{{isIf}}    </div>    <div v-else>            isIf不为1或者2的时候展示:{{isIf}}        </div>    <div v-show="isShow">        当isShow为true的时候展示:{{isShow}}    </div>  </div>  <script>    var app = new Vue({      el: '#app',      data: {        isIf: 1,        isShow: false      }    });  </script>

    我们可以直接在控制台中通过app.isIf = 1/2/3; app.isShow = true;的方式来控制展示的效果。

    那么v-ifv-show的区别在哪里?通过渲染出的 element 来看一下。

    这里写图片描述

    通过 DOM 结构可以看出,v-ifv-else直接控制 DOM 是否被渲染,而v-show则是通过控制 css 的方式来控制 DOM 是否展示。

    v-if中,如果一开始条件为,则 Vue 什么也不会做,当条件变为的时候,Vue 才会去渲染这一部分 DOM,当条件再次变为的时候,与这一块相关的所有内容都会被从 DOM 树中删除掉。

    v-show则要简单的多,它仅仅是通过控制 css 中的 display 来控制 DOM 的显示和隐藏。

    列表渲染

    看一下 Vue 中的列表渲染v-for指令,可以通过item in items这种特殊语法的方式指令根据对象(数组或者是 object 对象)的选项列表来进行渲染,其中 items 为数据源,item 为每一条数据的别名,通过下面的代码来看一下。

    <div id="app">      <ul>          <li v-for="(item, index) in items" v-if="item.isShow" v-bind:key="index">            <p>{{index}}</p>            <p>{{item.name}}</p>            <p>¥{{item.price}}</p>          </li>      </ul>  </div>  <script>    var app = new Vue({      el: '#app',      data: {        items: [            {                name: 'android',                price: '12.00',                isShow: false            },            {                name: 'js',                price: '13.00',                isShow: true            }        ]      }    });  </script>

    如代码所示,通过一个v-for指令来便利了 items 数组,并且把它的每一条数据的别名定为 item,然后通过 isShow 字段来控制<li>标签的渲染,通过两个<p>标签来展示 name、price,其中的 index 为每一条数据的索引值,v-bind:key指令为每一条列表数据的唯一 id。当元素列表进行更新的时候,Vue 会根据绑定的v-bind:key=""key 的值来去决定 DOM 的复用策略。

    我们在控制台中可以通过app.items[0].isShow = true的方式,来控制第一条数据的展示;也可以通过app.items.push({name:'IOS', price: '14.00', isShow: true})的方式,来为 items 添加一条新的数据,新添加的数据会被立刻呈现到 DOM 列表中。

    v-for 指令不但可以便利数组,还可以便利 object 对象,看一下 object 对象是如何去便利的。

    <div id="app">        <ul>            <li v-for="(value, key, index) in dataSource" v-bind:key="index">              <p>                    {{ index }}. {{ key }}: {{ value }}              </p>            </li>        </ul>    </div>    <script>      var app = new Vue({        el: '#app',        data: {          dataSource: {              name: 'Vue',              price: '12.99',              type: 'javaScript'          }        }      });    </script>

    运行上面的代码可以看到,v-for指令把 dataSource 对象的属性进行了迭代。每一条属性提供了三个参数 value、key、index,运行上面的代码来看一下效果。

    在通过 v-for 去便利数组的时候,可以通过 push 方法修改数组数据的方式来让 DOM 渲染新的数据,那么在 object 中,是否也可以用同样的方式呢?我们来试一下,在控制台中通过app.dataSource.newKey = 'newKey'的方式来为 dataSource 对象添加一个新的字段。但是,新添加的字段并没有被展示出来,但是可以通过Vue.set(object, key, value)Vue.delete(object, Key)这种方法来为 dataSource 添加或删除响应式属性,比如可以在控制台中通过:Vue.set(app.dataSource, 'newKey', 'newKey') 这种方式来添加响应式属性。

    这是由于 JavaScript 的限制,Vue 不能检测到对象属性的添加或删除,下面列举一下 Vue 可以检测到的变化和无法检测到的变化。

    Vue 可以检测的变化

    现有数据字段的变化:item[0].isShow = true;通过Vue.set(object, key, value)的方式添加的属性通过Vue.delete(object, Key)的方式删除的属性push()pop()shift()unshift()splice()sort()reverse()filter()concat()slice()

    Vue 无法检测到的变化

    利用索引去设置新的数据时:items[indexOfItem] = newItem;直接修改数组的长度时:items.length = newLength;直接去添加或删除对象的属性:app.dataSource.newKey = 'newKey'

    点击了解更多《深入浅出学 Vue 开发》

    第03课:基础语法(下)
    第04课:Vue 的生命周期及源码实现
    第05课:动态数据计算
    第06课:Vue 中的常用 API 及源码分析
    第07课:Vue 中的组件—Component(上)
    第08课:Vue 中的组件—Component(下)
    第09课:如何实现一个响应式框架
    第10课:动画以及常用的动画库
    第11课:vue-devtools 及 Vue 中常用的组件库
    第12课:路由:vue-router
    第13课:状态管理:Vuex
    第14课:网络请求:Axios
    第15课:构建项目之前:Webpack
    第16课:构建项目:vue-cli
    第17课:自动对话系统(上)
    第18课:自动对话系统(下)

    阅读全文: http://gitbook.cn/gitchat/column/5b5b38219a3b4b3ca3085030

    展开全文
  • vue开发移动端app-学习记录

    千次阅读 2021-01-29 20:53:05
    H5与app的区别: H5就是移动端的web,手机的浏览器,所以vue开发的app是基于h5的基于手机浏览器的,虽然后面打包成app,但实际是运行在手机提供的浏览器上的。 原生app是用java写的,android studio写的。 vue编译...

    目录

    持续更新中,学到一点写一点😔

    1. 项目结构
    2. H5与app的区别
    3. 项目框架搭建
    4. 使用iconfont图标库
    5. 连接真机调试
    6. 打包apk发布
    7. 使用mint ui 组件
    8. 使用vant ui 组件
    9. 调用h5 + api
    10. Axios请求封装
    11. 偷师学艺:浏览器访问手机端网页并审查元素
      4
      项目结构
      在这里插入图片描述

    Vuex学习
    每一个 Vuex 应用的核心就是 store(仓库)。“store”基本上就是一个容器,它包含着你的应用中大部分的状态 (state)。你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。
    https://vuex.vuejs.org/zh/guide/

    npm install vuex --save

    项目的适配
    因为移动端设备屏幕大小,屏幕比例什么的差别比较大,所以移动端项目的适配问题就显得尤为重要,这里我们主要使用flexible.js进行适配,
    引入flexible.js,在main.js里引入flexible.js文件,可将flexible.js作为静态文件放在最外层static文件夹里引入,如下图在这里插入图片描述

    页脚标签。 router-link 导航标签。进行跳转 keep-alive 是 Vue 的内置组件,当它包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们

    1、window.location.href=URL : 在本窗体打开一个新的页面,也是最常用的一种方法;

    2、window.open(URL) : 在一个新的窗口打开一个新的页面;

    3、location.replace(URL) :本窗口的页面被替换为一个新的页面URL,替换后不可以回退到上个页面;

    4、localtion.assign(URL) :本窗口的页面转为为一个新的页面URL,与上一方法类似,但此方法可回退至上一页面。
    在这里插入图片描述

    执行过程:当用户点击 router-link 标签时,会去寻找它的 to 属性, 它的 to 属性和 js
    中配置的路径{ path: ‘/home’, component: Home} path 一一对应,从而找到了匹配的组件, 最后把组件渲染到
    标签所在的地方。

    vue.config.js配置文件
    vue.config.js 是一个可选的配置文件,如果项目的 (和 package.json 同级的) 根目录中存在这个文件,那么它会被 @vue/cli-service 自动加载。你也可以使用 package.json 中的 vue 字段,但是注意这种写法需要你严格遵照 JSON 的格式来写。

    H5与app的区别:
    H5就是移动端的web,手机的浏览器,所以vue开发的app是基于h5的基于手机浏览器的,虽然后面打包成app,但实际是运行在手机提供的浏览器上的。

    原生app是用java写的,android studio写的。

    vue编译成h5 ,h5打包成app,app运行在手机浏览器上。

    使用iconfont图标库

    SVG
    可缩放矢量图形(Scalable Vector Graphics)使你能够使用一组矢量与形状来描述图片,在显示时可提供无关大小的零失真的平滑缩放。

    调用h5接口,使用手机功能。

    https://blog.csdn.net/qianlixiaomage/article/details/104622151

    1.安装库
    cnpm i vue-awesome-mui -S
    如果没有cnpm那就npm吧!

    2、引入Mui

    main.js中引入
    import Mui from ‘vue-awesome-mui’;
    Vue.config.productionTip = false
    Vue.use(Mui);
    在new Vue中添加上Mui,
    在这里插入图片描述
    3、完成1、2、就可以在后面的vue文件中直接引用plus了。
    注意:
    plus只能在手机上使用,所以浏览器run dev没有使用。连接手机调试才能看到效果

    使用vant ui组件

    mint ui 实在太难用,开发者文档也没有演示的结果。决定用vant ui。

    npm install vant -S

    import Vant from ‘vant’
    import ‘vant/lib/index.css’
    Vue.use(Vant)

    记得导入css。

    van滑动单元格踩坑
    官方文档中,<template #right>,不行,要改成slot=“right”

     <van-swipe-cell right-width="65">
            <van-card
              num=""
              price="更新至xxx"
              desc="简介:七城战乱,邪神复苏的阴影笼罩在赤色大陆上空,家族争斗,对抗怪物,阶级跨越,人类一切的阴谋与仇恨,皆指向永夜传说,指向人与时间的诅咒。"
              title="小说名"
              class="goods-card"
              thumb="https://img01.yzcdn.cn/vant/cat.jpeg"
              @click="reading"
            />
            <template slot="right">
              <van-button square text="删除" type="danger"  class="delete-button" />
              <!-- <van-button square type="primary" text="收藏" /> -->
            </template>
          </van-swipe-cell>
    
    
    

    偷师学艺:浏览器访问手机端网页并审查元素

    电脑浏览器怎么访问网页的手机端呢?
    打开开发者工具,elements旁边有两个小手机框框,就可以切换成H5端.

    Hbuilderx创建5+app项目
    指向编译出来的dist

    连接真机调试
    打包,直接把dist下面的所有文件,复制到5+app项目下,运行/打包即可。
    真机调试:菜单-运行-运行到手机/模拟器-xxx手机

    打包apk发布
    选择发行=》原生App云打包=>然后选择打android的包,有ios的证书也可以打包为ios,android可以用免费的公用证书,开发者直接使用即可,具体选择如下,然后接下来等待即可。稍微等待之后,打包成功之后,会返回apk下载文件的下载链接,点击链接,把apk文件下载下来,然后发送到自己的android手机,安装在自己的手机上即可。

    展开全文
  • 基于vscode的vue开发

    千次阅读 多人点赞 2020-06-01 18:02:17
    与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,并且非常容易学习,是一个基于MVVM结构的轻量级框架,非常容易与其它库或已有项目整合。   安装vue需要借助npm指令集,...


       Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue采用自底向上增量开发的设计。Vue的核心库只关注视图层,并且非常容易学习,是一个基于MVVM结构的轻量级框架,非常容易与其它库或已有项目整合。
       安装vue需要借助npm指令集,所以一般会先安装node.js环境。

    一 下载node.js环境

      打开node.js的官网下载地址:http://nodejs.cn/download/
      选择适合自己系统的安装包,本文以windows x64系统为例。
    在这里插入图片描述
      下载安装包后正常安装,可以在安装过程中更换默认安装路径
      安装后,打开cmd,分别输入以下指令验证是否成功,下图显示版本号即为正常安装,其余为异常情况。
    在这里插入图片描述

    二 配置node.js和npm环境变量

      安装好之后,对npm安装的全局模块所在路径以及缓存所在路径,进行环境配置。是因为以后在执行类似:npm install express -g(后面的可选参数-g,g代表global全局安装的意思)的安装语句时,会将安装的模块安装到C:\Users\用户名\AppData\Roaming\npm路径中,占C盘空间。
      首先在node.js的安装路径中新建两个文件夹,分别作为缓存文件夹和全局安装文件夹。
    在这里插入图片描述
      在cmd中输入以下指令,设置缓存和全局安装文件夹为上述新建文件夹。请将D:\Program Files\nodejs替换为你自己的node.js的安装路径。

    npm config set prefix "D:\Program Files\nodejs\node_global"
    npm config set cache "D:\Program Files\nodejs\node_cache"
    

      打开“环境变量”。
      path变量中新增

    D:\Program Files\nodejs\node_global
    D:\Program Files\nodejs\node_global\node_modules
    

    三 配置cnpm

      经过测试,cnpm安装的组件可能存在问题,在此不建议使用cnpm!!!
      由于网络原因,国内访问npm的速度很慢,可以通过设置国内淘宝镜像来访问npm。
      打开cmd,执行以下指令。

    npm install -g cnpm --registry=https://registry.npm.taobao.org
    cnpm -v
    cnpm config set prefix "D:\Program Files\nodejs\node_global"
    cnpm config set cache "D:\Program Files\nodejs\node_cache"
    

      利用cnpm搭建express环境,打开cmd,执行以下指令。

    cnpm install express -g
    

    在这里插入图片描述

    四 使用vue-cli脚手架搭建vue开发环境

      安装全局 vue-cli 脚手架,用于帮助搭建 vue 框架的模板项目。
      打开cmd,执行以下指令(对于版本4以上的使用以下命令)。

    npm install -g @vue/cli
    

    在这里插入图片描述
      关闭cmd重新打开,执行以下命令,验证vue安装是否成功

    vue
    vue -V
    

      如果安装新版本vue,先卸载旧版本:

    npm uninstall vue-cli -g
    npm install -g @vue/cli
    npm install -g @vue/cli-init
    

    五 使用webpack打包工具,启动vue项目

      创建一个工作空间用于保存项目,比如本文使用D:\workspace\vs_workspace,打开 cmd,通过 cd 指令进入该目录,输入下面指令,创建 hellovue 项目;

    vue init webpack hellovue
    

      一路回车,除了vue-router选择yes,其余一律no(下面是开启了Eslint插件功能,如果不需要则在 eslint 选项选择no)。
    在这里插入图片描述

      一路确认后得到下图:
    在这里插入图片描述
      按照提示,执行后续cmd指令:

    cd hellovue
    npm install
    npm run lint -- --fix
    npm run dev
    

    在这里插入图片描述
      中间部分内容略
    在这里插入图片描述
      不要关闭cmd窗口,根据指令提示,访问网址:http://localhost:8080,可以看到vue的网页
    在这里插入图片描述

    六 vscode开发工具安装

      在vscode官网下载页面,下载vscode的安装程序,建议选择system版。
      为了最好的开发体验,您需要安装以下插件配合使用:
      可以参考这篇文章,写得很详尽。
      1、Vue 开发工具 Vetur
      用vue开发的必装,官方推荐,别纠结用哪个,就它了。
      作用:高亮.vue文件,附带有格式化功能,配合Eslint插件对代码进行格式化检查。
      2、代码规范监测 ESLint
      如果你想你(团队)的代码风格所有地方看起来都像是同一个人写的,就靠它咯
      作用:检查你的js、html、css代码,确保它们符合规范,并且代码风格保持一致性,强制性的规则,你少写一个空格或者多敲一个回车都会被严格的指出来,强迫症的福音,第一次用它的同学可能会抓狂,熟悉后你会感谢它
      使用:想让插件生效,你的项目还得做一番复杂的配置,好在vue-cli生成的项目帮我们把配置都生成好了,你也不必修改什么规则,直接用就行,在使用vue-cli生成webpack项目时会询问你是否启用eslint并且使用哪套规范,选择Standard规范就行:
    在这里插入图片描述
      它会自动在你的项目根目录下生成.eslintignore.eslintrc.js两个配置文件,package.json文件里增加下面的依赖:

    "eslint": "^4.15.0",
    "eslint-config-standard": "^10.2.1",
    "eslint-friendly-formatter": "^3.0.0",
    "eslint-loader": "^1.7.1",
    "eslint-plugin-import": "^2.7.0",
    "eslint-plugin-node": "^5.2.0",
    "eslint-plugin-promise": "^3.4.0",
    "eslint-plugin-standard": "^3.0.1",
    "eslint-plugin-vue": "^4.0.0",
    

      3、代码格式化插件Prettier - Code formatter
      上面三个插件,能够在保存时文件时自动格式化代码,运行项目时能够检测代码不规范的地方,针对上面三个插件的配置都已包含在了源码里面,只需安心编码即可~
      Vue.config.js说明
      代码生成器生成的Vue.config.js文件是已经配置好的,基本上不需要进行调整

    七 vscode集成npm开发vue项目

      启动vscode,点击“open folder”,选择刚才利用webpack打包生成的vue项目所在目录D:\workspace\vs_workspace\hellovue。
    在这里插入图片描述
      可以通过在Terminal控制台输入指令控制vue项目启动
    在这里插入图片描述

    八 搭建一个vue小页面(入门vue)

      我们先回溯一下上一次的进度:刚刚使用 vue-cli 建立了一个项目,这个项目内似乎东西很多,但是我们只需要关注 src 文件夹下的东西就行了,运行 npm run dev 以后,浏览器会自动弹出一个页面。
      我们要做的,就是开始理解Vue增删页面的模式,组件和路由(就是网页链接 URL)的跳转模式。

    1 大致理解Vue设计思想

      首先要理解的是 vue 的设计理念是怎样的?在我眼里,组件化是 vue 最为成功的一项涉及。组件化这个特性把一整个网站都打散成了很小的一个又一个部分。举个例子,看目前的目录下,有三个文件:整个项目目录下的 index.htm,src目录下的 App.vue,和 components 文件夹下的 HelloWorld.vue
      理解这三者的关系很重要,Index 是一个最外层的网站框架,它其实什么都没有,有一个 head,head 里边可以定义一些 CSS 一类的,然后 body 部分完全是空的,它仅仅载入了一个名字叫做 app 的 vue module。
      所以说 App.vue 这个东西,就是嵌套在 index.html 中的。然后我们再看 App.vue 文件写了些什么?

    <template>
      <div id="app">
        <img src="./assets/logo.png">
        <router-view/>
      </div>
    </template>
    
    <script>
    export default {
      name: 'App'
    }
    </script>
    
    <style>
    #app {
      font-family: 'Avenir', Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
    }
    </style>
    

    额外说一句,vue文件都是这个模式,一共由三个部分构成:上边的<template>包含有最终用户看到的按钮框框;中间的 <script> 定义了这个组件(module)所用到的数据和函数;后边的<style>定义了这个组件的样式等等。

      所以我们暂时只关注最上边的 <template>,其中只有两句代码比较核心:一行插入了一个图片,另一行写的是 <router-view/>。在这里,大概能猜到,App.vue里其实也差不多是空的,它只是给页面上添加了一个Logo而已,实质性的文章,都没有添加。那么我们看到的页面上的文字到底是哪里来的?它们全部在HelloWorld.vue文件里。App.vue调用了HelloWorld.vue这个组件,并将它显示在了Logo的下方,并且,是通过router来控制的显示,而不是直接插入组件。
      最后,我们打开router文件夹下的index.js:

    import Vue from 'vue'
    import Router from 'vue-router'
    import HelloWorld from '@/components/HelloWorld'
    Vue.use(Router)
    export default new Router({
      routes: [
        {
          path: '/',
          name: 'HelloWorld',
          component: HelloWorld
        }
      ]
    })
    

      这个 router文件是针对 App.vue的路由,对应的内容,全部都会显示在刚才看到的那一行中,在这里, App.vue会自动寻找这一些组件,比如,在目前的 index.js中,path显示的是”/”对吧?这就意味着,当页面打开到 App.vue,而没有增加其他的url后缀的时候 (http://localhost:8080/#/),App.vue会自动载入Hello这个组件,加载在那个Logo的下面。
      如果还不能理解,下面我们做一个小实验:
      你修改path的值为“/Hello”,那么你只有在(http://localhost:8080/#/Hello)才会重新看到刚才那个页面。而在(http://localhost:8080/#/)目录下,你会发现,只有一个logo,其他什么都没有。
      稍微总结一下

    1. 上述的小实验已经充分证明了,index.htmlApp.vueHelloWorld.vue之间的关系。一般来说,index.html是不用动的(顶多增加一些css头文件)。所以我们开始修改的其实文件就是App.vue,然后鉴于我们想要添加文件,所以需要修改router里边的index.js文件,最后鉴于我们要添加新页面和组件,我们还需要增加一些components文件夹里边的东西。
    2. 如果按照目前的index.js的结构,如果你怎么修改那个HelloWorld.vue文件,或者增加其他组件,它们只有一个归宿:就是躺在App.vue里的那个Logo图像的下面。因为App.vue是父组件,而HelloWorld.vue只不过是它的子组件。但是这并不意味着谁重要谁难写,因为如果你把App.vue里边那个logo那一行注释掉,App.vue就什么都无法呈现,仅仅是为HelloWorld.vue以及未来的一些页面提供了一个承载框架而已。
    3. 未来开发完的网站里,用户感觉上可能是一个页面和一个url的单独对应,就像是曾经的每一个PHP文件对应每一个url一样,但实际上,可能很多页面,都像HelloWorld.vue一样,仅仅是App.vue的子组件而已。
    4. 目前在App.vue里,有HelloWorld组件;以后我们在HelloWorld组件里,还可以插入其他的组件,当然不一定是这种使用router的办法,因为用这个模式,每一个组件都会有一个对应的url,如果你的页面上有三个tab,可能没有必要每一个tab对应一个url吧?但目前要理解的就是:我个人觉得Vue最核心的设计理念,就是把一个看起来很完整的页面,分散到了每一个组件,这个组件可能大道一个页面,HelloWorld.vue,也可能小到一个按钮,最终我们看到的页面,是这一群组件的堆砌的结果,这样做的一大好处就是,每一个组件都可以单独进行与数据库和用户的交互,开发更为清晰。

    2 初学vue-router

      继续,刚才我们通过修改 index.js 上的path,已经理解了,HelloWorld.vueApp.vue 的关系,以及网址和页面(或者说页面上的某一个部分)是如何对应上的。现在我们继续探索一下,如何在子页面上,添加路由。目前的局面是,App.vue 组件(它确实只是一个组件)下有 HelloWorld.vue 组件,而 HelloWorld.vue 的位置,是 App.vue 组件里面那个Logo的下面,下面我们用最快的速度再作出三个页面:
      修改router文件夹下的index.js文件:

    // router/index.js
    import Vue from 'vue'
    import Router from 'vue-router'
    import HelloWorld from '@/components/HelloWorld'
    import Home from '@/components/Home'
    import FirstPage from '@/components/FirstPage'
    import SecondPage from '@/components/SecondPage'
    
    Vue.use(Router)
    
    export default new Router({
      routes: [
        {
          path: '/',
          name: 'HelloWorld',
          component: HelloWorld
        },
        {
          path: '/Home',
          name: 'Home',
          component: Home
        },
        {
          path: '/FirstPage',
          name: 'FirstPage',
          component: FirstPage
        },
        {
          path: '/SecondPage',
          name: 'SecondPage',
          component: SecondPage
        }
      ]
    })
    

      在这个文件中,我们添加了三个路由,Home,FirstPage,SecondPage,现在cmd那边肯定在报错,因为我们还没有建立那个对应的那三个Page页面的vue文件。
      然后我们去components文件夹下,建立三个vue文件:Home.vueFirstPage.vueSecondPage.vue。内容几乎都一样,就三行,如下(每一个就只有中间的h1标签不同,其他都一样,中间那个分开写到三个页面里),这三个页面就是分别Home,FirstPage,SecondPage将要渲染到屏幕上的东西。

    // components/Home.vue
    <template>
      <h1> This is Home Page </h1>
      //<h1> This is First Page </h1>
      //<h1> This is Second Page </h1>
    </template>
    

      最后修改一下HelloWorld.vue页面,我们需要在其中加入链接,这样就可以点击某个按钮转移到新的界面了。(我多删了一些东西),让页面看起来更清爽一些:

    <template>
      <div class="hello">
        <h1>{{ msg }}</h1>
        <h2>Essential Links</h2>
        <ul>
          <router-link id="Home" to="/Home">Home</router-link>
          <router-link id="FirstPage" to="/FirstPage">FirstPage</router-link>
          <router-link id="SecondPage" to="/SecondPage">SecondPage</router-link>
        </ul>
        <h2>Ecosystem</h2>
          <li><a href="http://localhost:8080/#/Home" target="_blank">Home</a></li>
          <li><a href="http://localhost:8080/#/FirstPage" target="_blank">FirstPage</a></li>
          <li><a href="http://localhost:8080/#/SecondPage" target="_blank">SecondPage</a></li>
      </div>
    </template>
    
    <script>
    export default {
      name: 'HelloWorld',
      data () {
        return {
          msg: 'Welcome to Your Vue.js App'
        }
      }
    }
    </script>
    
    <!-- Add "scoped" attribute to limit CSS to this component only -->
    <style scoped>
    h1, h2 {
      font-weight: normal;
    }
    ul {
      list-style-type: none;
      padding: 0;
    }
    li {
      display: inline-block;
      margin: 0 10px;
    }
    a {
      color: #42b983;
    }
    </style>
    

      上边这一段代码中,我添加了六个可以点击的连接,前三个用的是vue推荐的router-link方式,后三个用的是最传统的href的方式。我个人只用前者,之所以放在这里是做比较用的。然后页面就成了这个样子。
    在这里插入图片描述
      可以看到,目前所有的页面,都是在那个Logo下面,这是因为HelloWorld.vueHome.vueFirstPage.vueSecondPage.vue,全部都是App.vue的下属组建。都是被放置在Logo下的,现在如果你去App.vue里把Logo删掉,它们就是看上去都完全不同的三个页面了。

    刚才已经我们成功地学会了如何添加页面,这样以后做网站如果页面不够,就用这办法可以一个一个地加,如果想要添加那种完全依赖url驱动的网页,例如/user:1,/user:2这样的,我目前还不会,但应该不会太难。

      下面我们尝试在一个子页面上添加组件:
      严格来说,这句话是病句,因为HelloWorld.vue就是一个组件,我们要做的,实在组件上再添加组件,那么路由因该怎么弄?刚才做的东西,就是可以让我们在App.vue这个父组件中更换页面了,那么如何在HelloWorld.vue页面中做到更换?如果能实现这一步,网站的所有链接跳转就都能实现了,网站无非有两种,页面直接切换,或者页面中的某个部件发生替换(就像是我们刚才在Vue那个大Logo下替换Home, FirstPage一样),所以我们需要学会如何在Vue的任何一个页面上,更换添加组件。
      下面以Home.vue为例。
      再打开router文件夹下的index.js,在之前写过的Home下面添加一个children路由:

    // router/index.js
    import Vue from 'vue'
    import Router from 'vue-router'
    import Hello from '@/components/Hello'
    import Home from '@/components/Home'
    import FirstPage from '@/components/FirstPage'
    import SecondPage from '@/components/SecondPage'
    import FirstPart from '@/components/HomeComponents/FirstPart'
    import SecondPart from '@/components/HomeComponents/SecondPart'
    
    Vue.use(Router)
    
    export default new Router({
      routes: [
        {
          path: '/',
          name: 'Hello',
          component: Hello
        },
        {
          path: '/Home',
          name: 'Home',
          component: Home,
          children: [
            {
              path: '/',
              name: 'FirstPart',
              component: FirstPart
            },
            {
              path: 'SecondPart',
              name: 'SecondPart',
              component: SecondPart
            }
          ]
        },
        {
          path: '/FirstPage',
          name: 'FirstPage',
          component: FirstPage
        },
        {
          path: '/SecondPage',
          name: 'SecondPage',
          component: SecondPage
        }
      ]
    })
    

      写完以后是上边这样子,我们在Home的路由中,又添加了两个子路由,FirstPart和SecondPart. 这里FirstPart的路由是”/”,代表着是默认选择,否则的话,一打开Home页面,FirstPart和SecondPart无法打开。
      然后在Home.vue组件中添加几行:

    <template>
      <div>
        <h1> This is Home Page </h1>
          <router-link id="FirstPart" to="/Home">FirstPart</router-link>
          <router-link id="SecondPart" to="/Home/SecondPart">SecondPart</router-link>
          <hr>
          <router-view/>
      </div>
    </template>
    

      这样,我们就规定了,从Home页面渲染的组件,都显示在<hr>那条线下面。

    <template>
      <div>
        <h2> This is First Part </h2>
      </div>
    </template>
    

      好了,然后再刷新页面,转到Home页面上,就可以看到:
    在这里插入图片描述
      这样,我们就成功地在Home页上又添加了两个小的页面。
      学会这一步以后,我们就可以随意地增删页面,而且页面上也可以添加更多的组件,一层一层地嵌套。在这里,我都是在用路由router来连接一个又一个的组件。而其实如果某个组件只有一个button一类的情况,用这种办法实在是没有必要。基本上,这种办法就适合架设比较大的一些页面:

    例如:我学Vue的目的是为了架设一个个人网站,我大概有主页,博客页,项目页,关于页,简历页等等,这些大页面毫无疑问是需要用这种路由来假设的。假如在我的项目页里,只有四五个项目,每一个项目都是那种占满整个网页的图表,那么我就可以在项目页里,再开4-5个路由单独指向每一个项目。其余的应该没有必要,直接在Vue中添加组件就行。

      下面的部分,就是有关于如何在Vue中直接Import组件。

    3 直接Import组件

      我们继续,鉴于我是想要写一个个人网站,现在我假设想要添加五个页面:主页,博客目录页,项目展示页,用户注册登录页,简历页,关于页。

    虽然只有六个页面,但是要想做好,要想的东西挺多的,因为vue不像是php,不能写了一半页面了,才开始想下一半页面该怎么做,而是一开始就要想清楚,每一个页面的架构是怎样的,甚至于,每一个图表,每一个按钮最终会放在哪一个组件中?用写文章来类比,原本用php写网页,就像是写流水账一样,写到中间下半部再怎么设计结尾都可以。但是用vue,就必须要先规定死,这篇文章,开头是哪一个组件?中间是哪一个组件?结尾是哪一个组件?某一些更细的组件(例如一列排比句)应该放在中间组件的哪一个部位等等。在这里写文档,我就先不这么认认真真地设计思考了,先尽快搭出框架来。

    4 引用一些CSS模板

      到现在要开始做页面了,如果纯靠手来code整个页面,实在是太累了,所以可以使用一些现成的页面组件。这里写的组件或者模板,和前文写的组件完全不是一个意思啊!这里的组件的意思是,BootstrapElementiView一类的东西。打开一看就懂了,都是一些已经写得很漂亮很漂亮的网页组件代码片段,只用引用相关的CSS文件和JavaScript文件就能用。

    有关于Vue的这类组件,似乎TalkingData的iView和饿了吗的Element做的最好。具体谁更好,我也不知道……随便抓了(Element)用起来,反正都没用过,有这方面经验的同学可以告诉我。

      首先打开CMD或者CMDer,在项目根文件夹下,输入:

    npm install element-ui -save
    

      这样的话Element组件就被安装到了Project里,打开main.js文件,在其中加入:

    import Vue from 'vue'
    import ElementUI from 'element-ui' //New Added
    import 'element-ui/lib/theme-chalk/index.css' //New Added
    import App from './App'
    import router from './router'
    
    Vue.config.productionTip = false
    Vue.use(ElementUI) //New Added
    
    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      router,
      template: '<App/>',
      components: { App }
    })
    

      这样我们就可以在整个项目都是用这一套组件了。

    5 写出导航条

      首先我们要写一个导航条,应该写在哪里呢?其实写在HelloWorld.vue或者App.vue中严格来说都可以,但是如果写在HelloWorld.vue中,以后添加Home, Register, Document, About等等页面,你都需要添加一次。所以还是写在App.vue中比较合适。
      我们先在components文件夹中新建一个AppComponents的文件夹,专门用来放置被直接加载到App.vue中的组件,然后在其中添加一个Navbar.vue文件,我们要在其中添加导航条。
      直接打开Element的页面开始抄袭。把整个导航条复制到我们Navbar.vue文件中。要稍微做一些调整,比如添加<template>。具体的文件如下:

    <template>
      <el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect"
                background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" router>
        <el-menu-item index="/">Home</el-menu-item>
        <el-menu-item index="WebSocket">Melsec</el-menu-item>
        <el-submenu index="3">
          <template slot="title">Projects</template>
          <el-menu-item index="3-1">Shiny</el-menu-item>
          <el-menu-item index="3-2">LearnVue</el-menu-item>
          <el-menu-item index="3-3">OtherProject</el-menu-item>
        </el-submenu>
        <el-menu-item index="4">Login</el-menu-item>
        <el-menu-item index="5">Resume</el-menu-item>
        <el-menu-item index="abouts">About</el-menu-item>
      </el-menu>
    </template>
    
    <script>
      export default {
        data () {
          return {
          }
        },
        //注意这里我是将它的改为这样的,效果是一样的,但使用这个可以在页面任何部位设置跳转时头部导航条部分样式会跟这变化即为选中,而不是不变的例如:你设置跳转到产品页导航条的样式也会跟着选中产品项
        computed:{
          activeIndex(){
            return this.$route.path.replace('/','')
          }
        },
        methods: {
          handleSelect(key, keyPath) {
            console.log(this);
            console.log(key,keyPath);
          }
        }
      }
    </script>
    

      此时index.js内容如下:

    import Vue from 'vue'
    import Router from 'vue-router'
    import HelloWorld from '@/components/HelloWorld'
    import WebSocket from '@/components/WebSocket'
    import Abouts from '@/components/AppComponents/Abouts.vue'
    
    Vue.use(Router)
    
    export default new Router({
      routes: [
        {
          path: '/',
          name: 'HelloWorld',
          component: HelloWorld
        },
        {
          path: '/WebSocket',
          name: 'WebSocket',
          component: WebSocket
        },
        {
          path: '/abouts',
          name: 'abouts',
          component: Abouts
        }
      ]
    })
    

    此时,可以发现,el-menu中加入了属性:router,el-menu-item中的 index 的值与 index.js 中的组件 path 是相同的,导航栏的跳转既是如此。

      然后,直接修改App.vue(因为导航条是要被放在App.vue里,这样所有的页面都能看到,而不用重新在每一个页面都重写)。改成这样:

    <template>
      <div id="app">
        <mynavbar/>
        <img src="./assets/logo.png">
        <router-view/>
      </div>
    </template>
    
    <script>
    import mynavbar from './components/AppComponents/Navbar.vue'
    export default {
      name: 'App',
      components: {
        mynavbar
      }
    }
    </script>
    
    <style>
    #app {
      font-family: 'Avenir', Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      margin-top: 0px;
    }
    </style>
    

      简单来说就是三步:

    1. import 那个组件。
    2. 添加到mynavbar到export中。
    3. 在div最上方写:<mynavbar/>,(修改一下下边的Style里边的那个margin-top为0px.)

      然后我们再打开http://localhost:8080,就已经变成了:
    在这里插入图片描述
      通过这种办法,我们只需要两步,就可以将一个组件添加到某一个大组件上,而不需要像之前一样很麻烦地调用路由。

    以后我们的页面基本上都是一堆组件的堆砌。用这种办法,我们就可以耐心地一点一点把巨大的页面架构起来。这种办法,比起曾经的PHP确实麻烦许多,但是如果项目大了,项目分离就很容易,每个人只需要负责一个组件就行了,完事儿了汇总在一起,就是一堆module的import。这就是使用Vue的目的。

      OK,通过这种办法,构建页面,转换路由已经没有问题了,下面还剩下的问题大概有:

    组件间通信,比如,目前的导航条,默认选择是Home,如果我换到了其他的网址,如何自动调整Navbar。

    九 npm run命令

      1、ERR引发的思考
      创建好的 vue 项目直接执行 vue run dev 报错?运行 vue run serve 就可以启动…如下

    npm run dev
    npm ERR! missing script: dev
    
    npm ERR! A complete log of this run can be found in:
    npm ERR!     E:\nodejs\node_cache\_logs\2018-12-12T15_06_08_674Z-debug.log
    

      2、dev build serve?
      其实npm run dev或者是npm run servenpm run xxx并不是一定要这么写。
      npm run XXX是执行配置在package.json中的脚本,比如:

    "scripts": {
      "serve": "vue-cli-service serve",
      "build": "vue-cli-service build",
      "lint": "vue-cli-service lint"
    },
    

      npm run xxx 中的 xxx 可以理解为键值对的 key,实际上 run 的是在 package.json 里面 scripts 配置的 value;
      比如,npm run serve 实际运行的是:vue-cli-service serve
      而放在 3.0 以前运行的则是:node build/dev-server.js文件;
      这时候我们再来看上边的问题是不是豁然了呢, scripts 中并没有配置 dev ,所以控制台报了 [ missing script: dev ] 的错误 ;
      3、总结
      npm run xxx,并不是你想运行就运行的,只有在package.json scripts 配置了,你才能 run 的,所以不是所有的项目都能 npm run dev/build。
      要了解这些命令做了什么,就要去scripts中看具体执行的是什么代码。
      这里就像是一些命令的快捷方式,免去每次都要输入很长的的命令(比如 serve 那行)
      一般项目都会有 build, dev, unit 等,所以起名,最起码要从名字上基本能看出来是干什么的。

    十 使用npm run build命令打包项目

    1 项目打包

      当我们使用vue-cli脚手架完成一个项目的时候,下一步肯定会想要怎么把这个项目放到互联网上或者本地直接打开呢,我们在本地调试的时候只要命令行执行npm run dev就可以把这个项目跑起来,但是现在我们要把他放到服务器上的话,用npm run build命令就可以啦。
      运行npm run build之后,会生成一个dist文件夹,里面的目录结构大概是这样的:
    在这里插入图片描述
      生成完的文件我们怎么来运行呢?直接在本地打开inde.html是无法运行的,打包的时候有提示:
    在这里插入图片描述
      构建文件应该通过HTTP服务器提供服务。
      所以我们要启动一个HTTP服务器才能够运行。选择一个HTTP服务器,可以直接使用Apache Tomcat和Nginx运行。

    2 npm run build发生了什么?

      npm run build命令的时候,首先package.json会将其解析为node build/build.js,执行这个目录,我们看看这个目录是什么!

    3 代开

      可以像打开静态网页一样打开项目,下图为打包生成的dist文件夹,其中index.html为入口文件:
    在这里插入图片描述
      没错,这时你打开了index.html文件,发现网页一片空白,打开F12发现console报了几个错误,状态码为404:
    在这里插入图片描述
      这是因为引用资源的路径问题,我们只要在下图的地方修改一下再打包就可以了。
      需要修改的文件在项目目录下的config文件夹里的index.js文件中。
    在这里插入图片描述
      改完,再次执行npm run build,然后打开index.html发现sucess。

    十一 vue项目使用websocket技术

    1 WebSocket 是什么?

      WebSocket 是一种网络通信协议。而且是在 HTML5 才开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

    2 为什么需要 WebSocket ?

      了解计算机网络协议的人,应该都知道:HTTP 协议是一种无状态的、无连接的、单向的应用层协议。
      HTTP的弊端:无法实现服务器主动向客户端发起消息,它不支持持久连接的。
      在websocket之前,传统的实现长轮询方法主要有: http long poll 或者ajax轮询。但轮询的效率低,非常浪费资源(因为必须不停连接,或者 HTTP 连接始终打开)。
      因此,一种新的通信协议应运而生—websocket,他最大的特点就是服务端可以主动向客户端推送消息,客户端也可以主动向服务端发送消息,实现了真正的平等。
    在这里插入图片描述
      websocket其他特点如下:
      (1)建立在 TCP 协议之上,服务器端的实现比较容易。
      (2)与 HTTP 协议有着良好的兼容性。默认端口也是80和443,并且握手阶段采用 HTTP 协议,因此握手时不容易屏蔽,能通过各种 HTTP 代理服务器。
      (3)数据格式比较轻量,性能开销小,通信高效。
      (4)可以发送文本,也可以发送二进制数据。
      (5)没有同源限制,客户端可以与任意服务器通信。
      (6)协议标识符是ws(如果加密,则为wss),服务器网址就是 URL。

    3 如何配置 WebSocket ?

      本篇主要讲解客户端的配置。而且没有必要为 WebSockets 使用 JavaScript 库。
      实现 WebSockets 的 Web 浏览器将通过 WebSockets 对象公开所有必需的客户端功能(主要指支持 Html5 的浏览器)。
      以下 API 用于创建 WebSocket 对象。

    var Socket = new WebSocket(url, [protocol]);
    

      以上代码中的第一个参数 url,指定连接的 URL。第二个参数 protocol 是可选的,指定了可接受的子协议。
      具体配置代码如下:

    <template>
        <div>
            <button @click="send">发消息</button>
        </div>
    </template>
    
    <script>
    export default {
        data () {
            return {
                path:"ws://192.168.0.200:8005/qrCodePage/ID=1/refreshTime=5",
                socket:""
            }
        },
        mounted () {
            // 初始化
            this.init()
        },
        methods: {
            init: function () {
                if(typeof(WebSocket) === "undefined"){
                    alert("您的浏览器不支持socket")
                }else{
                    // 实例化socket
                    this.socket = new WebSocket(this.path)
                    // 监听socket连接
                    this.socket.onopen = this.open
                    // 监听socket错误信息
                    this.socket.onerror = this.error
                    // 监听socket消息
                    this.socket.onmessage = this.getMessage
                }
            },
            open: function () {
                console.log("socket连接成功")
            },
            error: function () {
                console.log("连接错误")
            },
            getMessage: function (msg) {
                console.log(msg.data)
            },
            send: function () {
                this.socket.send(params)
            },
            close: function () {
                console.log("socket已经关闭")
            }
        },
        destroyed () {
            // 销毁监听
            this.socket.onclose = this.close
        }
    }
    </script>
    <style>
    </style>
    

    十二 问题

    1 ‘webpack-dev-server’ 不是内部或外部命令,也不是可运行的程序

      命令:npm install webpack-dev-server --save-dev

    2 npm安装模块遇到ENOENT: no such file or directory, rename错误

      照Github上面的一个老外的说法:

    Besides deleting package-lock.json the other workaround here is to upgrade to node-sqlite3@4.0.2

      大意就是把其他地方的package-lock.json删了。

    3 vue与vue-cli

      vue是框架名称,vue也是vue-cli在终端里面的命令;
      vue-cli是vue框架开发的快速工程化命令工具;
      @vue/cli是vue-cli的最新的npmjs的包的名称。

    展开全文
  • vue开发微信公众号---开发流程

    千次阅读 2020-10-15 11:22:23
    vue[微信公众号开发------开发前内容准备]

    作为一个web开发者,今天第一次开发微信公众号,本文章仅记录本次开发心得。

    第一步:认识微信公众号开发

    首先要认识微信公众号开发,本质上是H5手机页面的开发,但其开发方式要准备的东西又有所不同,因此开发前的准备工作要做好。
    如果是vue开发的前后端分离项目,实际上前端就是将h5网站发布到线上然后使用域名访问而已,其中和真正的h5发布区别是多了微信授权以及微信api等一些功能而已

    第二步:准备微信公众号开发所需的东西

    1、准备开发所需的内网穿透工具及其开发配置

    认识微信访问网站的方式
    微信公众号访问网站项目都是通过正式域名来进行访问的。因此我们要准备好域名,然而开发过程中是不可能直接给正式域名的,因此我们需要一些工具的帮助
    认识内网穿透
    我使用的vue脚手架搭建的项目,因此项目启动后都可以通过本地路径访问项目。如:
    在这里插入图片描述
    使用浏览器访问:http://10.101.80.134:80 即可进入项目。
    然而其他人通过外网要访问这个路径是做不到的。而内网穿透工具可以帮助我们实现要求。
    内网穿透工具帮你可以使用外网访问本地项目,并且提供访问域名。
    内网穿透工具现在市场上有不少,如ngrokqydev飞鸽 … 等一些工具,我开发使用的是ngrok,因此这里仅做ngrok的说明

    1. 首先进入ngrok

      http://www.ngrok.cc 或者百度搜索

    2. 然后注册一个账号,并且登录进去
      在这里插入图片描述
      这里可以选择查看教程来学习(通常开了付费通道速度会快很多),如果完成了有如下的内容:
      在这里插入图片描述
      注意:
      开通的隧道端口内容要与本地的ip和端口对上
      协议选择http即可,前缀域名随你填。
      完成之后隧道id和赠送域名要留着有用

    3. 下载客户端,然后解开压缩进入文件夹在这里插入图片描述
      点击.bat文件打开放上隧道id即可
      在这里插入图片描述
      这样就准备好第一个内容了。此时可以直接使用赠送域名通过浏览器访问本地。

    2、准备微信开发测试号以及测试号相关的配置

    https://editor.csdn.net/md?articleId=109066238

    3、准备微信开发者工具,使用公众号网页模式,并且使用关注了测试号的那个微信登录,使用赠送域名访问即可

    第三步:使用vue开发H5页面

    使用vue-cli3脚手架搭建的一个简单的移动端项目
    我使用的配置是:

    vue
    vue-router
    vant(移动端UI框架)
    axios
    weixin-js-sdk(微信公众号接口api,调用内置接口必须使用的,:扫码)
    

    weixin-js-sdk 使用方式

    npm install weixin-js-sdk
    
    // vue组件中
    var wx = require('weixin-js-sdk');
    
    // 需要使用对应api的方法中,参考官网
    wx.config({
    	.....
    })
    

    vue中开发公众号其实和移动端H5页面开发差不多,现在就可以开始开发公众号了。

    开发疑问
    1、需不需要开发微信公众号底部的菜单栏?
    答: 不需要,微信公众号底部的菜单栏都是通过微信的菜单相关的接口进行生成的。
    https://developers.weixin.qq.com/doc/offiaccount/Custom_Menus/Creating_Custom-Defined_Menu.html
    直接使用postman根据其要求填入内容生成即可,注意:url必须要完整的路径,如http://xxx.vip3gz.idcfengye.com/#/register
    项目内的跳转和PC的跳转是一样的如:$router.push(’/register’);

    2.通过微信接口生成了菜单,但微信开发者平台为什么没有展示出底部菜单?
    微信接口生成的菜单只是在进入微信公众号的时候才看到的,而点击内容后仅是做了一个页面跳转,因此开发时不需要管什么底部菜单。如:
    在这里插入图片描述
    进入此页面,页面本身没底部菜单的。而顶部菜单仅仅只是用于返回
    在这里插入图片描述
    3、顶部菜单栏要怎么定义?
    微信公众号,顶部菜单是固定的,没办法自定义。左边固定是返回按钮,右边固定是分享按钮。中间标题由当前页面的html文件的title属性决定
    在这里插入图片描述
    所以开发过程中不需要在意什么底部的菜单和顶部栏之类的。

    vue开发微信公众号—JS-SDK授权以及api的使用方式

    vue开发微信公众号—微信测试号

    vue开发微信公众号—测试号菜单生成

    vue开发微信公众号—手机访问被微信拦截

    展开全文
  • 公司需要开发一款移动端的app,奈何团队没有ios技术,工期比较短,所以选择使用vue开发HTML5经过打包处理形成移动端app。 项目构思 1 项目整体使用Vue+HbuilderX开发 2 Vue实现基本页面跳转,增删改查等app基本功能,...
  • 前面我把vue项目搭建好了,接下来的事情就是对项目进行开发了,不过开发之前我们需要好的工具,这里我特别喜欢vscode这款软件,相当的好用,它支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义快捷键、...
  • Vue开发工具

    千次阅读 2019-01-14 19:11:40
    vetur 语法高亮、智能感知 VueHelper vue代码碎片 Vue 2 Snippets vue2代码碎片 导入工程 以vue项目为例 在vscode ide中选择"文件"-->"打开文件夹" 将构建好的vue工程导入 image 开发组件 安装vue相关插件之后,...
  • 从零开始搭建Vue开发环境(windows)

    千次阅读 2020-09-20 22:12:57
    与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层。目前是一些互联网公司组六的前端框架。 二、 搭建步骤 1 搭建node环境 node下载地址:http://npm.taobao.org/mirrors/node,...
  • Vue开发小程序的框架

    万次阅读 2017-12-06 15:10:23
    在尤大微博铺垫着“将会引入一些关于 TypeScript 的改进”一周之后,代号为 Level E 的 Vue.js 2.5 带着日漫风来到了我们眼前。从 Release Notes 可以看到,Vue.js 2.5 有着更好的 TypeScript 集成,更好的错误处理...
  • 推荐一本Vue开发的书籍

    千次阅读 2020-09-29 11:36:51
     本书旨在让初学者能够快速上手vue技术栈,并能够利用所学知识独立动手进行项目开发。我的写作风格一向都是喜欢采用理论和实践相结合的方式,这样学习起来不会那么枯燥,而且极具成效。时间是很宝贵的东西,所以...
  • VSCode搭建VUE 开发环境

    万次阅读 2020-03-26 17:07:19
    五、安装vue-cli脚手架 npm install -g @vue-cli cnpm install -g @vue/cli 接下来就可以使用vue-cli来构建项目 六、安装webpack cnpm install -g webpack 七、用vue-cli构建项目 方式一:命令行创建 首先选定目录,...
  • vue 开发过程中常遇到的问题总结 1. props单向绑定 vue中的props是单向绑定的,父组件的属性变化时会传递给子组件,子组件内部不应改变props的值,否则控制台会给出警告。 但如果props的类型为数组或者对象时,在...
  • 如何搭建Vue开发环境的步骤

    千次阅读 2019-05-07 11:25:08
    相信很多人在刚开始学习Vue这个框架的时候,在最开始搭建开发环境的时候,都会遇到一些大大小小的坑,要是隔断时间想要重新搭建第二次的时候,难免会有一些混乱,所以今天想整理出来;
  • Vue开发微信小程序

    千次阅读 2020-05-12 11:29:25
    安装VueVue-cli脚手架 参考:Windows安装Vue 二.安装HBuilder X【方便快速上手】 1.下载 2.解压【无需安装】 3.点击执行【根据需要创建桌面快捷方式即可】 4.创建项目 5.选择小程序 创建成功如下: 三.注册...
  • 项目现在要试用hybird模式,需要重新把web前端拾起来了,前端开发框架打算采用现在发展很迅速的Vue框架,下面介绍下它的环境的配置。 1.安装和配置NodeJS 去nodejs官网下载最新的版本,我的是windows系统,下载的...
  • Vue开发工具安装

    千次阅读 2019-08-28 13:53:26
    我们现在要使用的事Vue 所以找到Vue组件Vetur  点击install会自动弹出vscode 在vscode 中在点击install  vscode 中vue相关插件 有需要的可以去商店安装 vetur 语法高亮、智能感知 ...
  • Vue开发React Native应用详解

    千次阅读 2019-04-09 20:41:42
    自从2015年4月React Native 发布以来后,关于移动跨平台的话题就层出不穷,不管是大公司还是小公司都在开始使用React Native 来开发跨平台App。不过,也有公司对React Native 并不看好,如Airbnb在去年就开始宣布弃...
  • 一、下载node.js:在搭建vue开发环境之前,一定要先下载node.js,,vue的运行是要依赖于node的npm的管理工具来实现,node可以在官网或者中文网里面下载,根据自己的电脑选择是32还是64 ,下载地址:...
  • 使用Vue开发Chrome扩展

    千次阅读 2019-05-14 13:20:14
    使用Vue开发Chrome插件的模板 最近看了一些Chrome 插件开发的内容, 想要使用Vue的单文件来编写,但是没有现成的webpack打包方式,自己写了一个,第一次自己编写webpack的配置文件。github 目录结构 │ .babelrc.js ...
  • (一)vue开发环境配置及idea集成vue

    万次阅读 多人点赞 2018-11-28 14:41:23
    以前的工作主要侧重后端的业务逻辑开发,再加上对css,js莫名的不喜欢。... vue开发环境搭建 项目创建运行命令 IntelliJ IDEA配置VUE开发环境 项目导入idea 项目发布  vue开发环境搭建 安装no...
  • mac版搭建vue开发环境

    千次阅读 2019-01-11 15:59:04
    记一次macbook搭建vue开发环境 步骤:(五步走) Homebrew (mac系统下的包管理器) node.js (javascript运行环境-runtime) npm (nodejs下的管理器) webpack (构建工具) vue-cli (用于生成模板的vue工程...
  • 【RuoYi-Vue】搭建RuoYi-Vue开发环境

    千次阅读 2020-10-02 12:04:22
    我这里搭建的是RuoYi-Vue前后端分离版, 官网地址是:https://doc.ruoyi.vip/ruoyi-vue/ 1、安装后台项目依赖 安装:JDK 8+,并设置好环境变量 安装:Intellij IDEA(或Eclipse) 安装:Maven3.3.9+,并设置...
  • Vue开发环境代理设置

    千次阅读 2018-11-27 18:31:08
    Vue开发环境代理设置 1. 代理跨域设置: // config-&gt;index.js中设置 proxyTable:{ '/apis': { target: 'http://study.my', //设置你调用的接口域名和端口号 别忘了加http changeOrigin: true, //开启...
  • 目录1.开场白2.安装3.主要用法3.1启动/切换Troll编辑器3.2编辑视图切换切换到Troll编辑切换到...今天向大家推荐一个Vue开发辅助工具Troll,这是一个VSCode插件。 Troll工具的主要优点: 能够把.vue文件中的<te...
  • 使用Vue开发微信小程序:mpvue框架

    千次阅读 2019-08-22 17:00:11
    使用mpvue开发小程序教程(六) 使用mpvue开发小程序教程(五) 使用mpvue开发小程序教程(四) 使用mpvue开发小程序教程(三) 使用mpvue开发小程序教程(二) 使用mpvue开发小程序教程(一) 接触微信小程序...
  • HTML文件引入Vue开发

    千次阅读 2019-11-23 17:35:28
    HTML文件引入Vue开发 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>页面标题</title> <script src=...
  • webstorm vue开发配置

    万次阅读 2019-05-29 18:04:55
    时间略长 安装语句为:cnpm install --global vue-cli 验证命令:vue -V (V要大写) 5.下面开始使用WebStorm 重要的一点,想用WebStorm创建项目得安装git。 安装很简单,官网找到下载安装即可,否则可能出现安装不...
  • vscode vue开发环境搭建

    千次阅读 2019-06-09 18:12:00
    以前仅了解过VUE但没有真正上手过,现在因为工作需要准备再近几个月里系统的学习一下这款超火的前端框架,希望大佬们指教。 ----------------------------------------------------------------- 平时比较喜欢使用...
  • vue开发环境搭建(WebStorm)

    万次阅读 2019-03-06 15:46:55
    一、安装Node.js,搭建Vue环境 1、访问Node.js官网(https://nodejs.org/en/download/)进行安装包下载。 2、下载成功之后运行安装程序,进行安装。 如果是用安装程序进行安装,在安装过程中会自动进行Nodejs环境...
  • IDEA安装vue开发插件

    千次阅读 2019-02-28 08:26:03
    作者:PC.aaron 出处:http://www.cnblogs.com/aaron-pan/ 1.File&gt;settings 2.Plugins&gt;输入vue&gt;Search in repositories(在仓库中搜索) 3.重启idea即可

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 254,446
精华内容 101,778
关键字:

vue开发

vue 订阅