搭建Vue cli腳手架和建立Vue專案

2021-10-03 03:32:57 字數 2177 閱讀 6102

node.js環境的搭建請參考(node.js以及npm的環境配置)

npm install -g cnpm --registry=
安裝完成後輸入:

cnpm -v
出現以下資訊表示安裝成功:

輸入命令:

cnpm install vue-cli -g //g表示全域性安裝
這個命令只需要執行一次就可以了,安裝好後,以後不需要再次安裝。

檢視是否安裝成功

vue -v (v是大寫)
顯示vue的版本號時,表示安裝成功

利用cmd命令cd到指定的儲存專案的資料夾下,輸入命令

vue init webpack demo(demo可以刪除,加入demo表示在demo資料夾下建立專案)
建立時候會出現以下資訊,根據自己的需求自行考慮yes還是no。

project name (my-project): #專案名稱,如果不需要就直接回車。注:此處專案名不能使用大寫。

project description (a vue.js project): #專案描述,如果不需要就直接回車。

author (***):#專案作者,預設計算機使用者名

vue build (use arrow keys)

> runtime-only:about 6kb lighter min+gzip,but templates (or any vue-specific html) are only

allowed in .vue files-render functions are required elsewhere #譯:只執行大約6kb比較輕量的壓縮檔案,但只允許模板(或任何vue特定html,vue檔案需要在其他地方呈現函式。翻譯不精準,意思大概是選擇該構建方式對檔案大小有要求

install vue-router? #安裝vue的路由外掛程式,需要就選y,否則就n [建議y]

use eslint to lint your code? #是否使用eslint檢測你的**?[eslint 是乙個語法規則和**風格的檢查工具,可以用來保證寫出語法正確、風格統一的**。建議選擇 『n』 因為選擇 『y』 在做除錯專案時,控制台會有很多 黃色警告 提示格式不規範,但其實並不影響專案]

setup unit tests? #是否安裝單元測試(暫不詳細介紹)[建議n]

setup e2e tests with nightwatch(y/n)? #是否安裝e2e測試框架nightwatch(e2e,也就是end to end,就是所謂的「使用者真實場景」 [建議n]

should we run 'npm install' for you after the project has been created? #專案建立後是否要為你執行「npm install」?這裡選擇包管理工具 [建議yes,use npm]

yes,use npm #使用npm

yes,use yarn #使用yarn

no,i will handle that myself #自己操作

當成功後會在你的指定目錄下出現以下資訊:

進入到專案目錄下,就是上面檔案裡面,輸入命令:

cnpm isntall
會自動構建存在的package.json檔案,安裝對於的依賴。

輸入下面指令:

npm run dev
當出現下面資訊,表示服務啟動成功:

到專案裡的config目錄下的index.js裡找到port進行埠修改

搭建vue cli腳手架

前期工作準備 2.安裝 映象,因為我們用的npm的伺服器是外國,有的時候我們安裝 依賴 的時候會超級慢,所以就用這個cnpm來安裝我們說需要的 依賴 命令列輸入 npm install g cnpm registry 安裝完成後,就可以用cnpm 代替 npm 速度會快很多。3.安裝webpack,...

搭建vue cli腳手架

腳手架 cd xz vue 先進入專案資料夾 vue create後的那個資料夾 xz vue npm run serve 執行live server babel的效果。是先將腳手架中瀏覽器不懂的 翻譯為瀏覽器能懂的 然後,再將翻譯後的頁面執行在乙個臨時的開發伺服器中。強調 npm run serv...

vue cli腳手架搭建

是vue官方提供的腳手架工具。腳手架工具簡單講就是自動將專案需要的環境 依賴等資訊都配置好。檢查npm 版本,建議安裝到最新版本。命令列檢視版本號 node v npm v 公升級npm 可選操作 npm install g npm 修改為 映象 可選操作 npm config set regist...