怎么使用vue-cli腳手架工具搭建vue-webpack項目

這篇文章將為大家詳細講解有關怎么使用vue-cli腳手架工具搭建vue-webpack項目，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

最近更新了webpack配置詳解，可移步vue-cli webpack詳解

對于Vue.js來說，如果你想要快速開始，那么只需要在你的html中引入一個<script>標簽，加上CDN的地址即可。但是，這并不算是一個完整的vue實際應用。在實際應用中，我們必須要一系列的工具，包括：模塊化，轉譯，預處理，熱加載，靜態檢測和自動化測試等。對于一個需要長期維護和大型的項目而言，這些工具是必不可少的，但是嘗試配置初始化這些很痛苦.這就是我們發布vue官方提供的腳手架工具的原因，一個簡單的構建工具，通過幾個默認的步驟幫助你快速的構建Vue.js項目。

1.安裝node環境

可以使用自帶的終端cmd命令行工具；windows下推薦安裝git bash，可以使用linux命令；

第一步檢測是否安裝node；沒有安裝node的同學請到官網下載安裝https://nodejs.org/en/download/

安裝成功后在命令行查看node版本，如果有說明安裝成功。

2.安裝vue腳手架工具vue-cli

大家在安裝node的時候，會自動安裝npm；

可以先行查看npm版本；

使用npm安裝vue-cli：

npm install vue-cli -g

3.準備工作已經完畢，下面直接使用vue-cli初始化webpack項目；

vue init webpackyourprojectname(項目名)

中間會輸入項目名稱，項目描述，作者等信息；

一路回車

可以看到我們剛才創建的webpack項目已經建好了：

4.查看目錄結構

安裝依賴

$ npm install

國內有些包npm無法安裝，可以使用cnpm安裝

$ cnpm install

5.啟動本地開發

本地node服務器已經跑起來了，端口為配置文件中的端口

6.配置路由

創建新的頁面組件，將路由指向該.vue 文件

到此，使用vue-cli創建的vue項目基本可以上手開發了，恭喜！

7.打包上線

$ npm run build

看到build complete，證明打包成功；

觀察目錄結構，發現多了一個dist文件夾，這便是webpack打包后的文件，將改文件和后臺商量，以什么形式放到服務器即可，上線成功。

關于“怎么使用vue-cli腳手架工具搭建vue-webpack項目”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。