題記：關注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腳手架框架）神奇的地方！

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\【當前登錄用戶名】\AppData\Roaming\Sublime Text 3\Packages\Package Control\Package Control.sublime-settings

定位到 Packages 目錄下，建立一個?Package Control?目錄，然后重新打開前面的菜單，打開此文件，就可以修改并保存了。

之后，輸入 Vue字樣在 Package Control上，出現下面的界面，就ＯＫ了：

選擇第二個：Vue Syntax Highlight

之后，再重新打開Ｖｕｅ的文件，出現下面高亮窗口，就大功告成了！

?

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

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

轉載于:https://www.cnblogs.com/libin-1/p/5888429.html

總結

以上是生活随笔為你收集整理的Vue.js 入门指南之“前传”（含sublime text 3 配置）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。