文章目录
- 一、项目目录介绍
- 二、`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')
四、运行流程
