通過命令行生成vue項目框架的方法
本文介紹了通過命令行生成vue項目框架的方法，現(xiàn)在分享給大家
-- 安裝nodejs
用命令行生成vue項目框架需要npm包管理器來安裝,而npm又是在安裝nodejs的時候同時安裝的,
所以首先要安裝nodejs,學(xué)習(xí)vue有必要了解下nodejs和npm的基本知識:
nodejs安裝: http://chabaoo.cn/article/113457.htm
npm 介紹: http://chabaoo.cn/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 進(jìn)入項目跟目錄, 用命令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í)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue實現(xiàn)的父組件向子組件傳值功能,結(jié)合完整實例形式簡單分析了vue.js組件傳值的相關(guān)操作技巧,需要的朋友可以參考下2019-01-01
vue中的render函數(shù),它返回的是一個虛擬節(jié)點vnode,也就是我們要渲染的節(jié)點,下面這篇文章主要給大家介紹了關(guān)于Vue中render函數(shù)的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-01-01
這篇文章主要介紹了Vue中使用Echarts的兩種方式,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2018-07-07
vue 項目往往會搭配 vue-router 官方路由管理器，它和 vue.js 的核心深度集成，讓構(gòu)建單頁面應(yīng)用變得易如反掌。這篇文章主要介紹了vue 項目地址去掉 #的方法,需要的朋友可以參考下2018-10-10
vue腳手架創(chuàng)建項目時報catch錯誤及解決
這篇文章主要介紹了vue腳手架創(chuàng)建項目時報catch錯誤及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
vue中v-model如何綁定多循環(huán)表達(dá)式實戰(zhàn)案例
v-model綁定的變量無論是對象還是數(shù)組都是綁定的value值,下面這篇文章主要給大家介紹了關(guān)于vue中v-model如何綁定多循環(huán)表達(dá)式的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
element的el-table自定義最后一行的實現(xiàn)代碼
最后一行要顯示一些其他結(jié)果,用的是element? ui 自帶的數(shù)據(jù)總計的屬性；返回一個數(shù)組,會按下標(biāo)進(jìn)行展示,這篇文章主要介紹了element的el-table自定義最后一行的實現(xiàn)代碼,需要的朋友可以參考下2024-03-03
關(guān)于在Vue中import和require的用法分析
在Vue項目中，我們經(jīng)常需要引入外部的模塊或文件，這時候就會用到import和require這兩個關(guān)鍵字，本文將詳細(xì)分析它們的用法，并提供具體的代碼實例和解釋,需要的朋友可以參考下2023-06-06
這篇文章主要介紹了Vue中如何實現(xiàn)字符串換行問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了vue.js template模板的使用，主要是模仿餓了么布局，用到了4個組件，分別是header.vue,goods.vue,ratings.vue,seller.vue，感興趣的朋友跟隨腳本之家小編一起看看實現(xiàn)代碼2018-08-08