vue入門之編譯專案

2022-01-12 20:18:59 字數 848 閱讀 1926

好記性不如爛筆頭,最近又開始學習vue了,編譯的過程中遇到幾個小坑,特此一記。

首先說一下vue專案如何編譯,其實很簡單,cd到專案資料夾,然後執行命令:

npm run build
不過npm命令通常很慢,我們可以使用**的映象以及cnpm命令:

cnpm install cnpm -g
上面是安裝或者公升級,安裝以後,重新執行 cnpm install bulid即可。

build的過程中可能會報一下編譯錯誤,一般是缺少東西,重新安裝或者公升級一下映象即可,cnpm install npm -g 再次編譯如果還是提示缺少某個模組元件的話,單獨安裝即可,cnpm install 元件名

build成功以後如圖:

build以後專案會編譯到根目錄的dist資料夾,index.html是可以直接訪問的,但是這個時候需要去config資料夾的index.js裡設定一下專案的路徑:

斜槓前面加乙個點即可,表示目錄是當前目錄,而非根目錄(詳細解釋可以檢視下文的參考資料)

配置好以後重新進行build,然後再訪問dist資料夾下的index.html,就能看到頁面:

至此vue專案的編譯流程就算完成了,部署專案的時候將dist資料夾copy到伺服器裡即可,和正常靜態頁**一般部署。

一 vue入門之通過命令建立vue專案

1 必須要安裝nodejs 2 搭建vue的開發環境 安裝vue的腳手架工具 官方命令列工具 npm install global vue cli cnpm install global vue cli 此命令只需要執行一次 3 建立專案方式一 1 必須cd到對應的乙個專案裡面 2 vue init...

vue建立專案入門

安裝node.js 安裝vue cli 在命令列輸入 npm install g vue cli等待完成 安裝python 2.7 用vue cli構建專案 1 要建立專案,首先我們要選定目錄,然後再命令列中把目錄轉到選定的目錄。在這裡,選擇桌面來存放新建的專案,則我們需要先把目錄cd到桌面 2 在...

Vue 1 Vue專案入門

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