-- 安裝nodejs

用命令行生成vue項(xiàng)目框架需要npm包管理器來安裝,而npm又是在安裝nodejs的時(shí)候同時(shí)安裝的,

10年專注成都網(wǎng)站制作，企業(yè)網(wǎng)站制作，個(gè)人網(wǎng)站制作服務(wù)，為大家分享網(wǎng)站制作知識(shí)、方案，網(wǎng)站設(shè)計(jì)流程、步驟,成功服務(wù)上千家企業(yè)。為您提供網(wǎng)站建設(shè),網(wǎng)站制作,網(wǎng)頁設(shè)計(jì)及定制高端網(wǎng)站建設(shè)服務(wù),專注于企業(yè)網(wǎng)站制作,高端網(wǎng)頁制作,對(duì)成都護(hù)欄打樁機(jī)等多個(gè)行業(yè)，擁有豐富的網(wǎng)站設(shè)計(jì)經(jīng)驗(yàn)。

所以首先要安裝nodejs,學(xué)習(xí)vue有必要了解下nodejs和npm的基本知識(shí):

nodejs安裝: http://blog.csdn.net/zzwwjjdj1/article/details/51980082

npm 介紹: http://blog.csdn.net/zzwwjjdj1/article/details/51982433

-- 安裝命令行工具

npm install -g vue-cli

-g表示全局安裝, vue-cli是模塊,全局安裝的模塊可以在命令行直接使用.

紅框里是安裝命令,由于npm網(wǎng)站在國內(nèi)速度非常慢,所以在命令后面加上淘寶的鏡像,

很快就安裝好了.也可以使用cnpm安裝.

安裝后在命令行輸入 vue -version 能看到版本號(hào)表示全局安裝成功,下面就可以使用命令行創(chuàng)建項(xiàng)目了.

-- 創(chuàng)建項(xiàng)目框架

vue init webpack my-project

創(chuàng)建一個(gè)基于"webpack"的項(xiàng)目,后面是項(xiàng)目名,

按照提示輸入,項(xiàng)目名,項(xiàng)目描述,項(xiàng)目作者等等（選擇的時(shí)候選擇no就可以了，如上圖）,看到最后這句項(xiàng)目就創(chuàng)建好了,

項(xiàng)目結(jié)構(gòu):這是安裝了依賴以后的截圖,沒安裝依賴以前是沒有node_modules文件夾的

剛我們命令行輸入的東西就在package.json這個(gè)文件里,打開文件

項(xiàng)目名字,版本,描述,作者等,后面還有運(yùn)行項(xiàng)目命令,項(xiàng)目依賴,開發(fā)環(huán)境項(xiàng)目依賴等.

-- 安裝依賴

生成了項(xiàng)目以后是不能直接運(yùn)行的,現(xiàn)在很多項(xiàng)目都依賴許許多多的模塊,需要逐一安裝,

ctrl+c 停掉剛生成項(xiàng)目的命令,cd vue-project 進(jìn)入項(xiàng)目跟目錄, 用命令npm install 安裝

同樣是使用淘寶鏡像.

當(dāng)這個(gè)命令運(yùn)行完成以后會(huì)多出一個(gè)node_modules文件夾,里面就是項(xiàng)目所需的所有依賴,

可以看到有很多模塊,這些模塊都是在package.json文件里定義好了的.

dependencies是項(xiàng)目依賴,

devDependencies是開發(fā)時(shí)項(xiàng)目依賴.

-- 運(yùn)行測(cè)試

好了,依賴安裝完成后就可以運(yùn)行我們的項(xiàng)目了命令:

npm run dev

看到這樣的輸入項(xiàng)目就運(yùn)行起來了,然后打開瀏覽器,輸入第二個(gè)紅框的地址 localhost:8080,

瀏覽器截圖.

項(xiàng)目就運(yùn)行起來了.命令行生成的vue項(xiàng)目,還支持熱啟動(dòng),當(dāng)項(xiàng)目文件有改動(dòng)的時(shí)候,頁面會(huì)自動(dòng)變化,

<script>標(biāo)簽里的js代碼修改后,還得手動(dòng)刷新頁面,不過已經(jīng)非常棒了.

意外金喜的博客 : http://blog.csdn.net/zzwwjjdj1

創(chuàng)新互聯(lián)www.cdcxhl.cn，專業(yè)提供香港、美國云服務(wù)器，動(dòng)態(tài)BGP最優(yōu)骨干路由自動(dòng)選擇，持續(xù)穩(wěn)定高效的網(wǎng)絡(luò)助力業(yè)務(wù)部署。公司持有工信部辦法的idc、isp許可證， 機(jī)房獨(dú)有T級(jí)流量清洗系統(tǒng)配攻擊溯源，準(zhǔn)確進(jìn)行流量調(diào)度，確保服務(wù)器高可用性。佳節(jié)活動(dòng)現(xiàn)已開啟，新人活動(dòng)云服務(wù)器買多久送多久。

分享題目：命令行生成vue項(xiàng)目框架-創(chuàng)新互聯(lián)
文章起源：http://jinyejixie.com/article26/eicjg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站維護(hù)、品牌網(wǎng)站設(shè)計(jì)、響應(yīng)式網(wǎng)站、網(wǎng)站排名、網(wǎng)站收錄、企業(yè)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)