Vue2.0项目开发流程—通俗易懂

看具体内容之前，，想听听我的唠叨。没兴趣的朋友可以直接掠过。
其实早在去年就已经接触到Vue，但无奈，在一个二线城市。Vue这个东西大多人都是只闻其声，没有几个公司会在项目中具体用。而我也是出于兴趣就把文档大概的扫射了一遍，也就放下了。

我想大家应该知道今年对于Vue有件大事。520那天，咱们的尤大大在全球首届 VueConf 上，介绍了 Vue.js 2017 的现状，并对 Vue 的未来做了展望。当然了。。虽然很想亲临现场。。但是现实的种种（你们懂的）让我只能在会后的视频中去感受了。

别的不多说我们只来看看尤大公布的数据：

Vue 的现状

• GitHub 超过 53,986 个 Star 数，已经是历史的 Top 10

• 每月 55 万 + 次 NPM 下载（不算阿里爸爸 CNPM 镜像）

• Chrome DevTool 插件 17.4 万日活

• 国内用户：

• 当然还有活跃的社区，vue全家桶，与阿里爸爸合作的Weex。。。。。

• 看了这些，，我只能说，身为一个前端。。我得把它搞下来。于是我觉定先将一个公司的小项目转到vue上来。

• 好了，不闲扯那我们正式开始。

• -------------------------------------------------------------------------华丽的分割线---------------------------------------------------------------------------、

• 还是那句老话。。文档文档文档（https://vuefe.cn/v2/guide/）
  我知道很多人同我一样，不太喜欢看这玩意。但是对于Vue来说我强烈推荐在做项目之前大家必须去过一遍文档，或者说最起码也要了解到Vue的基础用法，基础API，生命周期这些东西。我说了。。是了解，所以不用急。

• 在我看来，Vue的用法无非就是俩种 

• 1.CDN(就如咱们之前引用jq一样的在官方稳定中下载直接引用到你的html <script src="*****">)
  好处呢，就是方便-可以快速的使用。这边也推荐大家在初期看文档的时候就用CDN的方式去练DEMO。。莫不要一上来就NPM...Cli...WebPack...会把自己整懵逼的，原因很简单，全是新知识就一块一块去学，没有谁能一口吃成一个胖子。。。我就是吃过这个亏的人。
  2.用官方提供一个官方的命令行接口工具--也就是我们所说的Vue-Cli(脚手架工具：快速建立一个Vue项目的工具)，用于快速搭建大型单页面应用程序
  当然我们实际中的项目当然要用第二种用法

• 一：开发环境（vue赖以开发和生存的环境）
  1.安装node.js（win下前往node.js官网安装即可） 安装个稳定版就行  这个没什么可讲的一路下一步

• 
  

• 检查这步是否完成 可以打开命令行输入  node -v   -----这步的意思查看node的版本号，如果回车后你看到版本号那就OK了。go-下一步
  
  这步完成的同时，node中自带的  npm 一个nodejs的包管理器，用于node插件管理（包括安装、卸载、管理依赖等）的东西也安装到你电脑里了。以后我们要安装其他插件模块（比如 vue-cli  sass了什么的）都靠这个玩意。同样可以 npm -v 看一下它的版本号 
   友情提示，这块可以安装一个cnpm(这是淘宝npm镜像  就是中国版的npm  好处就是下载东西快推荐安装)
  

• 淘宝npm安装
  

1

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

• 2.安装Vue脚手架-Vue-cli  ------为什么叫脚手架呢，其实就是和盖楼房一样，这个就是个基础设施，是万丈高楼平地起的重要工具。
  

  2
  npm install -g vue-cli   或者cnpm install -g vue-cli 
  安装完成后，可以使用 vue -V （注意 V 大写）查看是否安装成功。

• 
  3.安装好咱们的脚手架之后咱们就可以用它来搭咱们的项目了。同样一条命令

• 
  先 cd到你想要存放vue项目的目录
  

  3
  cd E:\VUE
  
  用命令来创建一个webpack项目。vue-cli就是基于webpack的。

• 4

   vue init webpack my-project-name(项目名字)

• 
  

• 
  

• 
  

• 好了。见证奇迹的时刻就要到了

• 你会看到刚才的项目文件已经自动创建好了

• 5
  cd one-vue-project   cd进刚才自动创建好的项目目录
  
  
  
  6
  npm install      这一步的意思呢官方解释是 安装项目所需依赖。换一个通俗的话就是刚才使用vue-cli创建的这个项目只是个方案 描述了这个项目需要什么插件，还没有实际的内容。 这就是来安装这个方案所需的插件
  
  7

   npm run dev       最后  看看终极效果吧 哈哈~~~~~~~~~大V

  
  
  
  

同志们这只是个开篇，后续我会持续更新的，每一块都单独拿出来讲一下，如果你觉得我写的能够让你有所感悟，记得关注我哦，如果有问题可以随时提问，有问必答。

大家可以关注下我这个个人前端公众号，我也会第一时间在上面通知大家的。如果有可能我会出一个免费的vue视频放上面哦~~。。