使用vue-cli腳手架工具搭建vue-webpack項(xiàng)目
最近更新了webpack配置詳解，可移步vue-cli webpack詳解
對(duì)于Vue.js來說，如果你想要快速開始，那么只需要在你的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)建工具，通過幾個(gè)默認(rèn)的步驟幫助你快速的構(gòu)建Vue.js項(xiàng)目。
1.安裝node環(huán)境
可以使用自帶的終端cmd命令行工具；windows下推薦安裝git bash，可以使用linux命令；
第一步檢測(cè)是否安裝node；沒有安裝node的同學(xué)請(qǐng)到官網(wǎng)下載安裝https://nodejs.org/en/download/
安裝成功后在命令行查看node版本，如果有說明安裝成功。
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無法安裝，可以使用cnpm安裝
$ cnpm install
5.啟動(dòng)本地開發(fā)
本地node服務(wù)器已經(jīng)跑起來了，端口為配置文件中的端口
6.配置路由
創(chuàng)建新的頁面組件，將路由指向該.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)目算是初步跑起來了，后續(xù)會(huì)詳解webpack配置，以及本地mock數(shù)據(jù)開發(fā)等文章，歡迎大家批評(píng)指正！也希望大家多多支持腳本之家。
- 從0搭建vue-cli4腳手架
- Node.js+Vue腳手架環(huán)境搭建的方法步驟
- 如何用vue-cli3腳手架搭建一個(gè)基于ts的基礎(chǔ)腳手架的方法
- 使用vue腳手架（vue-cli）搭建一個(gè)項(xiàng)目詳解
- 仿vue-cli搭建屬于自己的腳手架的方法步驟
- 使用webpack搭建vue項(xiàng)目實(shí)現(xiàn)腳手架功能
- vue-cli3.0 腳手架搭建項(xiàng)目的過程詳解
- vue-cli腳手架搭建的項(xiàng)目去除eslint驗(yàn)證的方法
- vue腳手架搭建項(xiàng)目的兼容性配置詳解
- vue腳手架搭建過程圖解
- 使用vue-cli（vue腳手架）快速搭建項(xiàng)目的方法
- 詳解如何使用vue-cli腳手架搭建Vue.js項(xiàng)目
- 詳解使用vue腳手架工具搭建vue-webpack項(xiàng)目
- vue.js之vue-cli腳手架的搭建詳解
- Vue2.0腳手架搭建
相關(guān)文章
前端實(shí)現(xiàn)不同角色登入展示不同頁面效果實(shí)例
要實(shí)現(xiàn)不同角色登錄跳轉(zhuǎn)不同的前端頁面,可以在登錄成功后,根據(jù)用戶的角色信息,使用路由跳轉(zhuǎn)到不同的頁面,這篇文章主要給大家介紹了關(guān)于前端實(shí)現(xiàn)不同角色登入展示不同頁面效果的相關(guān)資料,需要的朋友可以參考下2024-08-08
基于vue2.0+vuex+localStorage開發(fā)的本地記事本示例
這篇文章主要介紹了基于vue2.0+vuex+localStorage開發(fā)的本地記事本示例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2017-02-02
文章主要介紹了父子傳值、兄弟傳值和provide/inject三種在Vue中進(jìn)行組件間通信的方法,感興趣的朋友跟隨小編一起看看吧2025-03-03
前端Vue全屏screenfull通用解決方案及原理詳細(xì)分析
這篇文章主要給大家介紹了關(guān)于前端Vue全屏screenfull通用解決方案及原理的相關(guān)資料,使用screenfull這一第三方庫可以實(shí)現(xiàn)更穩(wěn)定的全屏功能,需要的朋友可以參考下2024-10-10
手把手教你將vue前端和python腳本使用electron打包成桌面應(yīng)用程序
這篇文章主要介紹了如何將Vue項(xiàng)目和Python腳本打包,并將打包后的文件部署到Vue項(xiàng)目中,文中通過代碼以及圖文介紹的非常詳細(xì),需要的朋友可以參考下2025-01-01
這篇文章主要介紹了Vue中的Ajax?配置代理?slot插槽的相關(guān)知識(shí)，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-06-06
Vue3純前端實(shí)現(xiàn)Vue路由權(quán)限的方法詳解
這篇文章主要給大家介紹了關(guān)于Vue3純前端實(shí)現(xiàn)Vue路由權(quán)限的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用Vue3具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-05-05
setup+ref+reactive實(shí)現(xiàn)vue3響應(yīng)式功能
這篇文章介紹了通過setup+ref+reactive實(shí)現(xiàn)vue3響應(yīng)式功能，文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-11-11
這篇文章主要為大家詳細(xì)介紹了Vue+Antv?F2實(shí)現(xiàn)層疊柱狀圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了前端虛擬列表實(shí)現(xiàn)的思路及完整代碼,虛擬列表是一種優(yōu)化長(zhǎng)列表性能的技術(shù),通過只渲染可視區(qū)域的列表項(xiàng)來提升頁面性能和用戶體驗(yàn),文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-01-01