vue从0开始学习笔记（1.搭建windows下vue环境nodejs、cnpm）

本文链接：https://blog.youkuaiyun.com/zhaokei/article/details/90411234

摘要：

1.本文都是个人理解，有任何不对地方欢请留言批评指教

2.Windows系统进行操作

3.本篇主要的成果是最后打开了vue欢迎页面[捂脸]

前言：

做的项目中，web官网、管理后台、公众号页面居多，全都使用html/css/js，顶多加了一个doT来动态渲染数据，另外使用layui做了两个web网站，比较熟悉。

看现在(2019年5月20日)web前端工程师的招聘要求，大部分要求会用vue，之前也了解过vue但是没有应用在实际项目中。近期较清闲，自学vue。

自学记录：

2019年5月20日 —— 从0开始

一、网上看vue相关文章，乱搜

1.看了一个vue+layui的文章（https://blog.youkuaiyun.com/daily886/article/details/81707223)，然后看了他的另外一篇文章(https://blog.youkuaiyun.com/daily886/article/details/81389662)，从头到尾看了一遍，讲的不错，想立刻装双系统，

看完后的疑问：

为什么就用个框架还得用Linux，Windows用起来也挺开心的
为什么非得用webpack打包，直接写好的文件不就是一个包么
npm、nodejs啥意思？干嘛的？

继续搜着看，搜的 “平时用的cssjshtml有什么不好的为什么要换vue.js”。

2.这篇看起来挺好的：https://blog.youkuaiyun.com/wxl1555/article/details/79964818 ，一问一答，通俗易懂，也解答了上面三个问题总的两个，最后结束语非常重要，给学习vue之路引导作用。

文章中给的vue学习建议是：

先把介绍 - vue.js官方文档的基础部分硬着头皮看一遍。除了组件这个小节涉及到了很多晦涩难懂的名词以外，前面几章完全就是把Vue.js当作一个模版引擎来用。

然后开始学习ECMAScript6，Webpack，NPM以及Vue-Cli的基本用法，最好对Node.js也要有所了解。

最后组件部分先大致看一遍，了解组件里面都有哪些概念之后，开始看网上各种实战视频以及文章还有别人开源的源代码。

关于webpack的讲解，让我有点想体验一下它

其他知识点、专业术语：

npm：安装、下载用的。
node.js：取代后端用的。但前后端组合起来不会更简单吗？可能是我们公司前后端都接触，不区分那么明显的原因。
vue-cli脚手架工具：自动帮你生成好项目目录，配置好Webpack，以及各种依赖包的工具。
Vuex：vue的一个状态管理器。用于集中管理一个单页应用程序中的各种状态。
Vue-route：vue的一个前端路由器，这个路由器不是我们上网用的路由器，而是一个管理请求入口和页面映射关系的东西。它可以实现对页面局部进行无刷新的替换，让用户感觉就像切换到了网页一样。
Vue-resource和Axios：vue.js本身没有封装ajax操作库，所以我们要通过Vue-resource和Axios来进行ajax操作，而因为种种原因，现在vue.js2.0已经将axios作为官方推荐的ajax库了。

读后感：

大前端终究是大前端，如果一个对于前端各个方面没有深入认识就想着能一步登天，肯定对不起大前端的“大”字。原本看着只想学一个Vue.js，没想到顺带把ECMAScript6，Webpack配置，ESLint配置，bable配置，npm使用，node.js语法，以后vue全家桶中的vuex，vue-route等等等等都学了一遍

2019年5月21日 —— 稍微了解

一、继续了解基础知识

1.ECMAScript 6

https://blog.youkuaiyun.com/daily886/article/details/53765658

https://blog.youkuaiyun.com/qq_25687271/article/details/81668413

2.node.js

https://www.runoob.com/nodejs/nodejs-tutorial.html

看了个这几页

3.npm

https://www.runoob.com/nodejs/nodejs-npm.html

4.webpack

二、实际安装node.js、npm、webpack的过程

https://www.runoob.com/w3cnote/webpack-tutorial.html 跟着做了一遍，但是遇到好多问题。

碰到错误cannot find module 'webpack-cli'如下图，参考https://blog.youkuaiyun.com/qq_33323251/article/details/80453692解决

又碰到错误 cannot find module 'webpack'如下图，参考https://blog.youkuaiyun.com/qq_42099419/article/details/84756118解决

再执行webpack runoob1.js bundle.js 还是报错，我怀疑是我在桌面建了个文件夹1，cmd cd到该文件夹1里安装了webpack，没正常安装导致的。卸载重装webpack。

卸载webpack ： npm uninstall webpack -g 按照https://blog.youkuaiyun.com/wenb1bai/article/details/80331900，成功。

重新安装webpack，按照https://www.cnblogs.com/liuliwei/p/9202433.html，失败如下图

心灰意冷，决定明天重新来过，全部卸载全部重新来。实在不行就弄Linux系统。

2019年5月21日 20点31分

2019年5月24日 —— 小试牛刀

这两天工作忙，今天有时间继续学习vue。

理论知识看了脑袋疼，我还是喜欢直接去上手。

继续了解node.js、npm、webpack、vue，看到底他们之间是什么关系。

一、安装nodejs

1.卸载之前以为装乱了的node.js

添加删除程序，直接卸载，cmd检查node -v和npm -v不是内部命令，是卸载成功。

2.安装node.js

按照https://blog.youkuaiyun.com/xieqian0204/article/details/79404446

执行到3、安装cnpm报错如下（虽然我有fanqiang工具，但是还是想安好cnpm，用起来应该会方便些）

啥权限问题，就因为nodejs我安装到了C盘？

卸载，装D盘

还是不行，最后卸载换回c盘默认安装的路径。

3.成功安装cnpm

先根据https://blog.youkuaiyun.com/runonway/article/details/79501510 解决权限问题：

win+x
管理员cmd
npm config set prefix "C:\\Users\\czxia\\.nodejs\\node_global" 回车 —— czxia是我的用户名字，你得改成你自己的
npm config set cache "C:\\Users\\czxia\\.nodejs\\node_cache" 回车
环境变量NODE_PATH改成：C:\Users\czxia\.nodejs\node_global\node_modules

再回到https://blog.youkuaiyun.com/xieqian0204/article/details/79404446，执行3、安装cnpm

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

然后cmpn -v，fuck，又报错了。。。

C:\Users\<用户名>\.nodejs\node_global 加到环境变量path里，重新打开cmd

终于cnpm安好了，我总觉得我不是走了一个正常的安装步骤，怎么会这么多问题。但是回想一下，又找不到特殊步骤，不知道了，只能认为是对Windows用户的恶意了。

4.安装vue-cli

npm install -g vue-cli（为什么不用cnpm？）

5.用vue-cli构建项目

tips：来一个cmd小技巧，在文件夹路径前输入cmd空格，回车后可以直接打开cmd并在当前目录下，不用cd进入了

回归正题

建一个vue工作空间，我建在了x:\vue_workspace
cmd该目录下，执行vue init webpack firstvue
出现很多初始化项让你去填写，不一一描述了（我也没管是干啥的），一路回车，似乎是好了

6.似乎，vue工程是创建好了！

工作空间里有了文件

看这目录结构，像那么回事。

cd firstvue

npm run dev

光标一直在闪，傻等了几秒，无效，回车，无效，浏览器输入http://localhost:8080，回车

耶！不明觉厉，似乎是成功了！

关闭cmd后，刚才的url就打不开页面了。

总结

至此，牛刀已经小试了。

那么，下一步该干嘛呢？

其实，我有点迷茫[捂脸]

我再琢磨琢磨吧。

你们有意见的可以评论告诉我一下，下一步该干嘛了。

2019年5月24日 20点00分

ps：文章太长后难以编辑，决定分多篇文章记录vue学习笔记，谢谢关注

2019年5月27日 17点26分

近期参加面试，更多的时间去看面试题了。vue的学习暂告一段落，新工作安稳下来后会继续学习vue。要是新工作能用到vue那就更好了。

2019年6月21日10:53:54

哈喽各位，楼主已经找到工作上班几天了。可惜的是新公司没用vue，但我还是会继续vue的学习记录的~~