Vue2.0如何搭建腳手架

本篇內(nèi)容主要講解“Vue2.0如何搭建腳手架”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學(xué)習(xí)“Vue2.0如何搭建腳手架”吧!

一、安裝node.js

1、進入官網(wǎng)https://nodejs.org/en/download/

根據(jù)電腦操作系統(tǒng)，選擇相應(yīng)版本的文件進行下載。

2、下載文件后雙擊進行安裝

安裝完成以后進入node.js的安裝目錄：D:\Program Files\nodejs\（這里是我本機安裝的目錄，其他機器目錄可能不同），你會發(fā)現(xiàn)里面自帶了npm，直接用npm安裝環(huán)境即可。

二、安裝cnpm

• 說明：npm(node package manager)是node.js的包管理器，用于node插件管理（包括安裝、卸載、管理依賴等）。

• 使用npm安裝插件：命令提示符執(zhí)行 npm install <name>。

• 選裝cnpm。因為npm安裝插件是從國外服務(wù)器下載，受網(wǎng)絡(luò)影響大，可能會出現(xiàn)異常，如果npm的服務(wù)器在中國就好了，于是我們樂于分享的淘寶團隊干了這事。來自官網(wǎng)：“這事一個完整npmjs.org鏡像，你可以用此代替官方版本（只讀），同步頻率目前為10分鐘一次，盡量保證與官方服務(wù)同步?！?；　　

• 安裝命令：npm install -g cnpm --registry=https://registry.npm.taobao.org。

• 查看版本：輸入cnpm-v，可以查看當(dāng)前cnpm的版本。

注意：安裝cnpm的時候不是安裝在node.js安裝的地方，要在創(chuàng)建的項目目錄下面安裝。

三、安裝vue-cli腳手架構(gòu)建工具

vue-cli提供了一個官方命令行工具，可以用于快速搭建大型單頁應(yīng)用。該工具提供開箱即用的構(gòu)建工具配置，帶來現(xiàn)代化的前端開發(fā)流程。只需幾分鐘即可創(chuàng)建并啟動一個帶熱重載、保存時靜態(tài)檢查以及可用于生成環(huán)境的構(gòu)建配置的項目。

1、安裝命令

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

注意：g表示全局安裝。

出現(xiàn)如下的界面表示安裝完成：

2、檢查是否安裝成功

安裝完成之后輸入 vue -V（注意這里是大寫的"V"），如下圖所示，如果出現(xiàn)相應(yīng)的版本號，則說明安裝成功。

四、創(chuàng)建一個基于webpack模板的新項目

要創(chuàng)建項目，首先我們要選定目錄，然后在命令行中把目錄轉(zhuǎn)到選定的目錄?？梢允褂孟旅娴拿睿?/p>

$ vue init webpack my-app

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

輸入命令以后直接按回車執(zhí)行：

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

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

Project description (A Vue.js project)：項目描述，這里是“我的第一個Vue項目”。

Author：作者。

Install vue-router? (Y/N)：是否安裝Vue路由，也就是以后是spa(但頁面應(yīng)該需要的模塊)。

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

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

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

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

五、運行項目

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

運行成功以后，根據(jù)提示，在瀏覽器中輸入http://localhost:8080,瀏覽器顯示的頁面如下：

注意：服務(wù)啟動以后，就不能關(guān)閉了

到此，相信大家對“Vue2.0如何搭建腳手架”有了更深的了解，不妨來實際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進入相關(guān)頻道進行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！