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原生标签冲突)

分析:
应该是我的Vue CLI 5 引起的错误提示。我只要修改为多个单词组合组件name即可。