Vue 与 Vue-cli 的学习

学习vue

1.什么是vue?

vue是一套构建用户界面的渐进式框架，Vue 只关注视图层， 采用自底向上增量开发的设计。Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。是基于MVVM（M:model V:view VM:viewmodel）设计模式，支持数据的双向绑定(v-model)

有三种安装使用方法

1. 下载 vue.js 直接引用

   <script src="vue.js"></script>
   

2. 通过 CDN 加载

   <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.7/vue.min.js"></script> (压缩版)
   <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.7/vue.js"></script>（开发版，适合测试用）
   

3. npm 指令安装

   下面内容就是基于这个方法去学习vue的

2.什么是npm?

npm 是 Node.js的包管理工具，用来安装各种 Node.js 的扩展。也是世界上最大的软件注册表，有超过 60 万个 JavaScript 代码包可供下载，每周下载约 30 亿次。npm 让 JavaScript 开发人员可以轻松地使用其他开发人员共享的代码。

3.什么是node.js？

• Node.js 是一个跨平台的 JavaScript 运行时环境。
• Node.js 使用高效、轻量级的事件驱动、非阻塞 I/O 模型。
• Node.js 的生态系统是目前最大的开源包管理系统。
• Node.js 是一套用来编写高性能网络服务器的 JavaScript 工具包。
• 在 Node 中，Http 是首要的，Node 为创建 http 服务器作了优化，在网上看到的大部分示例和库都是集中在 web 上 (http 框架、模板库等）。

4.学习nvm（推荐）

nvm全英文也叫（node.js version management），是一个node.js的版本管理工具。

为什么学习 nvm 呢？

上面说了，它是一个node.js的版本管理工具。在使用npm学习vue时，很大概率是会遇上哪些版本限制问题，为了解决node.js各种版本存在不兼容现象可以通过它可以安装和切换不同版本的node.js。（这里提一嘴，安装了 node.js 是会顺带安装好对应版本的npm的）。

nvm 下载与安装

在GitHub上搜索nvm-windows，然后找到release即可下载。也可以点击下面网址[https://github.com/coreybutler/nvm-windows/releases]，选择下载 nvm-setup.zip（免配置，推荐使用）。打开安装即可，注意安装路径按默认的即可（不然，你需手动配置相应的环境变量）。

在 nvm 中安装NodeJS

• nvm list available 显示可下载版本的部分列表
• nvm install latest 安装最新版本
• nvm install x.x.x 安装指定的版本的nodejs (推荐使用)

nvm 命令提示(常用)

• nvm arch：显示node是运行在32位还是64位。
• nvm install <version> [arch] ：安装node， version是特定版本也可以是最新稳定版本latest。可选参数arch指定安装32位还是64位版本，默认是系统位数。可以添加–insecure绕过远程服务器的SSL。
• nvm list [available] ：显示已安装的列表。可选参数available，显示可安装的所有版本。list可简化为ls。
• nvm on ：开启node.js版本管理。
• nvm off ：关闭node.js版本管理。
• nvm proxy [url] ：设置下载代理。不加可选参数url，显示当前代理。将url设置为none则移除代理。
• nvm node_mirror [url] ：设置node镜像。默认是[https://nodejs.org/dist/]。如果不写url，则使用默认url。设置后可至安装目录settings.txt文件查看，也可直接在该文件操作。
• nvm npm_mirror [url] ：设置npm镜像。[https://github.com/npm/cli/archive/]。如果不写url，则使用默认url。设置后可至安装目录settings.txt文件查看，也可直接在该文件操作。
• nvm uninstall <version> ：卸载指定版本node。
• nvm use [version] [arch] ：使用制定版本node。可指定32/64位。
• nvm root [path] ：设置存储不同版本node的目录。如果未设置，默认使用当前目录。
• nvm version ：显示nvm版本。version可简化为v。

5.学习webpack

WebPack 可以看做是**模块打包机——**一款打包工具，负责项目打包：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。

为什么学习 webpack ？

现如今的很多网页其实可以看做是功能丰富的应用，它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度，前端社区涌现出了很多好的实践方法，模块化就是当中最火爆的，它可以把复杂的程序细化为小的文件。而 webpack 的最核心功能就是打包，它会分析各个文件之间的依赖关系，然后生成一个依赖图并用文件的形式保存下来，浏览器运行代码的时候就可以读取这个文件，就可以知道了各个代码块之间的关联以及如何调用了。对模块进行打包，既保留了单个模块的可维护性，又减少了页面的http请求，减少了页面加载时间，从而增加了页面的显示速度，让整个应用的体验更好。

webpack的打包思路就是从程序逻辑入手：入口文件 => 分析代码 => 找出依赖 => 打包，这样代码里不出现的模块就不可能被打进包里，甚至还可以实现按需加载，这就是webpack最有价值的地方。

6.学习脚手架 vue-cli?

• vue-cli 是基于 nodejs+webpack 封装的命令行工具，可以理解为汇集了各种命令的 bash，或者bat。
• vue-cli 是vue.js的脚手架，它是一个专门为单页面应用快速搭建繁杂的脚手架，它可以轻松的创建新的应用程序而且可用于自动生成vue和webpack的项目模板。
• 用 vue-cli 执行build，实际上是webpack做的，原本需要自己配置webpack的相关配置，被cli简化了，并且它按照vue的用户习惯整理了一套构建和目录规范。

vue-cli 和 vue 的区别与关联

• vue是一整套框架，而vue-cli只是它其中的一个脚手架

• vue-cli 是vue的命令行工， 一个完整的vue项目核心构成

vue-cli 和 webpack 的关系

vue-cli 里面包含了webpack， 并且配置好了基本的webpack打包规则，这点非常关键，这是我们使用 cli 脚手架的一个关键原因，方便打包。

学习 vue-cli 的常用命令

1. node -v/npm -v 查看一下当前 node 和 npm 的版本
2. npm intsall cnpm -g npm镜像使用的是国外的，安装东西有些许慢。安装淘宝镜像加速器，在有些时候可以选择这个加速器来安装依赖，但是尽量少用
3. npm install vue-cli [version] -g 安装脚手架，这里version可以选择对应版本，默认是安装当前node.js支持的最新版本
4. vue init webpack myvue(创建项目常用) 使用vue-cli脚手架创建一个webpack项目，名字为myvue
5. cd myvue 进入项目目录
6. npm install 下载webpack项目的相关依赖（要在项目目录下运行）
7. npm run dev 启动打包运行项目（要在项目目录下运行）
8. npm install xxx(eg. webpack/router/element-ui 等等) -g 用于给项目安装现没有的依赖, -g 是指全局安装，还有一个常用的 --save 是指保全在配置里面