這篇文章將為大家詳細講解有關怎么使用vue-cli腳手架工具搭建vue-webpack項目,小編覺得挺實用的,因此分享給大家做個參考,希望大家閱讀完這篇文章后可以有所收獲。
創(chuàng)新互聯(lián)主要為客戶提供服務項目涵蓋了網(wǎng)頁視覺設計、VI標志設計、全網(wǎng)營銷推廣、網(wǎng)站程序開發(fā)、HTML5響應式重慶網(wǎng)站建設公司、移動網(wǎng)站建設、微商城、網(wǎng)站托管及成都網(wǎng)站維護、WEB系統(tǒng)開發(fā)、域名注冊、國內外服務器租用、視頻、平面設計、SEO優(yōu)化排名。設計、前端、后端三個建站步驟的完善服務體系。一人跟蹤測試的建站服務標準。已經(jīng)為混凝土攪拌機行業(yè)客戶提供了網(wǎng)站推廣服務。
最近更新了webpack配置詳解,可移步vue-cli webpack詳解
對于Vue.js來說,如果你想要快速開始,那么只需要在你的html中引入一個標簽,加上cdn的地址即可。但是,這并不算是一個完整的vue實際應用。在實際應用中,我們必須要一系列的工具,包括:模塊化,轉譯,預處理,熱加載,靜態(tài)檢測和自動化測試等。對于一個需要長期維護和大型的項目而言,這些工具是必不可少的,但是嘗試配置初始化這些很痛苦.這就是我們發(fā)布vue官方提供的腳手架工具的原因,一個簡單的構建工具,通過幾個默認的步驟幫助你快速的構建Vue.js項目。
1.安裝node環(huán)境
可以使用自帶的終端cmd命令行工具;windows下推薦安裝git bash,可以使用linux命令;
第一步檢測是否安裝node;沒有安裝node的同學請到官網(wǎng)下載安裝https://nodejs.org/en/download/
安裝成功后在命令行查看node版本,如果有說明安裝成功。
2.安裝vue腳手架工具vue-cli
大家在安裝node的時候,會自動安裝npm;
可以先行查看npm版本;
使用npm安裝vue-cli:
npm install vue-cli -g
3.準備工作已經(jīng)完畢,下面直接使用vue-cli初始化webpack項目;
vue init webpackyourprojectname(項目名)
中間會輸入項目名稱,項目描述,作者等信息;
一路回車
可以看到我們剛才創(chuàng)建的webpack項目已經(jīng)建好了:
4.查看目錄結構
安裝依賴
$ npm install
國內有些包npm無法安裝,可以使用cnpm安裝
$ cnpm install
5.啟動本地開發(fā)
本地node服務器已經(jīng)跑起來了,端口為配置文件中的端口
6.配置路由
創(chuàng)建新的頁面組件,將路由指向該.vue 文件
到此,使用vue-cli創(chuàng)建的vue項目基本可以上手開發(fā)了,恭喜!
7.打包上線
$ npm run build
看到build complete,證明打包成功;
觀察目錄結構,發(fā)現(xiàn)多了一個dist文件夾,這便是webpack打包后的文件,將改文件和后臺商量,以什么形式放到服務器即可,上線成功。
關于“怎么使用vue-cli腳手架工具搭建vue-webpack項目”這篇文章就分享到這里了,希望以上內容可以對大家有一定的幫助,使各位可以學到更多知識,如果覺得文章不錯,請把它分享出去讓更多的人看到。