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 。

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

https://cn.vuejs.org/v2/guide/

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

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

Vue Router 起步
https://router.vuejs.org/zh/guide/#html
Vue.js 路由
http://www.runoob.com/vue2/vue-routing.html
从零开始简单的路由
https://cn.vuejs.org/v2/guide/routing.html
vue-router 基本使用
https://www.cnblogs.com/SamWeb/p/6610733.html

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

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

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

参考链接：

=END=

30 6 月, 2018

Docker

KnowledgeBase, Programing

ElementUI, Vue.js