1.認識腳手架結構
使用VSCode將vue項目打開：
package.json：包的說明書（包的名字，包的版本，依賴哪些庫）。該文件里有webpack的短命令：
serve（啟動內置服務器）
build命令是最后一次的編譯，生成html css js，給后端人員
lint做語法檢查的。
2.分析HelloWorld程序
1、index.html
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8" />
<!-- 讓IE瀏覽器啟用最高渲染標準。IE8是不支持Vue的。 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!-- 開啟移動端虛擬窗口（理想視口） -->
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<!-- 設置頁簽圖標 -->
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
<!-- 設置標題 -->
<title>歡迎使用本系統</title>
</head>
<body>
<!-- 當瀏覽器不支持JS語言的時候，顯示如下的提示信息。 -->
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<!-- 容器 -->
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
在index.html文件中：
沒有看到引入vue.js文件。
也沒有看到引入main.js文件。Vue腳手架會自動找到main.js文件。不需要你手動引入。
所以main.js文件的名字不要隨便修改，main.js文件的位置不要隨便動。
2、main.js
// 等同于引入vue.js
import Vue from 'vue'
// 導入根組件
import App from './App.vue'
// 關閉生產提示信息
Vue.config.productionTip = false
// 創建Vue實例
new Vue({
render: h => h(App),
}).$mount('#app')
3、es語法檢測。
如果用單字母表示組件的名字，會報錯，名字應該由多單詞組成。
解決這個問題有兩種方案：
第一種：把所有組件的名字修改一下。
第二種：在vue.config.js文件中進行腳手架的默認配置。配置如下：
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true
// 保存時是否進行語法檢查。true表示檢查，false表示不檢查。默認值是true。
lintOnSave : false,
// 配置入口
pages: {
index: {
entry: 'src/main.js',
}
},
})
3.腳手架默認配置
腳手架默認配置在vue.config.js文件中進行。
main.js、index.html等都是可以配置的。
配置項可以參考Vue CLI官網手冊，如下：
// vue.config.js
const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
? transpileDependencies: true,
? // 保存時是否進行語法檢查。true表示檢查，false表示不檢查。默認值是true。
? lintOnSave: false,
? // 配置入口
? pages: {
? ? index: {
? ? ? entry: "src/main.js",
? ? },
? },
});
)