根目录

package.json

运行 npm run serve 时，实际对应该包中的:

"serve": "vue-cli-service serve"

运行 npm run build 时，实际对应该包中的: //所有功能写完之后，构建为 .html .css .js

"build": "vue-cli-service build"

package-lock.json

包版本控制文件。

例如:

"node_modules/@babel/compat-data": {
      //如果没有这个 package-lock.json 文件，那么下次很可能会下载 8.*.* 
      //指定 compat-data包 版本: 那么以后下载该包都会下载此版本
      "version": "7.14.4",
      //指定 compat-data包 下载地址:
      "resolved": "https://registry.nlark.com/@babel/compat-data/download/@babel/compat-data-7.14.4.tgz",
      "integrity": "sha1-RXIP4M7PP9QgGeHRLMPSf63JjVg=",
      "dev": true
    },

src目录

assets

放静态资源

main.js

• 运行 npm run serve 之后，直接就会去运行 main.js

• vscode 开启终端快捷键:
  ctrl + `

• 为什么 main.js 是入口文件?
  答：脚手架配置好的。

• 为什么 main.js 没有引入 容器，它是怎么找到容器 id="app" div 标签的?
  答：脚手架配置好的。

测试

把 060_单文件组件 用例放过来，其中

• 060_单文件组件\App.vue 替换 上一节创建的 App.vue
• 060_单文件组件\School.vue Student.vue 放到 上一节创建的 components目录中
  然后把 components目录中的 HelloWorld.vue 删掉。
• 修改 App.vue 中子组件的路径:

    import School from './components/School.vue'
    import Student from './components/Student.vue'

• 把assets目录中的logo.png用上:
  在App.vue框架中添加:

  <img src="./assets/logo.png" alt="logo">

编译出错:

错误提示:

96:8  error  Component name "School" should always be multi-word  vue/multi-word-component-names

这个错误是ESLint的Vue插件规则vue/multi-word-component-names触发的,它要求Vue组件名必须是多单词组合(避免与HTML原生标签冲突)

分析：
可能作者用的版本4，而我的Vue CLI 是 版本5 引起的错误提示。
我只要修改为多个单词组合组件name即可。