Vue.js入门学习


=Start=

缘由:

对于一名开发来说,如果想向外证明你的工作量、能力,一方面要靠各种数据等硬指标来直接说明,另一方面就要靠你做的产品的界面来间接体现了。而且,更多时候,提供给别人的使用界面可能(相比于他们看不见摸不着的后端接口而言)更能影响别人对你工作的认知和评价。

最近手上的事情没那么多了,考虑学习一下Vue.js,方便在更新/改版的时候把自己想到的一些前端展现效果加进去。

正文:

参考解答:

这里插一句题外话,学习各种新技术、知识的时候,学习的最佳参考肯定是官方文档;但是官方文档一般只会教给你一些基础、语法方面的知识,如果想拿来实战,用于项目、产品级别的开发,就会发现差的还挺远的。特别是当你是该领域的新手时,经常会碰到——QuickStart文档内容也不多,基础知识也很简单,但是实际在搭建环境过程中可能会遇到各种各样的问题。

所以除了官方文档之外,我一般还会再找几篇其它人写的:xxx新手入门攻略、xxx环境搭建手册……这样的文章。希望在别人的帮助下能少走点弯路,因为新人最需要的是快速入门提高兴趣和自信,而不是一开始就被各种诡异的环境问题困扰,迟迟找不到感觉;在度过了新手期之后,再遇到什么问题也就不会慌乱了。这次学Vue.js找到的不错的新手入门攻略就是:Vue2.0 新手完全填坑攻略——从环境搭建到发布

好了,下面进入正题:

一、Vue.js是什么?

Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

概阔来讲就是——Vue.js是一个前端框架,易于上手&与第三方库或项目整合。

二、Vue.js的特点/好处是什么?

数据绑定

比如你改变一个输入框 Input 标签的值,会自动同步更新到页面上其他绑定该输入框的组件的值。

组件化

页面上小到一个按钮都可以是一个单独的文件.vue,这些小组件直接可以像乐高积木一样通过互相引用而组装起来。

前期你可以不用明白它的特点、好处是什么?以及它为什么会有这些特点、好处?你只要知道它的特点是什么就行,后续接触的类似东西多了自然而然的就懂了,前期纠结于这个没啥用且浪费精力和时间(这是我个人的一个经验之谈,不一定适用于所有人)。

三、Vue.js的安装

因为现在习惯于Mac环境办公,所以接下来的各种操作默认是在Mac环境下进行的。

①先安装Homebrew(如果已安装了的话可以跳过):

$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

②用Homebrew来安装nodejs:

# 查看、安装、升级 nodejs
brew info nodejs
brew install nodejs
brew upgrade node

# 查看安装的nodejs的版本
node -v

# 查看安装的npm的版本
npm -v

③获取nodejs模块安装目录访问权限

sudo chmod -R 777 /usr/local/lib/node_modules/

④安装淘宝镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org

⑤安装webpack

# -g选项指的是「全局安装」,即一次安装其它地方也能用
cnpm install webpack -g

⑥安装vue脚手架

npm install vue-cli -g

⑦专门找一个目录用于存放项目代码/文件

cd /path/to
mkdir learn_vue
cd learn_vue

⑧根据模板创建项目

# 这里的 vue2_project 是工程名字,注意不能用中文
vue init webpack-simple vue2_project

# 或者创建 vue1.0 的项目,工程名字也不能用中文
vue init webpack-simple#1.0 vue1_project

# 执行上面的命令过程中会有一些初始化的设置,一般情况下默认Enter就好

⑨cd 命令进入创建的工程目录&安装一些项目依赖

cd vue2_project

# 一定要从官方仓库安装,npm 服务器在国外所以这一步安装速度会很慢。
npm install

# 不要从国内镜像cnpm安装(会导致后面缺了很多依赖库)
cnpm install

# 安装 vue 路由模块vue-router和网络请求模块vue-resource
cnpm install vue-router vue-resource --save

⑩启动项目

npm run dev

# 填坑(以下坑可能由于 vue2.0 导致其他相关编译打包工具没更新导致的)
#【重点】后来发现这些坑是由于 npm 不是最新的版本3.10.2, 用 npm 3.9.5就会出现以下坑
# 解决办法: 请运行以下命令
npm update -g

环境问题解决办法概述

遇到:

Module build failed: Error: Cannot find module ‘模块名’

那就安装:

cnpm install 模块名 –save-dev(关于dev环境的,表现为 npm run dev 命令启动不了)

cnpm install 模块名 –save(关于项目的,比如main.js,表现为 npm run dev 执行成功之后控制台报错)

比如escape-string-regexp、strip-ansi、has-ansi、is-finite、emojis-list

四、开发环境搭建/配置

我还是习惯于使用较为轻量级的Sublime Text3,在进行Vue项目开发时,需要安装一些代码高亮插件,比如:Vue Syntax Hightlight。

安装方法:
第一,在 SublimeText 中打开 PackageControl ,快捷键 Command + Shift + p 。
第二,打开 Install Package 窗口 输入 "in" 选择第一个。
第三,输入在弹出框输入 vue 选择插件 Vue Syntax Hightlight 。

五、使用官方文档学习基础

六、使用简单示例学习Vue组件

七、使用简单示例学习使用Vue开发单页应用

八、使用简单示例学习使用Vue获取动态数据

九、使用简单示例学习Vue的UI框架ElementUI的使用

以上的几个示例、知识点都不算复杂,但建议前期都自己敲一遍,遇到不懂的先记下来,多动手尝试、多对比,很多知识自然而然的就记住了。前期,快速入门是最重要的,它会给你建立兴趣和信心,帮助你的进一步学习。

 

参考链接:

=END=

,

《“Vue.js入门学习”》 有 20 条评论

  1. 使用 axios 访问 API
    https://cn.vuejs.org/v2/cookbook/using-axios-to-consume-apis.html

    关于Vue实例的生命周期created和mounted的区别
    https://segmentfault.com/a/1190000008570622

    Vue生命周期中mounted和created的区别
    https://blog.csdn.net/xdnloveme/article/details/78035065
    `
    created:在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图。

    mounted:在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作。
    `

  2. 一文读懂vue响应式系统实现过程
    http://jinge.red/vue-reactive/
    `
    1. 概述
    2. 将数据变成响应式
    3. 收集监听者
    3.1. Dep
    3.2. watcher
    3.3. 再看getter
    3.4. 总结
    4. 通知监听者更新
    4.1. setter
    4.2. dep.notify
    4.3. watcher.update
    5. computed属性实现原理
    5.1. 计算属性的初始化简介
    5.2. 计算属性的求值
    5.3. computed watcher的更新:再看update
    6. 总结
    `

  3. 面试官:前端跨页面通信,你知道哪些方法?
    https://segmentfault.com/a/1190000018731597
    `
    引言

    一、同源页面间的跨页面通信
    1. BroadCast Channel
    2. Service Worker
    3. LocalStorage
    小憩一下
    4. Shared Worker
    5. IndexedDB
    小憩一下
    6. window.open + window.opener
    小憩一下
    二、非同源页面之间的通信

    总结
    对于同源页面,常见的方式包括:
    广播模式:Broadcast Channe / Service Worker / LocalStorage + StorageEvent
    共享存储模式:Shared Worker / IndexedDB / cookie
    口口相传模式:window.open + window.opener
    基于服务端:Websocket / Comet / SSE 等

    而对于非同源页面,则可以通过嵌入同源 iframe 作为“桥”,将非同源页面通信转换为同源页面通信。
    `

  4. 5种处理Vue异常的方法
    https://blog.fundebug.com/2019/06/17/handling-errors-in-vuejs/
    https://www.raymondcamden.com/2019/05/01/handling-errors-in-vuejs
    `
    为了测试各种异常处理技巧,我故意触发三种类型的错误。
    第一种:引用一个不存在的变量。
    第二种:将变量绑定到一个被计算出来的属性,计算的时候会抛出异常。
    第三种:执行一个会抛出异常的方法。
    在继续之前,我想声明上面 3 个例子并不代表所有类型的错误。这 3 种是比较常见的错误。

    我个人建议官方应该有详细的介绍。总的来说,Vue 中异常处理包含以下几个方面的技巧:
    errorHandler
    warnHandler
    renderError
    errorCaptured
    window.onerror (不仅仅针对 Vue)
    `

  5. npm install 国内镜像
    https://segmentfault.com/a/1190000007829080

    NPM 国内慢的问题解决
    https://juejin.im/post/5c1cafe8f265da612638213f
    https://www.runoob.com/w3cnote/npm-slow-use-cnpm.html
    `
    方法一:
    更改npm配置文件:
    npm config set registry https://registry.npm.taobao.org

    方法二:
    你可以使用淘宝 NPM 镜像定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:
    $ npm install -g cnpm –registry=https://registry.npm.taobao.org
    这样就可以使用 cnpm 命令来安装模块了:
    $ cnpm install module_name
    `

  6. 关于前端学习路线的一些建议(内含经典自测题)
    https://juejin.im/post/5d4ebe8b6fb9a06acc0074a3
    `
    目录

    三大件学习
      CSS & HTML
        关于 CSS(3) 你需要了解的一些知识点
      HTML(5) 你需要了解的一些知识点
      JavaScript
        JavaScript(ES6+) 你需要了解的一些知识点
      CSS & HTML & JavaScript 推荐书籍/网站
    库工具
    前端框架( MVVM )的学习
      一些问题
      Vue 和 React 我该选择哪一个?
      Vue 相关资料
    浏览器 & 计算机基础
      为何要学习浏览器工作原理?
      计算机基础
      需要了解的一些知识点
      浏览器 & 网络基础推荐书籍/资料
    前端工程化
      前端工程化的一点浅见
        模块化
        组件化
        规范化
      前端工程化一些知识点
    性能优化
      性能优化一些知识点
      推荐资料
    Nodejs
      Nodejs 一些知识点
    数据结构和算法

    依葫芦画瓢
    我们在项目开发的过程中可以接触到很多优秀的库工具或者是 UI 库。如 lodash、underscore、moment、element-ui、antd design 等。
    我们可能自己设计不出来这么优秀的工具,但是我们完全可以依葫芦画瓢自己按着这些工具写一遍,你就会发现里面有很多不可思议的技巧、优秀的思想。
    依葫芦画瓢对学习来说也是一个非常有用的技巧。
    `

回复 hi 取消回复

您的电子邮箱地址不会被公开。 必填项已用*标注