Vue2.0腳手架搭建
一、安裝node.js
1、進(jìn)入官網(wǎng)https://nodejs.org/en/download/
根據(jù)電腦操作系統(tǒng)，選擇相應(yīng)版本的文件進(jìn)行下載。
2、下載文件后雙擊進(jìn)行安裝
安裝完成以后進(jìn)入node.js的安裝目錄：D:\Program Files\nodejs\（這里是我本機(jī)安裝的目錄，其他機(jī)器目錄可能不同），你會(huì)發(fā)現(xiàn)里面自帶了npm，直接用npm安裝環(huán)境即可。
二、安裝cnpm
- 說明：npm(node package manager)是node.js的包管理器，用于node插件管理（包括安裝、卸載、管理依賴等）。
- 使用npm安裝插件：命令提示符執(zhí)行 npm install <name>。
- 選裝cnpm。因?yàn)閚pm安裝插件是從國外服務(wù)器下載，受網(wǎng)絡(luò)影響大，可能會(huì)出現(xiàn)異常，如果npm的服務(wù)器在中國就好了，于是我們樂于分享的淘寶團(tuán)隊(duì)干了這事。來自官網(wǎng)：“這事一個(gè)完整npmjs.org鏡像，你可以用此代替官方版本（只讀），同步頻率目前為10分鐘一次，盡量保證與官方服務(wù)同步。”；
- 安裝命令：npm install -g cnpm --registry=https://registry.npm.taobao.org。
- 查看版本：輸入cnpm-v，可以查看當(dāng)前cnpm的版本。
注意：安裝cnpm的時(shí)候不是安裝在node.js安裝的地方，要在創(chuàng)建的項(xiàng)目目錄下面安裝。
三、安裝vue-cli腳手架構(gòu)建工具
vue-cli提供了一個(gè)官方命令行工具，可以用于快速搭建大型單頁應(yīng)用。該工具提供開箱即用的構(gòu)建工具配置，帶來現(xiàn)代化的前端開發(fā)流程。只需幾分鐘即可創(chuàng)建并啟動(dòng)一個(gè)帶熱重載、保存時(shí)靜態(tài)檢查以及可用于生成環(huán)境的構(gòu)建配置的項(xiàng)目。
1、安裝命令
命令：$ cnpm install vue-cli -g。如下圖所示：
注意：g表示全局安裝。
出現(xiàn)如下的界面表示安裝完成：
2、檢查是否安裝成功
安裝完成之后輸入 vue -V（注意這里是大寫的"V"），如下圖所示，如果出現(xiàn)相應(yīng)的版本號(hào)，則說明安裝成功。
四、創(chuàng)建一個(gè)基于webpack模板的新項(xiàng)目
要?jiǎng)?chuàng)建項(xiàng)目，首先我們要選定目錄，然后在命令行中把目錄轉(zhuǎn)到選定的目錄?？梢允褂孟旅娴拿睿?/p>
$ vue init webpack my-app
注意：my-app為自定義的項(xiàng)目名稱,自定義的項(xiàng)目名稱中不能包含大寫字母。
輸入命令以后直接按回車執(zhí)行：
運(yùn)行初始化命令的時(shí)候會(huì)讓用戶輸入幾個(gè)基本的選項(xiàng)，如項(xiàng)目名稱、描述、作者等信息。例如：
Project name (myvuedemo) ：項(xiàng)目名稱，這里是myvuedemo。
Project description (A Vue.js project)：項(xiàng)目描述，這里是“我的第一個(gè)Vue項(xiàng)目”。
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)：選擇一個(gè)預(yù)置ESLint（使用箭頭鍵）。
Set up unit tests (Y/n) y：設(shè)置單元測(cè)試。
Setup e2e tests with Nightwatch? (Y/n) ：設(shè)置端到端測(cè)試。
五、運(yùn)行項(xiàng)目
輸入下面的命令：$ cnpm run dev。
運(yùn)行成功以后，根據(jù)提示，在瀏覽器中輸入http://localhost:8080,瀏覽器顯示的頁面如下：
注意：服務(wù)啟動(dòng)以后，就不能關(guān)閉了
到此為止，Vue.js的腳手架搭建完成。
到此這篇關(guān)于Vue2.0搭建腳手架的文章就介紹到這了。希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Electron實(shí)現(xiàn)靜默打印小票的流程詳解
很多情況下程序中使用的打印都是用戶無感知的,并且想要靈活的控制打印內(nèi)容,往往需要借助打印機(jī)給我們提供的api再進(jìn)行開發(fā),這種開發(fā)方式非常繁瑣,并且開發(fā)難度較大,本文給大家介紹了Electron實(shí)現(xiàn)靜默打印小票的流程,感興趣的朋友可以參考下2024-06-06
element ui 表格動(dòng)態(tài)列顯示空白bug 修復(fù)方法
今天小編就為大家分享一篇element ui 表格動(dòng)態(tài)列顯示空白bug 修復(fù)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
layui實(shí)際項(xiàng)目使用過程中遇到的兼容性問題及解決
這篇文章主要介紹了layui實(shí)際項(xiàng)目使用過程中遇到的兼容性問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
Vue實(shí)現(xiàn)購物車的全選、單選、顯示商品價(jià)格代碼實(shí)例
這篇文章主要介紹了Vue實(shí)現(xiàn)購物車的全選、單選、顯示商品價(jià)格實(shí)例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
Vue請(qǐng)求java服務(wù)端并返回?cái)?shù)據(jù)代碼實(shí)例
這篇文章主要介紹了Vue請(qǐng)求java服務(wù)端并返回?cái)?shù)據(jù)代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-11-11
VS?Code打開vue文件出現(xiàn)很多黃色波浪線的完美解決辦法
作為一名經(jīng)驗(yàn)豐富的開發(fā)者,下面這篇文章主要給大家介紹了關(guān)于VS?Code打開vue文件出現(xiàn)很多黃色波浪線的完美解決辦法,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2024-04-04
Vue3已經(jīng)穩(wěn)定了相當(dāng)長(zhǎng)一段時(shí)間了。許多代碼庫都在生產(chǎn)環(huán)境中使用它，其他人最終都將不得不遷移到Vue3。我現(xiàn)在有機(jī)會(huì)使用它并記錄了我的錯(cuò)誤，下面這些錯(cuò)誤你可能想要避免2023-03-03
vue實(shí)現(xiàn)右鍵點(diǎn)擊彈框信息功能
這篇文章主要介紹了vue實(shí)現(xiàn)右鍵點(diǎn)擊彈框信息功能方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-12-12
本篇文章主要介紹了淺談vuex之mutation和action的基本使用，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08
這篇文章主要為大家詳細(xì)介紹了Vue和原生JS中如何使用自定義字體,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,感興趣的小伙伴可以了解下2024-01-01