3.1.1. 说明

脚手架用于将Vue文件编译成浏览器能识别的文件

Vue脚手架是Vue官方提供的标准化开发工具（开发平台）
最新的版本是 5.x
文档 Vue CLI

3.1.2. 具体步骤
npm是包管理工具，类似于maven
如果下载缓慢请配置**npm**淘宝镜像 **npm config set registry http://registry.npm.taobao.org**
全局安装 @vue/cli ，**npm install -g @vue/cli**，全部安装是为了以后都是可以用@vue/cli的命令。

安装完后查看脚手架版本：

输入命令执行vue -V,提示：不是内部或外部命令，是因为没有配置环境变量，找到下载的脚手架

配置相应的环境变量：

在执行命令vue -V就能显示出版本。

切换到创建项目的目录，使用命令创建项目**vue create xxx**

选择使用**vue**的版本

我这里选 Vue 2
babel：将 ES6 转成 ES5
eslint：做语法检查的。

开始创建：

出现 Successfully created project vue_test. 表示已成功创建

启动项目**npm run serve**

用浏览器进行访问，可以访问到 Vue 提供的一个测试的 HelloWorld 组件，用 Vue 插件可以看到

打包项目**npm run build**
暂停项目**Ctrl+C**

Vue脚手架隐藏了所有webpack相关的配置，若想查看具体的webpack配置，请执行vue inspect > output.js

3.1.3. 脚手架文件结构

.文件目录
├── node_modules : 相关的依赖包
├── public
│   ├── favicon.ico: 页签图标
│   └── index.html: 主页面
├── src
│   ├── assets: 存放静态资源
│   │   └── logo.png
│   │── component: 存放组件
│   │   └── HelloWorld.vue
│   │── App.vue: 汇总所有组件
│   └── main.js: 入口文件
├── .gitignore: git版本管制忽略的配置
├── babel.config.js: babel的配置文件
├── package.json: 应用包配置文件 
├── README.md: 应用描述文件
└── package-lock.json: 包版本控制文件

package.json 包说明

{
  "name": "vue_test", # 包的名称
  "version": "0.1.0", # 包的版本
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve", # 运行服务
    "build": "vue-cli-service build", # 进行打包构建
    "lint": "vue-cli-service lint" # 进行一次语法检查
  },
  "dependencies": { # 相关依赖库
    "core-js": "^3.8.3",
    "vue": "^2.6.14"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3",
    "vue-template-compiler": "^2.6.14"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "@babel/eslint-parser"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

main.js 说明

主要用于将所有 vue 组件进行解析，返回给页面呈现相应的内容。

/* 
该文件是整个项目的入口文件
*/
//引入Vue
import Vue from 'vue'
//引入App组件，它是所有组件的父组件
import App from './App.vue'
//关闭vue的生产提示
Vue.config.productionTip = false
//创建Vue实例对象---vm
new Vue({
  el:'#app',
  //render函数完成了这个功能：将App组件放入容器中
  render: h => h(App),
  // render:q=> q('h1','你好啊')

  // template:`<h1>你好啊</h1>`,
  // components:{App},
})

index.html 说明

接收从 main.js 传来的内容

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
        <!-- 针对IE浏览器的一个特殊配置，含义是让IE浏览器以最高的渲染级别渲染页面 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <!-- 开启移动端的理想视口 -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <!-- 配置页签图标. <%= BASE_URL %>就是当前项目public文件夹-->
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
        <!-- 引入第三方样式 -->
        <link rel="stylesheet" href="<%= BASE_URL %>css/bootstrap.css">
        <!-- 配置网页标题 htmlWebpackPlugin.options.title会以项目名作为标题-->
    <title>htmlWebpackPlugin.options.title</title>
  </head>
  <body>
        <!-- 当浏览器不支持js时noscript中的元素就会被渲染 -->
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue </strong>
    </noscript>
        <!-- 容器 -->
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

3.1.4 测试

将前面的 School.vue 和 Student.vue 添加到 component 目录下，创建vue 项目自动生成的 App.vue 文件替换成自己编写的 App.vue 文件。

npm run serve运行并访问

3.1.5 _render 函数

在 main.js 中使用 components 注册组件页面会报错

意思是你正在使用一个运行版本的vue，运行版本的vue是没有模板解析器的
解决办法有两个：
办法一：把模板交给 render 函数进行解析
办法二：引用带有模板解析器的 vue

1 引入完整版的 vue

查看引入的 vue ，从下面截图可以看到引入的 vue 是 dist/vue.runtime.esm.js这是一个精简版的 vue，它不包含模板解析器，这要导致在 main.js 中使用 template 会报错

完整的 vue 是 dist 目录下的 vue.js

引入完整版的 vue

/* 
    该文件是整个项目的入口文件
*/
//引入Vue
import Vue from 'vue/dist/vue'
//关闭vue的生产提示
Vue.config.productionTip = false

//创建Vue实例对象---vm
new Vue({
    el:'#app',
    //render函数完成了这个功能：将App组件放入容器中
  // render: h => h(App),
    // render:q=> q('h1','你好啊')

    template:`<h1>你好啊</h1>`,
    // components:{App},
})

这个时候就不会报错了

2 使用 render 函数

为什么要用 render？
因为 vue 主要是有 vue 核心和 vue 模板解析器两部分，模板解析器占据 vue 三分之一的体积，在 vue 组件编译完后模板解析器是多余的存在，并且会占用一定的文件体积，所以才会出现精简版的 vue。

由于考虑到使用者可能会引入精简版的 vue 所以就用 render 函数返回页面。
下面代码中，createElement 使用用来创建元素的，render 将 createElement 创建的元素返回到页面上。

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

//创建Vue实例对象---vm
new Vue({
    el:'#app',
    render(createElement){
    return createElement('h1','你好啊')
  }
})

精简的写法如下：
使用箭头函数 (此函数只有在函数体内没有复杂的逻辑，只有一个简单的返回时使用)，将 vue 组件放到 createElement 中返回给页面

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

//创建Vue实例对象---vm
new Vue({
    el:'#app',
    render: h => h(App)
  }
})

3 总结

关于不同版本的Vue：

vue.js与vue.runtime.xxx.js的区别：
1. vue.js是完整版的Vue，包含：核心功能+模板解析器。
2. vue.runtime.xxx.js是运行版的Vue，只包含：核心功能；没有模板解析器。
因为vue.runtime.xxx.js没有模板解析器，所以不能使用template配置项，需要使用render函数接收到的createElement函数去指定具体内容。
3.1.6 修改脚手架默认配置
一般情况下 vue 的入口文件默认就是 main.js，如果要修改默认文件的指向，就要修改脚手架的配置文件。
脚手架依托于 webpack ，webpack 下有个 webpack.config.js 文件，脚手架将所有重要的配置文件隐藏了。

将脚手架的配置文件输出到 js 文件中查看，命令：vue inspect > output.js，可以查看你当前项目都配置了那些内容。

在 output.js 文件可以找到入口配置

entry: {
    app: [
      './src/main.js'
    ]
  }

vue 文件结构，有五个是默认的，不允许改，public、favicon.ico、index.html、src、main.js

vue.config.js

vue.config.js 是一个可选的配置文件 (如果需要，自己创建一个跟 package.json 同级的 vue.config.js)，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。你也可以使用 package.json 中的 vue 字段，但是注意这种写法需要你严格遵照 JSON 的格式来写。

使用vue.config.js可以对脚手架进行个性化定制，详情见：https://cli.vuejs.org/zh
vue.config.js 配置文件会跟 webpack 里的配置文件进行整合
这个文件应该导出一个包含了选项的对象：

module.exports = {
  pages: {
    index: {
      // page 的入口（这里可以改成自己自定义的入口文件）
      entry: 'src/main.js',
      // entry: 'src/index/main.js',
      // 模板来源
      // template: 'public/index.html',
      // 在 dist/index.html 的输出
      // filename: 'index.html',
      // 当使用 title 选项时，
      // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
      // title: 'Index Page',
      // 在这个页面中包含的块，默认情况下会包含
      // 提取出来的通用 chunk 和 vendor chunk。
      // chunks: ['chunk-vendors', 'chunk-common', 'index']
    },
    // 当使用只有入口的字符串格式时，
    // 模板会被推导为 `public/subpage.html`
    // 并且如果找不到的话，就回退到 `public/index.html`。
    // 输出文件名会被推导为 `subpage.html`。
    // subpage: 'src/subpage/main.js'
  },
  // 关闭语法检查，为了开发方便可以考虑关闭检查，
  // 等阶段性完成再开启检查纠正一些错误
  lintOnSave:false
}

配置文件修改后，需要重启服务。

Java学习笔记

3.1 初始化脚手架