VUE從零開始系列（安裝腳手架），呆萌小白上手VUE

第一章 安裝腳手架

前言

前端是個大雜燴，各類技術、框架層出不窮，從pc端到移動端，從前端到後端，從web到桌面應用，乃至原生安卓及ios。 能夠說js在手，天下我有（手動滑稽）。

背景

說實話作了幾年前端，在前一陣兒我仍是以爲，管你什麼框架，什麼模塊化的，老夫就用jquery，整那些花裏胡哨的有啥用，我能實現需求就ok！哼哼，可是當我真開始接觸到VUE的時候，WTF？還能這麼寫？開發起來簡直不要太流暢啊！不用操做dom，只關心數據層，從接口拿到數據，更新下data，剩下的就不用你操心了。

介紹

接下來我就把我從jquery過渡到VUE的歷程分享下，但願能幫助剛入坑的你，相信在看我這篇文章以前，你應該也看過很多關於VUE的資料了，可是大部分只是概念+簡單的片斷，估計你跟我同樣都是跟着敲完之後仍是一臉懵逼。因此我決定本身動手寫一個我本身能看懂的，應該大部分人也能看懂的文檔吧。。

（一）安裝nodejs

須要nodejs的版本最少8.9.4及以上（很重要），具體怎麼安裝我就不講了，這類教程網上一大把，別忘了npm的淘寶鏡像源。想看本身的node版本是多少的話，就打開命令行輸入node -v

（二）安裝webpack

仍是打開命令行，輸入npm install webpack -g，意思就是全局安裝webpack，這樣之後就不用每次新建一個項目都得從新裝webpack了。完成以後輸入webpack -v看下，若是出現下圖：

接着輸入y回車（感謝@傻夢獸 提醒，4.0以上版本的webpack須要安裝webpack-cli，才能運行，抱歉疏忽了），繼續輸入 webpack -v，若是出現版本號，就安裝成功了

（三）安裝VUE腳手架

由於是從0開始的，建議你們仍是直接從腳手架開始吧，若是本身搭建的話，光是新建各類文件夾就已經頭大了，況且還得本身配置webpack。繼續在命令行輸入npm install vue-cli -g，完成以後老規矩，輸入vue -V查看是否安裝成功，注意-V是大寫。

以上幾步，已經準備好了咱們須要的環境，接下來開始進入開發階段

1. 隨便新建一個文件夾，打開後在文件夾空白處按住shift+鼠標右鍵，點擊在此處打開命令窗口，輸入vue init webpack test，這裏的test是指項目名稱，你能夠本身起名字，可是別用中文。以後一直回車，注意：? Use ESLint to lint your code? (Y/n)看到這一行的時候建議輸入n，這是一個es6語法檢測器，若是開啓的話你得嚴格按照es6規則寫代碼，稍有不注意就會報錯。

   

   到這裏就基本建好了。 此時你會發現剛纔新建的文件夾裏多出了好多東西：

   

2. 在剛纔打開的命令行中，輸入cd test，就是進入你剛纔新建的目錄裏，你的文件夾叫啥，你就cd啥
3. 繼續輸入npm install,會自動安裝你須要的各類依賴
4. 完成以後開始讓項目跑起來，輸入npm run dev，運行成功在瀏覽器裏打開http://localhost:8080,看到這個畫面，就表明你已經成功了

   

結語

彆着急，纔剛開始，這個只是安裝及運行起來你的項目，後續章節我會繼續由淺入深的寫下去，想看的能夠關注我，今天先下班了。。

全部章節

• 第一章 安裝腳手架
• 第二章 初體驗
• 第三章 登陸頁
• 第四章 axios
• 第五章 路由鉤子及插件開發