19.Vue-cli工程目录结构及运行分析

1. package.json文件：这里配置了本工程中安装的模块：

   "dependencies": {
       "core-js": "^3.6.5",
       "vue": "^2.6.11",
       "vue-router": "^3.2.0"
   },

2. html入口文件：public目录中的index.html文件。在此文件中有一个总容器：

   注意：整个工程中只有index.html一个页面，所以，Vue-cli工程就是一个SPA（单页应用）工程。

   <div id="app"></div>

3. javascript入口文件：src目录中的main.js文件。在入口js文件中：

   1. 首先导入了vue模块，路由模块和App.vue主vue组件。
   2. 然后创建了一个Vue实例。
   3. 在此Vue实例中，调用了render（渲染视图函数）函数，此函数返回App.vue主组件。也就是使用App.vue来渲染index.html视图组件。
   4. 最后，使用$mount方法，将index.html中的总容器（#app）挂载到Vue实例上。

4. App.vue主组件：

   template标签中书写当前组件html代码。这里调用了公共组件HelloWorld。

   script标签中书写当前组件的js代码。这里导入了HelloWorld公共组件成为子组件。

   style标签中书写当前组件的css代码。

   注意：一个vue文件，就是一个Vue组件

5. HelloWorld.vue公共组件：

   这是vuecli给我们提供的一个示例组件。至此，我们终于知道：为什么运行后浏览器中会显示这样的页面。

6. 最后，在package.json文件中有这样的配置：

   "scripts": {
       "serve": "vue-cli-service serve",
       "build": "vue-cli-service build"
   }

   于是，我们知道了，npm run serve命令，实际上就是运行“vue-cli-service serve”

19.1 Vue-cli工程配置文件

vuecli3.x以上版本中为了精简配置文件，专门设置了一个可选的配置文件。 只要在项目的根目录（与package.json同级）中，添加名称为vue.config.js的文件，就能自动被vue-cli加载。 在此文件中可以配置vuecli工程中的一些配置。

module.exports = {
	lintOnSave:false, //关闭代码格式化校验工具
	devServer:{
		port: 81 //修改启动端口
	}
}

19.2 自定义组件

<template>
	<div>
		自定义组件
		<hr/>
		{{msg}}
	</div>
</template>

<script>
	export default {
		name:'First',
		data(){
			return {
				msg: '自定义数据'
			}
		}
	}
</script>

<style>
</style>

19.3 在App.vue中使用

<template>
	<div id="app">
		
		<First />
	</div>
</template>

<script>
	import First from './components/First.vue'

	export default {
		name: 'App',
		components: {
			First
		},
		data() {
			return {

			}
		}
	}
</script>

<style>

</style>