目錄：
1、創建項目
2、單文件組件
3、命名規范
Vue CLI 是 Vue.js 開發的標准工具，可以通過npm install -g @vue/cli 或者 yarn global add @vue/cli 這兩個方式在系統全局中安裝。可以通過 vue create my-project ( my-project指的是項目的名稱 ) 或者vue ui 去創建項目。
首先全局安裝腳手架工具。命令：npm install -g @vue/cli -d
然后創建八皇后項目，命令：vue create eightqueen
現在進入的是選擇配置的過程，采用默認的配置生成項目。
回車，等待項目生成完畢。
cd 到工程項目里面去
然后通過 vscode 打開項目
src 文件夾是核心源代碼的所在目錄，圖片可以放到 assets，用到的 “視圖” 和 “組件” 可以放到 components，如果 index.html 是一級頁面模板的話，App.vue 就是二級頁面模板，所有的 Vue.js 頁面都作為該模板的一部分被渲染出來。main.js 沒有實際的業務邏輯，但是為了支撐整個 Vue.js 框架，很有必要存在。（上面這句話出自《Vue.js 快速入門》）
可以通過 yarn serve 去啟動靜態服務。
在瀏覽器地址欄輸入這個地址，會出現腳手架生成的默認情況
工程目錄 src 下的 App.vue 的文件名的后綴名是 .vue，這是就是 vue 的一個單文件組件。App.vue 是項目唯一的組件，也是根組件。Vue 的單文件組件通過一個類似HTML文件的.vue文件就能描述清楚一個組件所需的模板、樣式、邏輯。
查看 main.js 入口文件：
（關於下面實例的代碼，暫時不理解，先參考網絡資料： https://www.cnblogs.com/carpenterzoe/p/10522240.html 、https://blog.csdn.net/qq_26386437/article/details/104043059 ）
現在來簡單修改一下單文件，表示做的是一個八皇后的內容，刪除默認的 hello world 的組件了。
再通過 yarn serve 去啟動任務。
可以看到完成了熱更新加載，頁面被更新了。
.vue 是 Vue 里面的一個單文件組件，那么為什么會有單文件組件這個東西呢？它其實是提供了更好的封裝性、優雅的模板支持、scoped CSS支持以及可以通過 vue-loader 可以配合各種預處理器進行構建。可以對 CSS封裝避免全局污染。通過 vue-loader 可以配合各種預處理器進行構建使預編譯更方便。
編寫優秀代碼本身是一件很困難的事情，為什么這么說呢？因為良好的編碼風格是為了更好地理解與閱讀，代碼可能只寫一次，但是可能需要很多次閱讀反復審查。維護代碼可能會有好幾年有好多人去做同樣的事情，良好的編碼習慣可以提高閱讀質量。首先需要理解分析清楚某個問題，然后用特有的高效的言簡意賅的方式去讓更多的人明白，這就是命名規則重要的原因。
有 3 種命名規則： camelCase、PascalCase、kebab-case。camelCase 俗稱小駝峰、PascalCase俗稱大駝峰、kebab-case 俗稱烤串。
camelCase：第一個單詞小寫后面每個單詞首字母大寫。比如，videoExampleComponent
PascalCase：每個單詞首字母都大寫。比如，VideoExampleComponent
kebab-case：每個單詞都是小寫，用短橫線連接。比如 video-example-component
3 種命名方式的使用場景：
camelCase：JS函數、變量。Prop也經常用小駝峰命名
PascalCase：通常是JS類和構造函數的命名約定。本質上就是可以從一份可以產生很多個不同實例的一個東西。也是組件文件的命名規定，一個組件可以產生多份實例，所以約定采用大駝峰的方式去聲明組件，所以組件文件名通常都是用大駝峰來寫的。
kebab-case：烤肉串方式在 HTML 中使用得比較多，主要因為 HTML 是大小寫不敏感的，正是因為這樣所以約定在模板當中采用烤串方式來避免混淆，比如，下圖中的標簽名與props，雖然聲明 props 時是使用駝峰方式命名的，但是在 vue 里面會進行一個值的映射，會將小駝峰方式映射到烤串方式，同樣的，在注冊組件時可以使用 PascalCase 或者 kabab-case 方式去寫，在模板中寫的標簽最終都會編譯成一個 PadcalCase 的一個 JS 類。
