Vue.js 入門指南之“前傳”(含sublime text 3 配置) 1,下載安裝Node.js2,配置Vue環境3,Vue初探4,配置sublime Text
題記:關注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中文官網的
首先在 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:App2my-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腳手架框架)神奇的地方!
4,配置sublime Text
前面使用VS來編輯Vue的專案,沒有外掛支援,對應格式和智慧提示就沒有,所以朋友推薦使用 sublime text,可以安裝Vue外掛,下面是配置過程
首先安裝sublime Text 3,去官網下載安裝程式;
然後安裝 sublime Package Control,具體問下“度娘”,此處略。
安裝好後,按 Ctrl+Shift+P 彈出下面的介面,就表示成功了:
接著,下拉選擇 Install Package ,如果沒有反應,可能“被牆”了。
開啟選單 Preferences->Packges Settings->Package Control->Setting Default ,會看到下面的內容:
檔案 channel_v3.json 的地址看能不能訪問,如果不能訪問,那麼一定被牆了,先想法去牆外下載此檔案,放到本地一個站點上,比如我的地址:
http://localhost/doc/channel_v3.json
然後將原來配置中的地址替換成這個。
但是發現此檔案無法儲存,滑鼠放到此視窗的“頁籤”上記住此檔案的地址,找到下列類似的目錄:
C:Users【當前登入使用者名稱】AppDataRoamingSublime Text 3PackagesPackage ControlPackage Control.sublime-settings
定位到 Packages 目錄下,建立一個 Package Control 目錄,然後重新開啟前面的選單,開啟此檔案,就可以修改並儲存了。
之後,輸入 Vue字樣在 Package Control上,出現下面的介面,就OK了:
選擇第二個:Vue Syntax Highlight
之後,再重新開啟Vue的檔案,出現下面高亮視窗,就大功告成了!
至此,Vue框架入門指南的“前傳”便探索完成了。
你有什麼疑問,我們一起學習吧!