文章目录
- 一、项目目录介绍
- 二、`public/index.html`
- 三、src/main.js
- 四、运行流程
一、项目目录介绍
虽然脚手架中的文件有很多，目前咱们只需认识三个文件即可，这三个文件就决定了我们项目的运行
- main.js 入口文件
- App.vue App根组件
- index.html 模板文件
我们以后在打开工程化项目的时候，养成一个习惯：直接把这个工程化的项目作为根目录直接在VSCode中打开，不要出现多个项目并行的情况，否则
- 维护起来不是很好维护，光一个项目就有很多文件了
- 有一些相关的配置项，比如语法的检测，也会不稳定
- es检测可能会有问题
babel.config.js：跟babel有关的，进行语法降级的
jsconfig.json是用来配js语法提示的，
二、public/index.html
<body><!-- 兼容：给不支持js的浏览器一个提示，提示你‘We're sorry’，即：这个项目没有JS是运行不了的 --><noscript><strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.Please enable it to continue.</strong></noscript><!-- Vue所管理的容器：将来创建结构动态渲染这个容器 --><div id="app"><!-- 工程化开发模式中：这里不再直接编写模板语法，通过 App.vue 提供结构渲染，而App.vue通常需要配合main.js里的render来创建即这里面不再放东西了，说白了这里就是个容器--></div><!-- built files will be auto injected -->
</body>
三、src/main.js
通常这里会写false，这个配置不写都可以
// 文件核心作用：导入App.vue，基于App.vue创建结构渲染index.html
// 1. 导入 Vue 核心包
import Vue from 'vue'// 2. 导入 App.vue 根组件，一般称它为根组件
import App from './App.vue'// 提示：当前处于什么环境 (生产环境 / 开发环境)
Vue.config.productionTip = false// 3. Vue实例化，提供render方法 → 基于App.vue创建结构渲染index.html
new Vue({// el: '#app', 作用：和$mount('选择器')作用一致，用于指定Vue所管理容器// render的简写: h => h(App),// 完整写法：render: (createElement) => {// 基于App创建元素结构，并且将创建完的元素结构return，这个结构就用于将来我们渲染index// 它直接将形参改写成了h，这样就简短很多return createElement(App)}
}).$mount('#app')
四、运行流程
