詳解使用vue腳手架工具搭建vue-webpack項(xiàng)目
對(duì)于Vue.js來(lái)說(shuō),如果你想要快速開始,那么只需要在你的html中引入一個(gè)<script>
標(biāo)簽,加上CDN的地址即可。但是,這并不算是一個(gè)完整的vue實(shí)際應(yīng)用。在實(shí)際應(yīng)用中,我們必須要一系列的工具,包括:模塊化,轉(zhuǎn)譯,預(yù)處理,熱加載,靜態(tài)檢測(cè)和自動(dòng)化測(cè)試等。對(duì)于一個(gè)需要長(zhǎng)期維護(hù)和大型的項(xiàng)目而言,這些工具是必不可少的,但是嘗試配置初始化這些很痛苦.這就是我們發(fā)布vue官方提供的腳手架工具的原因,一個(gè)簡(jiǎn)單的構(gòu)建工具,通過(guò)幾個(gè)默認(rèn)的步驟幫助你快速的構(gòu)建Vue.js項(xiàng)目。
1.安裝node環(huán)境
可以使用自帶的終端cmd命令行工具;windows下推薦安裝git bash,可以使用linux命令;
第一步檢測(cè)是否安裝node;沒(méi)有安裝node的同學(xué)請(qǐng)到官網(wǎng)下載安裝https://nodejs.org/en/download/
安裝成功后在命令行查看node版本,如果有說(shuō)明安裝成功。
2.安裝vue腳手架工具vue-cli
大家在安裝node的時(shí)候,會(huì)自動(dòng)安裝npm;
可以先行查看npm版本;
使用npm安裝vue-cli:
npm install vue-cli -g
3.準(zhǔn)備工作已經(jīng)完畢,下面直接使用vue-cli初始化webpack項(xiàng)目;
vue init webpackyourprojectname(項(xiàng)目名)
中間會(huì)輸入項(xiàng)目名稱,項(xiàng)目描述,作者等信息;
一路回車
可以看到我們剛才創(chuàng)建的webpack項(xiàng)目已經(jīng)建好了:
4.查看目錄結(jié)構(gòu)
安裝依賴
$ npm install
國(guó)內(nèi)有些包npm無(wú)法安裝,可以使用cnpm安裝
$ npm install
5.啟動(dòng)本地開發(fā)
npm run dev
本地node服務(wù)器已經(jīng)跑起來(lái)了,端口為配置文件中的端口
6.配置路由
創(chuàng)建新的頁(yè)面組件,將路由指向該.vue 文件
到此,使用vue-cli創(chuàng)建的vue項(xiàng)目基本可以上手開發(fā)了,恭喜!
7.打包上線
$ npm run build
看到build complete,證明打包成功;
觀察目錄結(jié)構(gòu),發(fā)現(xiàn)多了一個(gè)dist文件夾,這便是webpack打包后的文件,將改文件和后臺(tái)商量,以什么形式放到服務(wù)器即可,上線成功。
啦啦啦~ 至此,我們vue項(xiàng)目算是初步跑起來(lái)了,后續(xù)會(huì)詳解webpack配置,以及本地mock數(shù)據(jù)開發(fā)等文章,歡迎大家批評(píng)指正!
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家?!?/p>
- vue3.0 項(xiàng)目搭建和使用流程
- 如何搭建一個(gè)完整的Vue3.0+ts的項(xiàng)目步驟
- Vue項(xiàng)目環(huán)境搭建詳細(xì)總結(jié)
- Vue CLI3搭建的項(xiàng)目中路徑相關(guān)問(wèn)題的解決
- vue-cli3搭建項(xiàng)目的詳細(xì)步驟
- 用Vue-cli搭建的項(xiàng)目中引入css報(bào)錯(cuò)的原因分析
- VSCode搭建vue項(xiàng)目的實(shí)現(xiàn)步驟
- vue-cli3.0 腳手架搭建項(xiàng)目的過(guò)程詳解
- 使用Vue-cli 3.0搭建Vue項(xiàng)目的方法
- vite+vue3項(xiàng)目初始化搭建的實(shí)現(xiàn)步驟
相關(guān)文章
Vue3+vite實(shí)現(xiàn)使用svg可改變顏色的全過(guò)程
Vue3 + Vite 使用 SVG 的方法主要是為了引入和利用圖標(biāo)庫(kù)、自定義組件以及通過(guò)插件簡(jiǎn)化項(xiàng)目構(gòu)建過(guò)程,這篇文章給大家介紹了Vue3+vite實(shí)現(xiàn)使用svg可改變顏色的全過(guò)程,需要的朋友可以參考下2024-07-07elementui中tabel組件的scope.$index的使用及說(shuō)明
這篇文章主要介紹了elementui中tabel組件的scope.$index的使用及說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-10-10vue實(shí)現(xiàn)簡(jiǎn)單全選和反選功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)簡(jiǎn)單全選和反選功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-09-09Vue計(jì)算屬性與監(jiān)視屬性實(shí)現(xiàn)方法詳解
最近在學(xué)習(xí)vue,學(xué)習(xí)中遇到了一些感覺挺重要的知識(shí)點(diǎn),感覺有必要整理下來(lái),這篇文章主要給大家介紹了關(guān)于Vue.js中計(jì)算屬性、監(jiān)視屬性的相關(guān)資料,需要的朋友可以參考下2022-08-08Vuex2.0+Vue2.0構(gòu)建備忘錄應(yīng)用實(shí)踐
這篇文章主要為大家詳細(xì)介紹了Vuex2.0+Vue2.0構(gòu)建備忘錄應(yīng)用實(shí)踐,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-11-11解決vue前端rsa加密遇到的問(wèn)題message too long for RS
這篇文章主要介紹了解決vue前端rsa加密遇到的問(wèn)題message too long for RSA,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07淺談VUE單頁(yè)應(yīng)用首屏加載速度優(yōu)化方案
這篇文章主要介紹了淺談VUE單頁(yè)應(yīng)用首屏加載速度優(yōu)化方案,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-08-08