vue 菜鸟级入门 之一

又到年底，整理下过去一年的技术学习

大概15年的时候就用angular结合ionic 开发hybrid app，非常蛋疼是这两个框架都是国外的框架，看文档完全都是要看英文文档，学习成本是相当的艰难，很多问题都要用vpn翻墙才Google的到，几乎天天加班

最近一两年，react和vue真是大火的不行，angular 2也并没走向末路，vue的好处就不说了，中国人开发的框架，真是让人激动，全中文文档，学习起来嗖嗖的

当然vue也不是传说那么棒，不能忽略的原因是中国人多

对于一个新的框架，看官网文档无非是最权威最直接的学习方法

一边学习，一边记下重要的比较，毕竟文档内容实在是太多了

以下是windows环境，虽然个人比较喜欢mac开发，不容易下载恶意软件（建议砸锅卖铁也要搞个mac）

开始吧

---

1.windows 安装git（这个是MSYS2）

http://msysgit.github.com/，下载执行exe

2.需要安装chrome 的vue 插件（这个还是非常必要）

github上面克隆并安装 （至于我为什么要用这种方法，因为chrome的插件商店打不开！连上vpn也打不开！）

https://github.com/vuejs/vue-devtools#vue-devtools

https://www.cnblogs.com/yuqing6/p/7440549.html（这里有个中文安装步骤，其实跟github上面的步骤差不多，只是感觉大多数百度出来都是这样做的，那么你就可以坚定不移的按照此方法做了，相信自己，你也可以的）

你在github上面clone下来的文件夹叫vue-devtools,以下操作都是在这个文件下面进行的哦，知不知道！！！

要npm install再做以下步骤，顺序很重要！

1.关键的一部就是修改那个配置文件，2.和最后

Chrome浏览器 >  更多程序 > 拓展程序 

点击加载已解压程序按钮, 选择 vue-devtools > shells > chrome 放入（双击chrome）

搞了半天终于搞出来了，那个v的标志绿了就算成功了，只有在你运行vue项目的时候那个v标志才会绿哦！

这是成功的图，哎我一直以为在控制台，结果在上面，害的我找了半天

可能install有点慢，建议用淘宝镜像（如果不知道怎么镜像，自己百度吧，百度也是一种很重要的能力，理论上来说是没有解决不了的问题的），镜像的原理就相当于淘宝给你下载了一个国内资源库，这样你去下载就很快了，它会隔一段时间去国外更新一次资源的，就是这么个意思。真搞不懂国家为撒不能让我们愉快的访问国外网站，我们都是成年人，有分别是非和承担后果的能力

安装这个vue devtools,坑还是有点多，慢慢来，一个问题一个问题的解决！

然后：

自己在非主流网站上下载了个cxr文件（然后电脑就中毒不行了，发了疯的安装各种软件）

拖拽安装到chrome的扩展程序（chrome://extensions）不知道怎么还是不行，建议用上面的主流方法

我自己弄的一个无毒百度下载网盘地址：https://pan.baidu.com/s/1eUhIl0Y (提取码5htx）

3、编译后引用文件路径不对

build后，index引用的js，css文件路径不对，只需要在项目 的config/index.js（记住是conig文件下的assetsPublicPath值，不要改错了）修改配置路径就行了（http://www.jb51.net/article/121150.htm）

4.最后编译后的文件就可以上线部署了

编译出来的html，css，js等文件在dist文件里面，就是你上线要用的东西了

当然深入的学习达到熟练使用还是离不开自己的实战项目开发过程的，不要指望看几篇文章就可以掌握一门技术

开发环境弄好了(之前自己手动配置过webpack开发环境，被各种配置文件坑晕，有种被解放的感觉），整个开发流程也基本走通，当然接下来我会更新自己在实战中躺过的坑，来给大家提个醒，少走些弯路，少趟些坑也是极好的