摘要：

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的學習記錄的~~