Vue学习（十一）Vue CLI脚手架

初始化脚手架

说明

Vue脚手架是Vue官方提供的标准化开发工具（开发平台）。参考文档
CLI: command line interface 命令行接口工具

步骤

第一步：进行全局安装，仅第一次执行（警告忽略）

npm install -g @Vue/cli

第二步：切换到需要创建项目的目录，使用命令行创建项目

vue creaete xxx

第三步：启动项目

npm run serve

备注：

1. 如果下载慢，将npm的镜像切换到淘宝镜像

npm config set registry https://registry.npm.taobao.org

2. Vue脚手架隐藏了所有webpack相关的配置，如果想要查看执行：

vue inspect > output.js

Vue 脚手架创建项目文件说明

|——node_modules
|——public
|	|——favicon.ico：页签图标
|	|——index.html：主页面
|——src
|	|——assets：存放静态资源
|	|	|——logo.png：logo图片
|	|——components：存放组件
|	|——App.vue：汇总所有组件
|	|——main.js：入口js文件
|——.gitignore：git忽略配置文件
|——babel.config.js：ES6转ES5配置文件
|——package.json：包说明包配置文件
|——yarn.lock/package-lock：包版本锁定控制文件
|——README.md：应用描述文件

render函数

渲染页面的功能。替代完整版Vue中的模板解析器

脚手架中不同版本的Vue

vue.js是完整版的Vue，包含 核心功能和模板解析器
vue.runtime.xxx.js是运行版的Vue，只包含核心功能，没有模板解析器
因vue.runtime.xxx.js没有包含模板解析器，所以不能使用template配置项，需要使用render函数接收到的createElement函数去指定具体内容

脚手架启动注意

如果是一个单词命名的组件，在运行时报如下错误。

Component name "School" should always be multi-word

解决方式为在vue.config.js中添加如下代码

lintOnSave:false  //关闭语法检查

// 添加位置
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave:false  //关闭语法检查
})

vue.config.js配置文件

使用vue.config.js可以对脚手架进行个性化定制，参考官方文档