第一個 vue-cli專案

zc發表於2021-04-18

第一個 vue-cli專案

什麼是vue-cli

vue-cli官方提供的一個腳手架,用於快速生成一個vue的專案模板;

預先定義好的目錄結構及基礎程式碼,就好比我們們在建立Maven專案時可以選擇建立一個骨架專案,這個骨架專案就是腳手架,我們的開發更加的快速

主要的功能:

  • 統一的目錄結構
  • 本地除錯
  • 熱部署
  • 單元測試
  • 整合打包上線

需要的環境:

可以使用如下語句進行驗證:

1

1.安裝Node.js淘寶映象加速器(cnpm)

# -g 就是全域性安裝
npm install cnpm -g

# 或使用如下語句解決npm速度慢的問題
npm install --registry=https://registry.npm.taobao.org

安裝的位置:C:\使用者\xxxx\AppData\Roaming\npm

2.安裝vue-cli

cnpm install vue-cli -g
#測試是否安裝成功
#檢視可以基於哪些模板建立vue應用程式,通常我們選擇webpack
vue list

2

建立第一個Vue-cli專案

1.建立一個 Vue專案 資料夾

2.cmd 進入這個資料夾的目錄下

vue init webpack xxxx

即:在該目錄下建立一個vue-cli專案

3

  • 前三個就是填 專案名、專案描述、作者名
  • 第四個選擇 第一個
  • 後面的全部 no

完成後會出現一個資料夾,內容為 :

4

3.初始化並執行

cd xxxx   #進入新出來的資料夾,xxxx即你上面的資料夾名

npm install    # 全域性安裝

npm run dev    # 執行

5

6

個人部落格為:
MoYu's Github Blog
MoYu's Gitee Blog

相關文章