在以前做項目時經常是新建一些html、css、等一些文件，但在接觸了vue.js之後我發現我已經有點看不懂前端了，這對於我這麽一個菜鳥來說實在是很苦逼的事情。現在的前端技術都離不開npm包去管理編譯流程，npm是node.js的包管理工具，vue腳手架的搭建也是需要npm進行操作，所以學習vue之前必須要了解node.js。重點是npm的安裝與使用，那麽首先我們就要下載一個node.js.

一、安裝node.js

可以直接到node.js的官網下載安裝，選好跟自己電腦對應的系統版本進行安裝，安裝過程也沒什麽說的就是一直下一步，如果你會安裝QQ，那麽你一定會安裝node.js。

安裝完之後打開自己的命令行工具（如果你問我命令行是什麽怎麽打開，請出門左拐），輸入 node-v和npm-v 如果能顯示出版本號就說明安裝成功了。

二、vue腳手架的搭建

安裝完node之後我們就可以使用npm安裝 vue-cli了，直接全局安裝。

npm install vue-cli -g

因為使用npm下載東西訪問的是外網需要FQ速度會很慢，所以推薦大家使用國內的良心淘寶鏡像，也就是cnpm來進行安裝。

可自行進入cnpm的官網，但是要註意一點安裝完cnpm之後一定要使用 cnpm-v

安裝完vue-cli之後就是vue項目的搭建了

三、搭建項目

vue init wepack demo1 或者 vue init webpack-simple demo1

其中demo1是項目的名字，這個你可以隨便取 aaa、bbb都可以，那麽webpack與weppack-simple有什麽區別呢？其實基本上沒有什麽區別，但是你用webpack的話它會有代碼格式的檢查，不符合它的標準就會報錯，如果你想讓自己的代碼看上去工整養成這個習慣，你就用webpack。除此之外兩種生成的配置文件名稱也不一樣，一個是index.js，一個是webpack.config.js。

運行命令之後一直回車、回車但是不要太猛，中間會問你是否需要sass？你可以要或者不要。

然後下面會提示你怎麽做 cd demo1 進入項目文件，npm install 安裝項目依賴，執行 npm run dev 自動打開頁面。

出現這個頁面那就大功告成了！

初識vue.js，我的學習之路（一）