您好,登錄后才能下訂單哦!
本文介紹了通過命令行生成vue項目框架的方法,現在分享給大家
-- 安裝nodejs
用命令行生成vue項目框架需要npm包管理器來安裝,而npm又是在安裝nodejs的時候同時安裝的,
所以首先要安裝nodejs,學習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網站在國內速度非常慢,所以在命令后面加上淘寶的鏡像,很快就安裝好了.也可以使用cnpm安裝.
安裝后在命令行輸入 vue -version 能看到版本號表示全局安裝成功,下面就可以使用命令行創建項目了.
-- 創建項目框架
vue init webpack my-project
創建一個基于"webpack"的項目,后面是項目名,
按照提示輸入,項目名,項目描述,項目作者等等,看到最后這句項目就創建好了,
項目結構:這是安裝了依賴以后的截圖,沒安裝依賴以前是沒有node_modules文件夾的
剛我們命令行輸入的東西就在package.json這個文件里,打開文件
項目名字,版本,描述,作者等,后面還有運行項目命令,項目依賴,開發環境項目依賴等.
-- 安裝依賴
生成了項目以后是不能直接運行的,現在很多項目都依賴許許多多的模塊,需要逐一安裝,
ctrl+c
停掉剛生成項目的命令,cd vue-project
進入項目跟目錄, 用命令npm install
安裝
同樣是使用淘寶鏡像.
當這個命令運行完成以后會多出一個node_modules
文件夾,里面就是項目所需的所有依賴,可以看到有很多模塊,這些模塊都是在package.json文件里定義好了的.
dependencies是項目依賴,
devDependencies是開發時項目依賴.
-- 運行測試
好了,依賴安裝完成后就可以運行我們的項目了命令:
npm run dev
看到這樣的輸入項目就運行起來了,然后打開瀏覽器,輸入第二個紅框的地址 localhost:8080,
瀏覽器截圖.
項目就運行起來了.命令行生成的vue項目,還支持熱啟動,當項目文件有改動的時候,頁面會自動變化,<script>標簽里的js代碼修改后,還得手動刷新頁面,不過已經非常棒了.
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持億速云。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。