Vue 使用 vue cli 搭建專案

2021-08-19 19:15:35 字數 1747 閱讀 8948

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

一、 安裝 node.js

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

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

二、安裝 vue-cli

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

npm install -g vue-cli
但是這種安裝方式比較慢,推薦使用國內映象來安裝

,所以我們先設定 cnpm:

如果安裝失敗,可以使用 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專案

安裝完成後,開啟命令列工具輸入命令node v,如果出現對應版本號,就說明安裝成功了。npm包管理器,是整合在node中的,所以,直接輸入npm v也會顯示出npm的版本資訊。由於npm的有些資源被牆,為了更快更穩定,所以我們需要切換到 的npm映象 cnpm。npm install g cnpm ...

vue cli搭建vue專案

生成依賴 命令 npm install 4.執行命令 npm run dev 5專案打包命令 npm run build 檢測node版本 node v 檢視npm安裝 npm v 解除安裝vue cli2 npm uninstall vue cli g 安裝vue cli3 npm install...

vue cli 搭建vue專案

前提搭建好nodejs環境 vue cli是vue.js的腳手架,用於自動生成vue.js webpack的專案模板,建立命令如下 vue init webpack 注1 為自己建立專案的名稱 注2 必須先安裝vue,vue cli,webpack,node等一些必要的環境 命令 npm insta...