32分析脚手架

分析脚手架

package.json: 当前工程符合npm规范的，一定会有此文件（包的说明书：name, version, dependencies（依赖性）...）。

• module: 控制ES6模块化引入时，是引入哪个js

package-lock.json: 当前工程的包版本控制文件（锁），为固定环境影响。

Vue脚手架执行流程

• 控制台

  npm run serve
  

• main.js

  • 导入：vue 模块， App组件

    • App.vue

      • App结构

      • App脚本

        • 导入：School组件

          • components/School.vue

            • School结构

            • School脚本

              • 导入：Teaher组件，Student组件

                • components/Teacher.vue
                  • Teacher结构
                  • Teacher脚本
                    • 暴露Teacher【1】
                  • Teacher样式
                • components/Student.vue
                  • Student结构
                  • Student脚本
                    • 暴露Student【2】
                  • Student样式

              • 暴露School【3】，并注册Teacher，Student

            • School样式

        • 暴露App【4】，并注册School

      • App样式

  • 关闭生成提示

  • 创建vue实例对象【5】，并解析模板【6】。

ps: 在底层的组件先准备好，最后创建vm。

脚手架文件结构:

PS D:\Working\study_vue\使用脚手架\单文件组件\sverdr> tree /f .
卷 软件 的文件夹 PATH 列表
卷序列号为 000000BB 4A21:C100
D:\WORKING\STUDY_VUE\使用脚手架\单文件组件\SVERDR
│  .gitignore
│  babel.config.js
│  jsconfig.json
│  package-lock.json
│  package.json
│  README.md
│  vue.config.js
│  
├─node_modules
|	   ...
├─public
│      favicon.ico
│      index.html  
│      
└─src
    │  App.vue     
    │  main.js     
    │  
    ├─assets       
    │      logo.png
    │              
    └─components   
            School.vue 
            Student.vue
            Teacher.vue

关于不同版本的Vue:

• vue.js 与vue.runtime.xxx.js的区别:
  (1). vue.js是完整版的Vue，包含:核心功能+模板解析器。
  (2). vue.runtime.xxx.js是运行版的Vue，只包含:核心功能;没有模板解析器。
• 因为vue.runtime.xxx.js没有模板解析器，所以不能使用template配置项，需要使用render函数接收到的createElement函数去指定具体内容。

关于render函数

关于不同版本的Vue:
    1.vue.js 与vue.runtime.xxx.js的区别:
        (1).vue.js是完整版的Vue, 包含:核心功能+模板解析器。
        (2).vue.runtime.xxx.js是运行版的Vue, 包含:核心功能;没有模板解析器。
    2.因为vue.runtime.xxx.js没有模板解析器, 所以不能使用template配置项, 需要使用render函数接收到的createElement函数去指定具体内容。

默认引入的vue是没有模板解析器的，vue.runtime.esm.js,
原因是在最后打包完成工程时，模板解析器本身就是不需要的。（vue文件都是已经解析好了的）

  render(createElement) {
    return createElement('h1', 'innerText')
  },
  render: createElement => createElement('h1', 'innerText'),
  render: h => h('h1', 'innerText'),

vue.config.js配置文件:

使用vue inspect > output.js 可以查看到Vue脚手架的默认配置。
使用vue.config.js 可以对脚手架进行个性化定制，详情见:https://cli.vuejs.org/zh