本文介紹了通過命令行生成vue項目框架的方法，現(xiàn)在分享給大家

成都創(chuàng)新互聯(lián)公司是專業(yè)的花山網(wǎng)站建設(shè)公司，花山接單;提供成都網(wǎng)站建設(shè)、網(wǎng)站制作,網(wǎng)頁設(shè)計,網(wǎng)站設(shè)計,建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進行花山網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團隊,希望更多企業(yè)前來合作!

-- 安裝nodejs

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

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

nodejs安裝: https://www.jb51.net/article/113457.htm

npm 介紹: https://www.jb51.net/article/87893.htm

-- 安裝命令行工具

npm install -g vue-cli

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

紅框里是安裝命令,由于npm網(wǎng)站在國內(nèi)速度非常慢,所以在命令后面加上淘寶的鏡像,很快就安裝好了.也可以使用cnpm安裝.

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

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

vue init webpack my-project

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

按照提示輸入,項目名,項目描述,項目作者等等,看到最后這句項目就創(chuàng)建好了,

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

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

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

-- 安裝依賴

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

ctrl+c 停掉剛生成項目的命令,cd vue-project 進入項目跟目錄, 用命令npm install 安裝

同樣是使用淘寶鏡像.

當(dāng)這個命令運行完成以后會多出一個node_modules文件夾,里面就是項目所需的所有依賴,可以看到有很多模塊,這些模塊都是在package.json文件里定義好了的.

dependencies是項目依賴,

devDependencies是開發(fā)時項目依賴.

-- 運行測試

好了,依賴安裝完成后就可以運行我們的項目了命令:

npm run dev

看到這樣的輸入項目就運行起來了,然后打開瀏覽器,輸入第二個紅框的地址 localhost:8080,

瀏覽器截圖.

項目就運行起來了.命令行生成的vue項目,還支持熱啟動,當(dāng)項目文件有改動的時候,頁面會自動變化,<script>標(biāo)簽里的js代碼修改后,還得手動刷新頁面,不過已經(jīng)非常棒了.

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

網(wǎng)站標(biāo)題：通過命令行生成vue項目框架的方法
文章源于：http://m.rwnh.cn/article26/igjecg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站制作、移動網(wǎng)站建設(shè)、網(wǎng)站排名、網(wǎng)站內(nèi)鏈、外貿(mào)網(wǎng)站建設(shè)、軟件開發(fā)

廣告

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