Vue 脚手架结构

https://www.bilibili.com/video/BV1Zy4y1K7SH?p=62

→ node_modules		用到的第三方库
↓ public
	favicon.ico	网站页签图标
	index.html	网站首页，main.js 里 .$mount('#app') 中 id 为 app 的 DOM 元素在 index.html 里声明
↓ src
	→ assets	静态资源，图片、视频……
	→ components	各种组件
	App.vue
	main.js	npm run serve 运行之后，就会去运行 main.js，该文件是整个项目的入口文件
.gitignore	git 的忽略文件
babel.config.js	babel 的配置文件，ES6=>ES5 配置
package-lock.json	包版本控制文件，锁定用到的包的版本
package.json	NPM 包说明文件，配置包名、版本、依赖、常用命令
	scripts.serve	开发过程中，运行 npm run serve，实际执行的就是这里的命令，脚手架会配置好服务器
	scripts.build	代码写完、开发完成之后，.vue => .html、.css、.js，这是最后的一次编译
	scripts.lint	几乎不用，对代码进行语法检查，很少执行，因为IDE、如 VS Code 有很好的语法检查插件，会在开发时帮开发者检查
README.md	教程、笔记

验证“执行完 npm run serve 之后，就会运行 main.js”

把 main.js 里的代码暂时注释，替换成：

/*
import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')
*/

console.log("Hello World!");

运行 npm run serve，观察浏览器控制台输出。

main.js 文件说明

/**
 * 该文件是整个项目的入口文件
 */
//引入Vue
import Vue from 'vue'
//引入App组件，它是所有组件的父组件
import App from './App.vue'
//关闭 Vue 的生产提示
Vue.config.productionTip = false

//创建 Vue 实例对象——VM
new Vue({
  //将 App 组件放入容器中
  render: h => h(App),
}).$mount('#app')

//上面和下面的代码是不同的写法、实现一样的功能
new Vue({
  el:'#app',
  render: h => h(App),
})