使用 vue cli 搭建專案

2021-09-19 11:44:19 字數 1801 閱讀 9653

vue-cli 是乙個官方發布 vue.js 專案腳手架,使用 vue-cli 可以快速建立 vue 專案,github位址是:

vue/cli 3.x 已經發布,如果使用 3.x 構建專案,請參考《vue 爬坑之路(十二)—— vue-cli 3.x 搭建專案》

一、 安裝 node.js

只是這樣安裝的 node 是固定版本的,如果需要多版本的 node,可以使用 nvm 安裝

安裝完成後,可以命令列工具中輸入 node -v 和 npm -v,如果能顯示出版本號,就說明安裝成功。

二、安裝 vue-cli

安裝好了 node,我們可以直接全域性安裝 vue-cli:

npm install -g vue-cli
npm install -g cnpm --registry=
如果安裝失敗,可以使用 npm cache clean 清理快取,然後再重新安裝。後面的安裝過程中,如有安裝失敗的情況,也需要先清理快取

同樣可以使用 cnpm -v 檢視是否安裝成功

然後使用 cnpm 安裝 vue-cli 和 webpack

cnpm install -g vue-cli
最新的 vue 專案模板中,都帶有 webpack 外掛程式,所以這裡可以不安裝 webpack

安裝完成後,可以使用 vue -v (注意 v 大寫)檢視是否安裝成功。

如果提示「無法識別 'vue' 」 ,有可能是 npm 版本過低,可以使用 npm install -g npm 來更新版本

三、生成專案

首先需要在命令列中進入到專案目錄,然後輸入:

vue init webpack vue-project
vue-project 是自定義的專案名稱,命令執行之後,會在當前目錄生成乙個以該名稱命名的專案資料夾

配置完成後,可以看到目錄下多出了乙個專案資料夾,裡面就是 vue-cli 建立的乙個基於 webpack 的 vue.js 專案

然後進入專案目錄(cd vue-project),使用 cnpm 安裝依賴

cnpm install
然後啟動專案

npm run dev
如果瀏覽器開啟之後,沒有載入出頁面,有可能是本地的 8080 埠被占用,需要修改一下配置檔案 config>index.js

建議將埠號改為不常用的埠。另外我還將 build 的路徑字首修改為 ' ./ '(原本為 ' / '),是因為打包之後,外部引入 js 和 css 檔案時,如果路徑以 ' / ' 開頭,在本地是無法找到對應檔案的(伺服器上沒問題)。所以如果需要在本地開啟打包後的檔案,就得修改檔案路徑。

四、打包上線

自己的專案檔案都需要放到 src 資料夾下

專案開發完成之後,可以輸入 npm run build 來進行打包工作

npm run build
打包完成後,會生成 dist 資料夾,如果已經修改了檔案路徑,可以直接開啟本地檔案檢視

專案上線時,只需要將 dist 資料夾放到伺服器就行了。

使用 vue cli 搭建專案

vue cli 是什麼及為什麼要使用他 vue 提供了乙個官方的 cli,為單頁面應用 spa 快速搭建繁雜的腳手架。它為現代前端工作流提供了 batteries included 的構建設定。只需要幾分鐘的時間就可以執行起來並帶有熱過載 儲存時 lint 校驗,以及生產環境可用的構建版本。更多詳情...

Vue 使用 vue cli 搭建專案

vue cli 是乙個官方發布 vue.js 專案腳手架,使用 vue cli 可以快速建立 vue 專案,github位址是 一 安裝 node.js 只是這樣安裝的 node 是固定版本的,如果需要多版本的 node,可以使用 nvm 安裝 安裝完成後,可以命令列工具中輸入 node v 和 n...

使用vue cli快速搭建專案

vue cli 是乙個官方發布 vue.js 專案腳手架,使用 vue cli 可以快速建立 vue 專案。專案建立前需安裝node和npm,並檢查是否安裝成功。node和npm安裝成功,使用npm安裝的比較慢,而且很可能會因為網路問題而出錯,所以還是覺得使用cnpm穩一點。1 全域性安裝vue c...