Vue.js 入門指南之“前傳”

標籤：

題記：關注Vue.js 很久了，但就是沒有動手寫過一行代碼，今天準備入手，卻發現自己比菜鳥還菜，於是四方尋找大牛指點，才終於找到了入門的“入門”，就算是“入門指南”的“前傳”吧。此文獻給跟我一樣“白癡層級”的前端開發人員，大牛請繞過。

1，下載安裝Node.js

去 Node.js 官網下載一個Windows環節的安裝包 node-v6.2.0-x64.rar 檔案，一路安裝下去即可。官網訪問很慢，可以試試中文網 http://nodejs.cn/

2，配置Vue環境

一開始看《基於Webpack、Vue、Vue-Router 的 SPA 初體驗》這篇文章，照著試了試，發現不懂Webpack，而且照著文章一路做也沒用成功，所以轉求朋友諮詢，找到了Vue中文官網的安裝文章，開啟程式開始菜單 Node.js-->node.js command prompt 進入node.js 的命令列，

首先在 C盤建立一個目錄 App2,然後 cd c:\App2

然後，按照提示依次輸入下面的幾個命令：

# 全域安裝 vue-cli
$ npm install -g vue-cli
# 建立一個基於 "webpack" 模板的新項目
$ vue init webpack my-project
# 安裝依賴，走你
$ cd my-project
$ npm install
$ npm run dev

Windows同學不要輸入前面的 #,$ 符號

建議安裝前先安裝cnpm模組,npm由於國內被牆的緣故，安裝依賴會非常慢。。。。。（不懂cnpm的同學可以看下 這裡）

我是FQ安裝的，也等了很久很久才安裝完。

安裝過程中，會有些警告和錯誤，先忽略吧。

最後，會有一個C:\App2\my-project 的目錄，如果像下面的樣子，就表示成功了：

面對這麼多檔案，不知道怎麼開啟，後來通過VS的 “開啟網址”方式，在VS中開啟了。

此時，Vue的開發環境算是基本搭建好了。

3，Vue初探

上面的過程搭建好了Vue的腳手架，我們先看看網站目錄下幾個檔案。

在這裡寫第一行Vue代碼嗎？
問了下朋友才知道，應該開啟 Components目錄，如下：

開啟 這個 Hello.vue檔案，vue的面紗算是揭開了：

原來 Hello World 寫在這裡在。但是怎麼運行呢？朋友提示，應該在 node.js命令列運行

npm run dev 可惜，報錯： 

原來8080連接埠被佔用了，去IIS關閉使用該連接埠的網站，重新運行此命令，出現下面成功的介面：

OK，在IE11瀏覽器上輸入該網址：http://localhost:8080/ 熟悉的介面出來了：

現在，我們將 Hello.vue 檔案裡面的 Hello world前面刪除2個空格，儲存，頁面立刻發生了錯誤：

這裡提示格式錯誤了，諮詢朋友說，官方的產生的程式碼會用eslint檢查格式。。。

你可以用/*eslint-disable */禁用格式檢查，要不空格縮排都不能亂寫，多個空格都要給你報錯。

好吧，先補齊這兩個空格。不用重新整理頁面，編輯完Vue檔案儲存後就立即看到了效果，這也是Vue（應該說是Vue腳手架架構）神奇的地方！

 

至此，Vue架構入門指南的“前傳”便探索完成了。

你有什麼疑問，我們一起學習吧！

 

Vue.js 入門指南之“前傳”