分析Vue脚手架(CLI)

说明：

1.Vue脚手架是Vue官方提供的标准化开发工具（开发平台）

2.最新的版本是4.x

3.文档 http://cli.vuejs.org/zh/

command line interface

创建脚手架步骤：

ctrl+c 暂停

1.进入到要创建脚手架的文件夹

2.vuecreate 项目名（名字不能采用驼峰，也不能大写）

3.选择vue2或者vue3 + 回车

4.有提示命令：先打开文件夹

5.再输入npm run serve

6.会生成一个网址

7.按住ctrl点击，即可打开页面

文件：

1.babel.config.js babel的配置文件

2.package.json 脚手架的文件

build：最终的一次编译，传给后端的.html代码

lint：所有文件进行一次语法检查

3.package-lock.json 版本文件

3.README.md 教程 可以写笔记

4.src文件夹

①main.js 整个项目的入口文件 （可以直接在main.js中直接运行）

1.引入vue 2.引入app组件。所有组件的父组件 3. 关闭生产提示 4.创建vue对象实例——vm 5.render把组件引入

②App.vue 结构+交互+样式

③assets文件夹 一般放入静态资源

④components文件夹 放入写的组件

5.public文件‘

①***.ico 页面图标

②index.html 整个页面的的网页标签

*<%=BASE_URL%>表示路径public文件夹内，即./。为了防止打开网页时出现问题，一般不用/来写路径

*去pachage.json文件中找到网页的name，通过插件完成

render的作用：

为什么不能按原来的写组件？

因为引入了残缺般的vue

render：是一个vue帮你调用的函数

可以通过render的createElement的方法引入组件

createElement需要两个参数：组件的标签和内容，如果是组件就不需要两个参数了

注意：render必须有返回值

由于没有用到this，可以写成箭头函数

vue中的template可以被解析，但是main.js里的不能被解析

使用精简般的vue的好处：

能使最后打包出来的文件不包括模板解析器

关于不同版本的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.config 文件可以自定义手脚架（官网上可以查找）

例子：修改入口文件

注意：pages内不能什么都不写，会报错

！关闭语法检查的方法

（Typora）

## vue.config.js配置文件

1. 使用vueinspect > output.js可以查看到Vue脚手架的默认配置。

2. 使用vue.config.js可以对脚手架进行个性化定制，详情见：https://cli.vuejs.org/zh