vue学习

从零开始学习Vue（一）

引言

最近终于安定下来进了一家公司，闲了两个月再上班还有点小激动。因为公司现在的项目要求是需要进行前后端分离，所以前端也得会(为啥前端也得我们自己写啊)。前端框架用到的是Vue(为啥用vue不是用angular啊)。因为之前对这个angula4.0有所了解，所以觉得应该不会很困难。学习过程中使用的是node.js平台，ide是webstorm，所以这个应该是从安装node.js开始吧。

1. node.js的安装与使用

• Node.js是一个Javascript运行环境(runtime)，发布于2009年5月，由Ryan Dahl开发，实质是对Chrome V8引擎进行了封装。Node.js对一些特殊用例进行优化，提供替代的API，使得V8在非浏览器环境下运行得更好(百度百科来的)。按照我个人的理解方式，它是一个可以运行js代码的环境，就算是没有与后端服务器相互交互的情况下依然可以自己运行。实际上就是，不需要将页面放在整个项目进行运行，是一个可以独立运行的前端项目。
• 下载地址 https://npm.taobao.org/mirrors/node/v8.11.1/node-v8.11.1-x64.msi (x64位的直接下载)，官方中文网 http://nodejs.cn/download/。
• https://blog.csdn.net/traguezw/article/details/54577560 这篇博文详细说了怎么安装node.js与npm，毕竟我们是学Vue的node就大概带过了。

2. Vue手脚架的安装与创建第一个Vue项目

在此之前先简单复制一下vue官网的介绍与我个人的所理解的vue是什么。

官方解释：Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
如果你想在深入学习 Vue 之前对它有更多了解，我们制作了一个视频，带您了解其核心概念和一个示例工程。
如果你已经是有经验的前端开发者，想知道 Vue 与其它库/框架有哪些区别，请查看对比其它框架。

个人理解(对错都这样了啊) ： 一个封装好的js框架，支持es6语法，兼容性强。好，大概是这样。

• 安装Vue手脚架

  打开cmd,安装好node.js与npm后执行后边的命令, 查看node.js版本 node -v， 查看npm版本 npm-v

  npm install –global vue-cli 安装手脚架

• 安装webpack，这里vue是用这个webpack来实现独自运行的，webpack就是一个小型的服务器。

  npm install webpack -g

• 创建项目

  vue -v 查看手脚架是否已经安装成功

  vue init webpack my_firstvue 创建项目最后的my_firstvue是项目名称（项目名称不能包含大写字母）

  创建过程如下就可以了，选项，选择了下载路由，选择了测试包，不自动下载文件。
  

  cd 进入项目

  npm run dev 项目运行
  
  项目运行后输入localhost:8080 出现上图，第一个项目就已经创建完成了。

总结

刚开始只是简单测试了一边这个vue的下载与创建，这里我们知道了，他是运行在webpack上的，npm run dev的执行的是build文件夹下的webpack.dev.conf.js，通过编译该文件来运行起整个vue项目。

结束语

总共也没写过几篇博客，一是怕自己文笔不好，二是怕自己写错了带大家走弯路。不过现在是想通了，反正都是刚开始学习大家就一起进步吧！