1.Vue開發的兩種方式

（1）核心包傳統開發模式

基于html/css/js文件，直接引入和辛堡，開發Vue。

（2）工程化開發模式：

主要是基于構建工具（例如,webpack）的環境中開發Vue，可以利用構建工具編寫一些高級的語法。

但是問題是需要一些復雜的配置（配置并不簡單；各個項目雷同的配置；缺乏統一標準）

=> 需要一個工具，生成標準的配置！

Vue Cli 的提出！

---

2.Vue CLI

（1）基本介紹：

是官方提供的一個全局命令工具。

可以幫助我們 快速創建一個開發Vue 項目的標準化基礎架子。（集成了 =webpack配置，即一個目錄）

（2）好處：

<1>開箱即用，零配置；<2>內置babel等工具；<3>標準化；

（3）創建步驟：

<1>全局安裝（一次）：

yarn global add @vue/cli   或   npm i @vue/cli -g

?<2>查看vue安裝的版本

vue --version

<3>創建項目架子

vue create project-name (項目名-不能用中文)

?（4）啟動項目

進入目錄，輸入：

yarn serve 或者 npm run serve （serve這個名字不是固定的，可以找package.json中設置）

---

?3.項目的目錄介紹和運行流程

---

4.組件化開發和根組件

（1）組件化

一個頁面可以拆分為一個個組件，每個組件有著自己獨立的結構、樣式、行為。

好處：便于維護，利于復用，能夠提升開發效率。

組件分類：普通組件、根組件

（2）根組件

整個應用最上層的組件，包裹所有普通的小組件。

（3）組件的構成

每一個組件由三部分構成：

<1>template：結構，有且只能有一個根元素；

<2>script：js邏輯；

<3>style：樣式（可支持 less，需要裝包）

（4）讓組件支持less

<1>style標簽，lang="less"，開啟less功能；

<2>裝包： yarn add less less-loader

---

參考：

040-工程化開發和腳手架_嗶哩嗶哩_bilibili