Vue搭建腳手架(Vue-cli)

安裝node.js

node官網(wǎng)下載并安裝node,安裝步驟很簡單,只要一路“next”就可以了。

安裝完成后,打開命令行工具輸入命令node (此處有空格)-v,如下圖,如果出現(xiàn)對應(yīng)版本號,就說明安裝成功了。


我們所需要的npm包管理器,是集成在node中的,所以,直接輸入npm -v就會如下圖所示,顯示出npm的版本信息。


到這里node的環(huán)境已經(jīng)安裝完了,npm包管理工具也有了,但是由于npm的有些資源被墻,為了更快更穩(wěn)定,所以我們需要切換到淘寶的npm鏡像——cnpm。


安裝cnpm

點擊進入淘寶的cnpm網(wǎng)站,里面有詳細的配置方法。

或者直接在命令行輸入:

$ npm install -g cnpm --registry=https://registry.npm.taobao.org(如沒安裝git,則省略$符號

然后等待,安裝完成。

輸入cnpm -v,可以查看當(dāng)前cnpm版本,這個和npm的版本還是不一樣的。


使用cnpm的方法就是,需要用到npm的地方直接使用cnpm替換就可以了


vue安裝


在用 vue.js 構(gòu)建大型應(yīng)用時推薦使用 npm 安裝,npm 能很好地和諸如 webpack 或 browserify 模塊打包器配合使用。vue.js 也提供配套工具來開發(fā)單文件組件。

$ cnpm install vue


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


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

# 全局安裝 vue-cli

$ cnpm install--global vue-cli


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

要創(chuàng)建項目,首先我們要選定目錄,然后再命令行中把目錄轉(zhuǎn)到選定的目錄。可以使用:

#my-project為自定義項目名

$ vue init webpackmy-project

初始化一個項目,或使用:

$ vue init webpack-simple?my-project

初始化一個簡單的項目


運行初始化命令的時候回讓用戶輸入幾個基本的選項,如項目名稱,描述,作者等信息,如果不想填直接回車默認就好。??

需要注意的是項目的名稱不能大寫,不然會報錯。

Project name (my-project) # 項目名稱(我的項目)

Project description (A Vue.js project) # 項目描述一個Vue.js 項目

Author 作者(你的名字)

Install vue-router? (Y/n) # 是否安裝Vue路由,也就是以后是spa(但頁面應(yīng)用需要的模塊)

Use ESLint to lint your code? (Y/n) # 使用 ESLint 到你的代碼? (Y [ yes ] / N [ no ])

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

Setup unit tests with Karma + Mocha? (Y/n) # 設(shè)置單元測Karma + Mocha? (Y/ N)

Setup e2e tests with Nightwatch? (Y/n) # 設(shè)置端到端測試,Nightwatch? (Y/ N)

當(dāng)然這些都看你自己個人的情況,我這里是全選了是。



安裝項目所需要的依賴

剛初始化的項目是沒有依賴的,如果運行會報類似這樣的錯誤,


所以在這之前需要解決項目的依賴問題,使用下面的命令安裝項目的依賴。

$ cnpm?install

如果出現(xiàn)如下圖情況,說明依賴解決成功。




運行項目

$ cnpm run dev


如果看到這個界面,說明配置成功

打包項目

$ cnpm run build

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 228,333評論 6 531
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 98,491評論 3 416
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 176,263評論 0 374
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經(jīng)常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 62,946評論 1 309
  • 正文 為了忘掉前任,我火速辦了婚禮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 71,708評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 55,186評論 1 324
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,255評論 3 441
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 42,409評論 0 288
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 48,939評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 40,774評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,976評論 1 369
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,518評論 5 359
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 44,209評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,641評論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,872評論 1 286
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,650評論 3 391
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 47,958評論 2 373