vue腳手架安裝教程＋基本操作

什麼是vue腳手架?

腳手架的意思是幫你快速開始一個vue的項目，也就是給你一套vue的結構，包含基礎的依賴庫，只需要 npm install就可以安裝，讓我們不需要為了編輯或者一些其他事情浪費時間 總而言之，就是快速搭建項目的，讓我們可以早點去寫代碼

使用Vue.js開發大型應用時，我們需要考慮代碼目錄結構、項目構建和部署、熱載入、代碼單元測試等事情。如果每個項目都要手動完成這些工作，那無疑效率是低下的，所以通常我們會使用一些腳手架工具來幫助完成這些事情。在Vue.js 生態中我們可以使用 vue-cli 腳手架工具來快速構建項目。

1第一步:在安裝vue腳手架之前我們需要檢查我們是否已經安裝node.js?

可以使用node -v檢查，且需要保證安裝4.0版本以上的nodejs環境

執行命令node -v 安裝的版本為v8.11.2

如果沒有安裝則執行下面的步驟：node.js安裝過程如下：

*安裝文件下載地址：https://nodejs.org/en/

我這裡下的是:

下載完成之後進行默認安裝即可:

默認的安裝路徑是C:Program Files
odejs

2安裝vue-cli(vue腳手架)

vue-cli是用node編寫的命令行工具，我們需要進行全局安裝。打開命令行工具，輸入指令：

npm install -g vue-cli

也可以安裝一個npm的淘寶鏡像，這樣安裝快一些

安裝命令如下：

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

安裝完成以後，執行如下命令：

vue --version

得到安裝的vue版本是2.9.3

3 vue腳手架的基本使用

初始化項目

定位到創建項目的目錄下

執行命令：vue init模板類型 項目名稱

模板類型可以使用vue list指令查看

項目名稱可以自己定義vue

生成項目模板的命令格式為

vue init

：模板名，比如webpack, simple, browserify

： 本地文件夾名稱

我們可以使用vue-cli來快速生成一個基於Webpack構建的項目。打開命令行工具，輸入如下命令：

vue init webpack my-project

所有模板默認安裝的是Vue 2.x版本，如果需要安裝1.x版本，需要輸入如下指令：$ vue init webpack#1.0 my-project

有一系列交互問題，同意按y，不同意按n。

開始演示:

Windown+r cmd進入控制台 進入你想要創建項目的目錄中;

或者直接在你想要創建項目的目錄中shift+滑鼠右鍵 在此處打開控制台

在這裡我們可以查看項目結構:

安裝命令行給出的提示，我們依次輸入如下指令：

cd myvue/shift+滑鼠右鍵在此處打開控制台

cnpm install

安裝過程如下：

安裝完畢以後會在對應的目錄下生成如下文件，多了一個node-module文件，裡面是依賴的node工具包：

配置完成之後,就可以啟動項目了:

在cmd輸入命令:

npm run dev

默認監聽的是8080埠

甚至連Apche伺服器都不需要自己啟動，在瀏覽器中輸入http://localhost:8080，生成的頁面如下：

接下來我們可以嘗試修改下初始化的項目，將Hello.vue修改為以下代碼：

路徑:I:vue_demomyvuesrccomponents

如果覺得對您有幫助請關注服務好[軟體小學生]

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！