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

摘要:

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.csdn.net/daily886/article/details/81707223),然后看了他的另外一篇文章(https://blog.csdn.net/daily886/article/details/81389662),从头到尾看了一遍, 讲的不错,想立刻装双系统,

看完后的疑问:

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

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

 

2.这篇看起来挺好的:https://blog.csdn.net/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.csdn.net/daily886/article/details/53765658

https://blog.csdn.net/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.csdn.net/qq_33323251/article/details/80453692解决

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

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

卸载webpack : npm  uninstall  webpack  -g  按照https://blog.csdn.net/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.csdn.net/xieqian0204/article/details/79404446

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

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

卸载,装D盘

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

3.成功安装cnpm

先根据https://blog.csdn.net/runonway/article/details/79501510 解决权限问题:

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

再回到https://blog.csdn.net/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进入了


 回归正题

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

 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的学习记录的~~

©️2020 CSDN 皮肤主题: 深蓝海洋 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值