vue cli腳手架工具安裝以及搭建vue專案

2021-08-10 03:50:46 字數 2268 閱讀 8126

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

一、 安裝 node.js

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

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

二、vue-cli

首先還是介紹我們的腳手架工具,因為它能讓我們省去大部分的配置時間,這裡只給出簡單步驟,保證你的命令順利執行的前提是安裝最新版本的 node 和 npm,這裡不贅述公升級流程

全域性安裝 vue-cli

?

1

npminstallvue-cli -g

藉此也全域性安裝乙個 webpack

?

1

npminstallwebpack -g

你可以使用我們定製的 cnpm (gzip 壓縮支援) 命令列工具代替預設的npm:

或者你直接通過新增npm引數alias乙個新命令:

alias cnpm

="npm --registry= \

--cache=$home/.npm/.cache/cnpm \

--disturl= \

--userconfig=$home/.cnpmrc"

建議使用alias方式 為了保持npm和cnpm版本一致!(自己在cmd下用alias時候不好使 應該用mobaxtem  命令列工具才可以)

如果安裝失敗,可以使用 npm cache clean 清理快取,如果報錯,後面加--force強制執行,然後再重新安裝。後面的安裝過程中,如有安裝失敗的情況,也需要先清理快取

同樣可以使用 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 vuedemo1
vuedemo 是自定義的專案名稱,命令執行之後,會在當前目錄生成乙個以該名稱命名的專案資料夾

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

然後進入專案目錄(cd vue-project),使用 cnpm 安裝依賴(注意要在有package.json 的目標下執行)

cnpm install
然後啟動專案(直接訪問埠號可進入測試demo)

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

四、打包上線

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

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

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

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

vue cli腳手架安裝

映象使用方法 三種辦法任意一種都能解決問題,建議使用第三種,將配置寫死,下次用的時候配置還在 1.通過config命令 npm config set registry npm info underscore 如果上面配置正確這個命令會有字串response 2.命令列指定 npm registry ...

vue cli腳手架安裝

2.執行cmd,檢視版本號 出現版本號說明安裝成功 輸入 node v 檢視node版本號 需要在6.9以上 輸入 npm v 檢視npm版本號 需要在3.10以上 3.命令列工具 在cmd裡安裝 全域性安裝 vue cli npm install global vue cli mac機全域性安裝需...

安裝腳手架vue cli

cnpm install global vue cli要建立專案,首先我們要選定目錄,然後再命令列中把目錄轉到選定的目錄。可以使用 vue init webpack my project初始化乙個專案,或使用 vue init webpack my project執行初始化命令的時候回讓使用者輸入幾...