查看“Vue 脚手架结构”的源代码

https://www.bilibili.com/video/BV1Zy4y1K7SH?p=62
{| class="wikitable"
|→ node_modules
|
|用到的第三方库
|-
|→ public
|
|
|-
|↓ src
|
|
|-
|
|→ assets
|静态资源，图片、视频……
|-
|
|→ components
|
|-
|
|App.vue
|
|-
|
|main.js
|npm run serve 运行之后，就会去运行 main.js，该文件是整个项目的入口文件
|-
|.gitignore
|git 的忽略文件
|
|-
|babel.config.js
|babel 的配置文件，ES6=>ES5 配置
|
|-
|package-lock.json
|包版本控制文件，锁定用到的包的版本
|
|-
| rowspan="4" |package.json
|NPM 包说明文件，配置包名、版本、依赖、常用命令
|
|-
|scripts.serve
|开发过程中，运行 npm run serve，实际执行的就是这里的命令，脚手架会配置好服务器
|-
|scripts.build
|代码写完、开发完成之后，.vue => .html、.css、.js，这是最后的一次编译
|-
|scripts.lint
|几乎不用，对代码进行语法检查，很少执行，因为IDE、如 VS Code 有很好的语法检查插件，会在开发时帮开发者检查
|-
|README.md
|教程、笔记
|
|}

===验证“执行完 <code>npm run serve</code> 之后，就会运行 main.js”===

把 main.js 里的代码暂时注释，替换成：<syntaxhighlight lang="javascript">
/*
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!");
</syntaxhighlight>运行 <code>npm run serve</code>，观察浏览器控制台输出。

=== main.js 文件说明 ===
<syntaxhighlight lang="javascript">
/**
 * 该文件是整个项目的入口文件
 */
//引入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),
})
</syntaxhighlight>