vue 腳手架 詳細安裝教程以及專案檔案說明

2021-10-09 16:54:39 字數 1112 閱讀 2720

vue-cli 是 vue 提供的乙個用於自動化構建和開發專案的工具,也稱為:腳手架,它是一系列工具的集合,它主要有:

npm

install -g @vue/cli

# or

yarn global add @vue/cli

安裝成功以後,會提供乙個vue的命令

檢視版本

vue --version

# or

vue -v

幫助

vue --help

# or

vue -h

vue-cli 提供了兩種方式來建立專案

命令列方式建立專案

vue create 專案名稱
基於瀏覽器圖形介面方式建立專案
vue ui
專案建立成功以後,進入專案根目錄,開啟 package.json 檔案,我們可以看到

,...

}

guide/cli-service.html#%e4%bd%bf%e7%94%a8%e5%91%bd%e4%bb%a4

src

先來說乙個最重要的目錄 src ,這個就是存放的就是我們專案原始碼的目錄,我們開發過程中大部分的時間就在這個目錄中

專案的入口檔案

存放元件的目錄

存放靜態資源的目錄,比如:,css 等。這裡的檔案與外層 public 目錄存放的靜態資源的最大區別是:assets 存放的資源是通過 import 等方式作為模組匯入,最後打包處理的。而 public 中的資源並不通過模組方式匯入,一般都是通過 script 、link 、img 等方式從瀏覽器引入的資源,比如無法通過模組化處理的 js 檔案(這樣的需求情況並不多)

public

一些並非通過模組方式引入的資源檔案存放的位置,一般都是通過 script 、link 、img 等方式從瀏覽器引入的資源,比如無法通過模組化處理的 js 檔案(這樣的需求情況並不多)

vue腳手架安裝

cli 別名 腳手架 npm cnpm yarn 作用 版本 cli2 cli3 安裝npm install vue cli g cli3的版本 npm install vue cli g cli2的版本 yarn add vue cli global步驟 先安裝cli3 在安裝 vue cli i...

vue安裝腳手架

如果之前安裝過舊版本 非3.x 腳手架需要先解除安裝舊版本 命令 nmp uninstall vue cli g mac電腦需要在前面 加sudo nmp install g vue cli 安裝腳手架,用於生成專案 安裝得比較久 nmp install g vue cli service glob...

安裝vue腳手架

vue2.0 1.vue v 檢視版本,如果出現版本號,之前已經安裝過了。如果之前安裝的版本是想要的版本,可以直接建立專案 2.npm uninstall vue cli g 如果之前安裝了3.0的版本,現在想要安裝2.0,先解除安裝安裝過的版本 3.npm cache clean force 如果...