Vue：Vue2.0搭建腳手架

 

隨着Vue.js愈來愈火爆，更多的項目都用到Vue進行開發，在實際的開發項目中如何搭建腳手架呢？今天就來跟你們分享一下如何使用vue-cli搭建腳手架。

1、安裝node.js

一、進入官網https://nodejs.org/en/download/

根據電腦操做系統，選擇相應版本的文件進行下載。

二、下載文件後雙擊進行安裝

安裝完成之後進入node.js的安裝目錄：D:\Program Files\nodejs\（這裏是我本機安裝的目錄，其餘機器目錄可能不一樣），你會發現裏面自帶了npm，直接用npm安裝環境便可。

2、安裝cnpm

1. 說明：npm(node package manager)是node.js的包管理器，用於node插件管理（包括安裝、卸載、管理依賴等）。
2. 使用npm安裝插件：命令提示符執行 npm install <name>。
3. 選裝cnpm。由於npm安裝插件是從國外服務器下載，受網絡影響大，可能會出現異常，若是npm的服務器在中國就行了，因而咱們樂於分享的淘寶團隊幹了這事。來自官網：「這事一個完整npmjs.org鏡像，你能夠用此代替官方版本（只讀），同步頻率目前爲10分鐘一次，儘可能保證與官方服務同步。」；　　
4. 安裝命令：npm install -g cnpm --registry=https://registry.npm.taobao.org。
5. 查看版本：輸入cnpm-v，能夠查看當前cnpm的版本。

注意：安裝cnpm的時候不是安裝在node.js安裝的地方，要在建立的項目目錄下面安裝。

3、安裝vue-cli腳手架構建工具

vue-cli提供了一個官方命令行工具，能夠用於快速搭建大型單頁應用。該工具提供開箱即用的構建工具配置，帶來現代化的前端開發流程。只需幾分鐘便可建立並啓動一個帶熱重載、保存時靜態檢查以及可用於生成環境的構建配置的項目。

一、安裝命令

命令：$ cnpm install vue-cli -g。以下圖所示：

 

注意：g表示全局安裝。

出現以下的界面表示安裝完成：

 

二、檢查是否安裝成功

安裝完成以後輸入 vue -V（注意這裏是大寫的"V"），以下圖所示，若是出現相應的版本號，則說明安裝成功。

4、建立一個基於webpack模板的新項目

要建立項目，首先咱們要選定目錄，而後在命令行中把目錄轉到選定的目錄。可使用下面的命令：

$ vue init webpack my-app

注意：my-app爲自定義的項目名稱,自定義的項目名稱中不能包含大寫字母。

 

輸入命令之後直接按回車執行：

運行初始化命令的時候會讓用戶輸入幾個基本的選項，如項目名稱、描述、做者等信息。例如：

Project name (myvuedemo) ：項目名稱，這裏是myvuedemo。

Project description (A Vue.js project)：項目描述，這裏是「個人第一個Vue項目」。

Author：做者。

Install vue-router? (Y/N)：是否安裝Vue路由，也就是之後是spa(但頁面應該須要的模塊)。

Use ESLint to lint your code?（Y/N）：使用ESLint到你的代碼。

Pick an ESLint preset (Use arrow keys)：選擇一個預置ESLint（使用箭頭鍵）。

Set up unit tests (Y/n) y：設置單元測試。

Setup e2e tests with Nightwatch? (Y/n) ：設置端到端測試。

5、運行項目

輸入下面的命令：$ cnpm run dev。

 

運行成功之後，根據提示，在瀏覽器中輸入http://localhost:8080,瀏覽器顯示的頁面以下：

注意：服務啓動之後，就不能關閉了

到此爲止，Vue.js的腳手架搭建完成。