如何用vue-cli腳手架搭建Vue項目

閒聊一下子 >_< 這篇文章只是剛剛打開vue的大門，放輕鬆~~

安裝node環境

先檢測下node版本吧！或許你尚未安裝node呢~
（若是使用Mac在安裝的時候報錯，除了網絡緣由就是權限問題，你要在安裝的指令前加上sudo）

在終端輸入指令

$  node -v

若是你看不到版本號的話，那就勞煩去官網安裝一個吧。
固然，若是你安裝了node，天然就會有npm工具了。
官網地址：https://nodejs.org/en/download/

安裝vue-cli腳手架工具

接下來，咱們就能夠先全局安裝vue-cli~

在終端輸入指令

$ npm install -g vue-cli

=======......若是等的實在是太漫長了，那就Ctrl+c結束這段漫長的等待，使用國內的淘寶鏡像cnpm
在終端輸入指令

npm install -g cnpm –registry=[https://registry.npm.taobao.org]

安裝完成後能夠輸入cnpm -v去檢測，若是返回版本號，說明安裝成功。只要把npm換成cnpm的寫法就能夠愉快的使用淘寶鏡像去安裝你須要的東西了。

最後，檢測一下咱們是否安裝成功了vue-cli

在終端輸入指令

$ vue - V

注意是大寫的V，大寫的~
看到版本號了，說明安裝成功了。

初始化項目

首先，cd到本身想要建立新項目的文件夾下
< vue init 模板類型 項目名稱 > 以這樣的格式
其中，模板類型有：

• browserify -- 全功能的Browserify + vueify，包括熱加載，靜態檢測，單元測試
• browserify-simple -- 一個簡易的Browserify + vueify，以便於快速開始。
• webpack -- 全功能的Webpack + vueify，包括熱加載，靜態檢測，單元測試
• webpack-simple -- 一個簡易的Webpack + vueify，以便於快速開始。

（根據項目需求來選擇模板類型，我這裏就選擇最全面的webpack模板吧！）

在終端輸入指令

$ vue init webpack item

item是我本身取的項目名稱
而後，就會讓你填寫一些項目的信息(不知道選什麼就一路回車就對了，哈哈~對了，填寫項目名稱要小寫字母哦！)

個人正在初始化，但是好慢，也許是網速的緣由吧~
報錯了！！應該是忘了給權限~

再次在終端輸入指令

$ sudo vue init webpack item

噢耶！終於初始化成功了！

接着，cd進入到建立的目錄

按照我標註的紅色框框去一步步作~
第一，進入到建立的目錄
第二，輸入指令 npm install ，由於自動構建過程當中已存在package.json文件，因此這裏直接安裝依賴就行。(安裝 vue 路由模塊 vue-router 和網絡請求模塊 vue-resource，輸入：cnpm install vue-router vue-resource --save)。
第三，啓動項目，輸入指令 npm run dev
第四，複製http://localhost:8080這個連接，瀏覽器會默認打開一個「歡迎頁面」。

vue-cli建立的項目目錄結構及說明