使用vue腳手架工具搭建vue webpack專案

2022-04-28 14:18:07 字數 2033 閱讀 5476

對於vue.js來說,如果你想要快速開始,那麼只需要在你的html中引入乙個標籤,加上cdn的位址即可。但是,這並不算是乙個完整的vue實際應用。在實際應用中,我們必須要一系列的工具,包括:模組化,轉譯,預處理,熱載入,靜態檢測和自動化測試等。對於乙個需要長期維護和大型的專案而言,這些工具是必不可少的,但是嘗試配置初始化這些很痛苦.這就是我們發布vue官方提供的腳手架工具的原因,乙個簡單的構建工具,通過幾個預設的步驟幫助你快速的構建vue.js專案。

1.安裝node環境

可以使用自帶的終端cmd命令列工具;windows下推薦安裝git bash,可以使用linux命令;

安裝成功後在命令列檢視node版本,如果有說明安裝成功。

現在可能vue-cli版本更新,故

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

大家在安裝node的時候,會自動安裝npm;

可以先行檢視npm版本;

使用npm安裝vue-cli:

1npm install vue-cli -g

3.準備工作已經完畢,下面直接使用vue-cli初始化webpack專案;

vue init webpackyourprojectname(專案名)

中間會輸入專案名稱,專案描述,作者等資訊;

一路回車

可以看到我們剛才建立的webpack專案已經建好了:

4.檢視目錄結構

安裝依賴

1$ npm install

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

1$ cnpm install

5.啟動本地開發

本地node伺服器已經跑起來了,埠為配置檔案中的埠

6.配置路由

建立新的頁面元件,將路由指向該.vue 檔案

到此,使用vue-cli建立的vue專案基本可以上手開發了,恭喜!

7.打包上線

1$ npm run build

看到build complete,證明打包成功;

觀察目錄結構,發現多了乙個dist資料夾,這便是webpack打包後的檔案,將改檔案和後台商量,以什麼形式放到伺服器即可,上線成功。

因為現在vue-cli進行了版本更新,故

初始化專案指令:vue create 專案名

如果已經安裝了@vue/cli3.0以上的版本,又想使用2.0的專案模版,則此時應該這麼做

安裝乙個橋接工具@vue/cli-init,如下圖所示:

使用vue腳手架工具搭建vue webpack專案

對於vue.js來說,如果你想要快速開始,那麼只需要在你的html中引入乙個標籤,加上cdn的位址即可。但是,這並不算是乙個完整的vue實際應用。在實際應用中,我們必須要一系列的工具,包括 模組化,轉譯,預處理,熱載入,靜態檢測和自動化測試等。對於乙個需要長期維護和大型的專案而言,這些工具是必不可少...

搭建Vue腳手架

從vue官網安利了一波安裝腳手架的主要 全域性安裝 vue cli npm install global vue cli 建立乙個基於 webpack 模板的新專案 vue init webpack my project 安裝依賴,走你 cd my project npm install npm r...

Vue腳手架搭建

sudo apt get install nodejs legacy nodejs sudo apt get install npm 安裝成功後檢視對應版本 npm install vuenpm install g cnpm registry vue安裝成功後檢視對應版本 npm install g...