Vue脚手架

说明

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

安装步骤

1. 全局安装@vue/cli（仅第一次使用时执行）

npm install -g @vue/cli

2. 切换至目标项目目录，使用命令行创建项目

vue create 项目名（小写英文）

3. 启动项目

npm run serve

脚手架分析

node_modules

依赖文件夹

public文件夹

1. favicon.icn：页签图标

2. index.html：主页面

src文件夹

1. main.js：整个文件的入口

2. app.vue：父组件，全局根组件

3. assets文件夹：存放前端静态资源（如：网站logo）

4. components文件夹：存放所有非根组件

.gitignore

git版本管制忽略配置

babel.config.js

babel配置文件

package.json

1. serve命令：开发中使用

2. build命令：构建浏览器可识别代码，交付前最后编译使用

3. lint命令：语法检查，检查JS语法

package-lock.json

应用包配置文件

README.md

应用表述文件

vue.config.js

脚手架工作模式调整文件，用户自定义脚手架工作配置文件

render函数

vue.js与vue.runtime.xxx.js的区别

1. vue.js是完整版的Vue，包含其核心功能和模板解析器

2. vue.runtime.xxx.js是运行版的Vue，只包含其核心功能，不包含模板解析器

由于vue.runtime.xxx.js不包含模板解析器，因此不能使用template配置项，需使用render函数接收到的createElement函数去指定其具体内容。

仅在main.js中使用一次

修改默认配置

将vue中的配置文件整理成一个js文件进行输出进行阅读

vue inspect > output.js

脚手架中使用配置时不可修改部分

1. public文件夹

   1. index.html 页面入口

   2. favicon.icn 页签图标名

2. src文件夹

   1. main.js 入口文件

脚手架中默认配置修改方式

在vue.config.js中进行配置，删除此文件后执行默认配置 （一般不进行修改），详见cli.vuejs.org/zh/config/

module.exports = {
 pages: {
 index: {
 // page 的入口
 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'
 }
}

注： vue.config.js文件被修改后，必须重启项目