目錄

一、引言

二、Vue CLI 基本介紹

三、安裝Vue CLI

3.1. 安裝npm和yarn

3.2. 安裝Vue CLI

3.3. 查看 Vue 版本

四、創(chuàng)建啟動(dòng)工程

4.1. 創(chuàng)建項(xiàng)目架子

4.2. 啟動(dòng)工程

五、腳手架目錄文件介紹

六、核心文件講解?

6.1. index.html

6.2. main.js

6.3. App.vue?

---

一、引言

開(kāi)發(fā) Vue 的兩種方式：

1. 核心包傳統(tǒng)開(kāi)發(fā)模式：基于html/css/js文件，直接引入核心包，開(kāi)發(fā)Vue。

????我們前面幾個(gè)章節(jié)涉及到的就是傳統(tǒng)的開(kāi)發(fā)模式。

2. 工程化開(kāi)發(fā)模式：基于構(gòu)建工具（例如：webpack ) 的環(huán)境中開(kāi)發(fā)Vue。

工程化開(kāi)發(fā)模式問(wèn)題：

① webpack 配置不簡(jiǎn)單

② 雷同的基礎(chǔ)配置

③ 缺乏統(tǒng)一標(biāo)準(zhǔn)

二、Vue CLI 基本介紹

Vue CLI 是 Vue 官方提供的一個(gè)全局命令工具，它解決了以往工程化開(kāi)發(fā)模式的主要問(wèn)題，生成標(biāo)準(zhǔn)化的配置，可以幫助我們快速創(chuàng)建一個(gè)開(kāi)發(fā) Vue 項(xiàng)目的標(biāo)準(zhǔn)化基礎(chǔ)架子。【集成了 webpack 配置】

1. 開(kāi)箱即用，零配置

2. 內(nèi)置 babel 等工具

3. 標(biāo)準(zhǔn)化

Vue CLI腳手架創(chuàng)建出來(lái)的工程結(jié)構(gòu)如下：?

三、安裝Vue CLI

3.1. 安裝npm和yarn

我本地是mac 安裝方式如下（Windows系統(tǒng)可百度AI，這里不做贅述）

3.2. 安裝Vue CLI

全局安裝 (一次) ：yarn global add @vue/cli 或 npm i @vue/cli -g

報(bào)下列錯(cuò)誤，解決方式如下：

自動(dòng)補(bǔ)充兼容 的命令
yarn config set ignore-engines true 

3.3. 查看 Vue 版本

vue --version

四、創(chuàng)建啟動(dòng)工程

4.1. 創(chuàng)建項(xiàng)目架子

到自己指定的路徑下創(chuàng)建Vue CLI腳手架的工程

vue create project-name（項(xiàng)目名-不能用中文）

Vue版本根據(jù)自身情況選擇，這幾章節(jié)學(xué)習(xí)主要講解Vue2，所以我這里選擇了Vue2：?

創(chuàng)建好的工程結(jié)構(gòu)圖：?

4.2. 啟動(dòng)工程

進(jìn)入到我們創(chuàng)建好的工程目錄中

yarn serve 或 npm run serve（這兩個(gè)命令會(huì)找package.json中的serve命令來(lái)啟動(dòng)，停止工程Ctrl+C）

注：如果我們?nèi)蘸髮erve改為dev，那么啟動(dòng)時(shí)就要用yarn serve，我們改成什么值，后續(xù)啟動(dòng)就要用這個(gè)值。?

五、腳手架目錄文件介紹

六、核心文件講解?

6.1. index.html

6.2. main.js

6.3. App.vue?