vue 創(chuàng)建項目(npm安裝→初始化項目)
cli2 和 >cli2腳手架創(chuàng)建
第一步npm安裝
首先:先從nodejs.org中下載nodejs
圖1
雙擊安裝,在安裝界面一直Next
圖2
圖3
圖4
直到Finish完成安裝够坐。
打開控制命令行程序(CMD),檢查是否正常
圖5
使用淘寶NPM?鏡像
大家都知道國內(nèi)直接使用npm 的官方鏡像是非常慢的,這里推薦使用淘寶 NPM 鏡像。
$? npm? install? -g? cnpm? --registry=https://registry.npm.taobao.org
這樣就可以使用cnpm 命令來安裝模塊了:
第二步項目初始化??
1.第一步:安裝vue-cli
cnpm install vue-cli -g? ? ? //全局安裝 vue-cli
圖6
查看vue-cli是否成功厚骗,不能檢查vue-cli,需要檢查vue
圖7
選定路徑示启,新建vue項目,這里我是在桌面上新建了sun文件夾领舰,cd目錄路徑
下面我一項目名為sell新建vue項目
cli2 創(chuàng)建項目
vue init webpack? ”項目名稱“
圖8
現(xiàn)在已經(jīng)創(chuàng)建好了夫嗓,那就讓項目先安裝下依賴再運行一下,會出現(xiàn)下面的頁面冲秽,操作指令是:
cnpm install
cnpm run dev
注意 這里要在sell下進(jìn)行安裝和運行哦!!!
圖9
啦啦啦? 安裝成功舍咖。
圖10
利用vue-cil初始化構(gòu)建vue項目,我們會獲得一個初始化的文件夾結(jié)構(gòu)锉桑,如下:
圖11
?> cli2 創(chuàng)建項目
vue create ?”項目名稱“
圖12
我這里選擇第一項 回車后直接初始化項目(圖13)排霉,也可以選擇最后一項 Manually select features? 自行選擇配置(圖14)
圖13
這里與cli2的運行方式不太一樣 由 npm run dev 變成npm run serve ,當(dāng)然這也可以設(shè)置,可以根據(jù)自己習(xí)慣配置民轴。
選擇Manually select features可自己選擇配置攻柠,看個人項目需求
空格鍵是選中與取消,A鍵是全選
圖14
TypeScript 支持使用 TypeScript 書寫源碼
Progressive Web App (PWA) Support PWA 支持后裸。
Router 支持 vue-router 瑰钮。
Vuex 支持 vuex 。
CSS Pre-processors 支持 CSS 預(yù)處理器微驶。
Linter / Formatter 支持代碼風(fēng)格檢查和格式化浪谴。
Unit Testing 支持單元測試。
E2E Testing 支持 E2E 測試。
裝好后苟耻,啟動
cd hello-world // 進(jìn)入到項目根目錄
npm run serve // 啟動項目
Vue CLI >= 3 和舊版使用了相同的?vue?命令篇恒,所以 Vue CLI 2 (vue-cli) 被覆蓋了。如果你仍然需要使用舊版本的?vue init?功能梁呈,你可以全局安裝一個橋接工具:
下面開始進(jìn)入你的vue之旅吧;槎取!
https://cn.vuejs.org/? ? ? ? ? ? ? ? ? ? //官網(wǎng)才是開始的必經(jīng)之路官卡。蝗茁。。寻咒。
此文轉(zhuǎn)自程序員是粉色的