VUE環境初搭建

我是一個遇到搭環境就懵逼，無從下手的菜鳥，就算百度出步驟一步一步跟着作都能作到「我是誰，我在哪，我在幹嗎的狀態」。

對於VUE，不少朋友已經在用了，也老早該學習一下，可是環境就是沒搭起來過，今天鼓起了多大的勇氣又從搭環境開始。找到了一篇文章，照着他一步一步搭建，竟然成功了，我以爲寫的很好，我都能看懂，想給做者點贊，可是還得註冊帳號。想着別哪天找不到這篇文章了，就想着拿過來本身記錄。也有其中一部分沒整明白，在朋友的幫助下才得以成功，都想一併記錄下。先貼出原文出處：https://segmentfault.com/a/1190000008922234     做者：codingCat.      而且感謝給予我指導的好友--鶴鶴同窗。

第一步 node環境安裝

1.1 若是本機沒有安裝node運行環境，請下載node 安裝包進行安裝
1.2 若是本機已經安裝node的運行換，請更新至最新的node 版本
下載地址：https://nodejs.org/en/ 或者 http://nodejs.cn/

第二步 node環境檢測

爲了快樂的使用命令行，咱們推薦使用 gitbas
1.1 下載git 並安裝
下載地址 https://git-for-windows.githu...
安裝成功後 右鍵菜單

咱們能夠看到 Gti Bash Here 。說明咱們已經安裝成功git
1.2 檢測node 是否安裝成功
右鍵空白，選擇 Gti Bash Here 彈出

1.2.1 在終端輸入 node -v

若是輸出版本號，說明咱們安裝node 環境成功
隨便咱們能夠查看 npm 的 版本號
可使用 npm -v

第三步 vue-cli腳手架安裝

2.1 若是訪問外網比較慢，可使用淘寶的鏡像 https://npm.taobao.org/
打開命令終端 npm install -g cnpm --registry=https://registry.npm.taobao.org
回車以後，我就能夠能夠快樂的用 cnpm 替代 npm

看到這樣

恭喜你，你已經成功安裝了 cnpm
可是此後，咱們仍是使用 npm 來運行命令

2.2 接下來就是重點了 安裝vue-cli
npm install vue-cli -g

若是你很幸運，那麼接下來就是這樣的

咱們成功了

在這整個過程當中我都不知道應該在哪一個位置 git bash

我以爲在此步以及以前的步驟均可以隨便bash，我理解的意思這些步驟是給本地搭建基本環境。

在後面的這些步驟裏面我死活找不到文件夾在哪，不知道個人VUE在哪  不知道我建的VUE-DEMO在哪

後來朋友跟我說以前是搭環境，後面的vue的文件夾要本身找存放項目的地方本身建立，建立好以後在新建的地方git  bash 照着後面的步驟作就能夠了

2.3 進入咱們的項目目錄，右鍵 Gti Bash Here
2.4 初始化項目 vue init webpack vue-demo

一直回車直到

是否要安裝 vue-router 項目中確定要使用到 因此 y 回車

是否須要 js 語法檢測 目前咱們不須要 因此 n 回車

是否安裝 單元測試工具 目前咱們不須要 因此 n 回車

是否須要 端到端測試工具 目前咱們不須要 因此 n 回車

接下來 ctr+c 結束

2.5 進入 cd vue-demo

2.6 執行 npm install

若是出現下圖，說明安裝成功

2.7 接下來執行 npm run dev

默認瀏覽器會自動打開

注意：若是您的瀏覽器是ie9如下的版本，請升級瀏覽器到最新版本或者下載谷歌瀏覽器或者火狐瀏覽器進行預覽。在地址欄輸入 http://localhost:8080/#/進行訪問

恭喜，你已經成功安裝，並運行起來vue基礎項目，踏入了vue的大門。

最後看到頁面展示出的VUE頁面，真的是太開心了，第一次本身搭建出一個項目的環境。再次點贊做者，每一步以後都寫了鼓勵的話。我會繼續往下學習VUE