1️⃣ main.js

  1. /* 
  2.   该文件是整个项目的入口文件 
  3. */
  4. // 引入 vue
  5. import Vue from "vue";
  6. // 引入 App 组件，它是所有组件的父组件
  7. import App from "./App.vue";
  8. // 关闭 Vue 的生产提示
  9. Vue.config.productionTip = false;
  10. // 创建 Vue 实例 - vm
  11. new Vue({
  12.   // 模板解析器
  13.   render: (h) => h(App),
  14. }).$mount("#app"); // 挂载 #app

1️⃣ index.html

  1. <!DOCTYPE html>
  2. <html lang="">
  3.   <head>
  4.     <!-- <%...%> 为 EJS 语法  -->
  5.     <meta charset="utf-8" />
  6.     <!-- 针对 IE 浏览器的一个特殊配置, 含义是让 IE 浏览器以最高的渲染级别渲染页面 -->
  7.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  8.     <!-- 开启移动端的理想视口 -->
  9.     <meta name="viewport" content="width=device-width,initial-scale=1.0" />
  10.     <!-- 配置页签图标 -->
  11.     <!-- 
  12.       <%= BASE_URL %>
  13.       是为了预防路径错误, 指向 public 文件
  14.      -->
  15.     <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
  16.     <!-- 配置网页标题 -->
  17.     <title><%= htmlWebpackPlugin.options.title %></title>
  18.   </head>
  19.   <body>
  20.       <!-- 当浏览器不支持 JS 时 noscript 中的元素就会被渲染 -->
  21.       <noscript>
  22.         <strong>
  23.           We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't workproperly without JavaScript enabled. Please enable it to continue.
  24.         </strong>
  25.       </noscript>
  26.       <div id="app"></div>
  27.       <!-- built files will be auto injected 生成的文件将被自动注入 -->
  28.    </body>
  29. </html>