不寫博客就請吃飯系列（1）——vue2.0開發入門踩坑

08-31

來自專欄技術菜就要多寫博客

1，前言

本文記錄了本人入門vue2.0開發體系的過程

2，概覽

使用vue開發體系實現一個豆瓣電影推薦頁面

3，準備工作

少許前端開發基礎，比如html，css，javascript。
一個編輯器，sublime text，vs code或者webstrom。本文中使用的是webstrom，因為可以直接構建vue項目，比較方便。

配置node.js+webpack+npm環境。手上這台機器之前有配置過，所以這裡就不重新搞了，具體配置安裝方法蠻簡單，自行百度即可。

* 記得將npm的鏡像庫替換成淘寶的鏡像庫

得到原本的鏡像地址

npm get registry

> https://registry.npmjs.org/

設成淘寶的 npm config set registry http://registry.npm.taobao.org/

換成原來的npm config set registry https://registry.npmjs.org/

4，幾個概念

node.js ：一個基於 Chrome V8 引擎的 JavaScript 運行環境。
webpack ：一個前端資源載入/打包工具。它將根據模塊的依賴關係進行靜態分析，然後將這些模塊按照指定的規則生成對應的靜態資源。
npm ：隨同NodeJS一起安裝的包管理工具。
vue-router ：vue核心插件之一，用來控制頁面路由。
vuex ：vue核心插件之一，用來管理數據狀態。

5，兩個框架

vue2.0 ：三大前端開發框架之一，由國內前端大神尤雨溪開發。
element-ui ：一個當前流行的前端ui框架，由餓了么前端團隊開發。

6，動工

打開webstrom - Create New Project - Vue.js - Project template(webpack-simple)

這個時候報錯了（下圖紅字），原因是沒有安裝vue/cli腳手架

安裝vue/cli腳手架

打開終端，cd到node安裝目錄下，執行命令

sudo npm install -g vue-cli

安裝完成後，執行vue list指令，可以看到幾個常用的腳手架模板。

接下來我們就可以繼續使用webstrom的webpack-simple模板創建項目。

點擊 next 然後有報錯了

初步判斷，應該是電腦中沒有安裝git環境。點擊『安裝』安裝命令行開發者工具。

安裝好了git環境後，用webstrom重新構建一個vue項目。

一直點擊next，一直到這裡：

是否使用ESlint代碼規範，我選了No。

ps，Eslint 是一個語法規則和代碼風格的檢查工具，可以用來保證寫出語法正確、風格統一的代碼。

由於ESLint與我本人代碼習慣有些地方不大一樣，所以這裡選了否，不適用ESLint。

其餘的全部默認點擊下一步就可以了。

這個時候，我們的新項目就建好了。右側的文件目錄是我們使用webpack-simple模板構建vue項目的標準文件目錄。也就是說，項目的基本骨架已經搭建好了。

看起來似乎有很多文件蠻陌生，很多文件我也不大清楚具體是幹什麼用的，不過不要緊我們先把項目跑起來。

打開終端，或者使用ws（webstrom的簡稱）中自帶的終端。

先安裝項目的依賴，輸入指令 npm install 即可

安裝 vue 路由模塊vue-router和網路請求模塊vue-resource，

輸入指令 npm install vue-router vue-resource --save 即可

安裝好了vue-router和vue-resource後，啟動項目。

指令：npm run dev

現在好咯，項目已經在本地機器localhost的8080埠跑起來了。

可以直接訪問了。

項目跑起來了，這個時候我們就可以開始閱讀vue2.0的官方文檔來了解一些vue開發框架的基本概念了。

7，總結

本文主要介紹了如何從零開始搭建一個vue2.0開發環境，現在簡要回顧一下步驟：

安裝node.js環境，這個是js的運行環境。類似jdk至於java。
安裝npm和webpack環境--包管理工具和打包工具。
安裝一個順手好用的代碼編輯器。看哪個順眼就用哪個。
構建一個vue項目骨架，用指令構建或者ide都可以，我比較懶，直接用了ws來構建，基本狂點下一步就可以了。
安裝依賴，安裝vue-router和vue-resource。
把項目跑起來（npm run dev)

在下一篇文章中，我將開始正式進入vue的開發階段，了解vue是如何使用組件化思想來簡化前端開發的。同時還有如何使用群眾喜聞樂見的element-ui框架來快速搭建顏值尚可的頁面。

武漢夏天真是熱/doge