Vue學習入門之腳手架開發環境搭建

1、安裝Vue.js腳手架

所謂“腳手架”就是為了快速搭建應用程序開發框架而設計開發的自動構建工具。在當前各種Web開發框架流行的今天，大部分前端開發工具和框架都設計了自己的“腳手架”工具，而Vue.js框架的腳手架就是vue-cli命令行工具。

Vue.js框架自身的迭代速度很快，目前主流的是Vue 2版本和Vue 3+版本。相比較而言，Vue 3+版本在Vue 2版本的基礎上增加了不少新特性和新功能。因此，也造成了Vue 3+版本與Vue 2版本在使用上多少有些差異。

在Vue.js腳手架（vue-cli）的使用上，Vue 3+版本與Vue 2版本也存在著不同，下面主要以Vue 3+版本進行介紹。安裝vue-cli需要使用node的npm，如果沒有安裝node，可以參照博主《Windows11下安裝壓縮版的Node.js16.7.0》這篇博文進行安裝。

（1）安裝vue-cli

npm install -g @vue/cli

在cmd中輸入以上的命令，安裝效果如圖所示：

（2）查看vue-cli版本

如果想驗證一下vue-cli命令行工具是否安裝成功了，可以通過如下命令查看vue-cli的版本號來進行驗證：

vue -V

如圖所示，顯示對應的vue-cli的版本號，說明vue-cli命令行工具安裝成功了。

2、通過Vue.js腳手架創建應用

Vue.js腳手架功能十分強大，通過vue-cli命令行工具的“vue create”命令，可以直接創建Vue.js應用項目，該應用項目會自動生成若干必要的框架文件，以及一個默認的Vue單文件頁面。同時，這個默認的Vue單文件頁面已經是一個最基本的Vue.js應用了，通過“npm run”命令就可以直接運行測試該應用項目。下面具體介紹一下通過Vue.js腳手架創建應用項目及進行運行測試的過程。

（1）選定好打算創建Vue.js應用項目的目錄，進入該目錄的命令行控制臺，通過“vue create”命令創建指定的項目名稱（createvue），具體命令如下：

vue create vue_demo

（2）在命令行控制臺中執行上面的命令，效果如下圖所示：

（3）通過鍵盤上下鍵，繼續選擇默認的“Default (Vue 3) ([Vue 3] babel, eslint)”項后確認回車，vue-cli命令行工具將會創建剛剛指定的vue_demo項目，并安裝項目所需的相關插件，如下圖所示：

（4）安裝過程需要一段時間，此時需要耐心等待一會兒，等到安裝過程全部完成后，命令行控制臺會提示如圖所示的信息：

命令行控制臺中的提示信息告訴我們，進入項目目錄后通過輸入“npm run serve”命令就可以啟動運行項目了。

（5）接下來，我們就按照上面的提示信息測試一下，效果如下圖所示：

cd vue_demo npm run serve

（6）上圖命令行控制臺中的提示信息告知我們，通過在瀏覽器中輸入“http://localhost:8080/”地址就可以運行項目了，效果如下圖所示：

瀏覽器中運行效果如上圖，說明這個Vue.js項目創建成功了。現在，到這一步基本就完成了一個Vue.js項目的構建、測試和運行任務，設計人員就可以在這個Vue.js項目的骨架上按照自己項目的需求進行開發了。

3、打包Vue項目

（1）在項目開發完成后，還有很重要的一步就是項目的打包和發布，可以通過vue-cli命令行工具的npm run build命令對vue項目進行打包（運行vue項目時，最后也有對應的提示，如下圖）：

（2）根據命令行控制臺中的提示信息，進入項目目錄后通過輸入“npm run build”命令就可以對項目執行打包發布操作，效果如下圖所示：

npm run build

（3）打開項目路徑，會發現路徑下生成了一個dist文件夾，該文件夾就是打包后的項目內容，可以將該文件夾直接部署到Tomcat或者Nginx中進行使用。

至此使用vue腳手架搭建開發環境完成。

JavaScript Node.js npm Vue

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。