单文件组件的组成结构、配置.vue文件的loader加载器、在webpack项目中使用vue、webpack打包发布、

一、单文件组件的组成结构

// 单文件组件的组成结构
<template>
	<!-- 这里用于定义Vue组件模板内容 -->
</template>

<script>
	// 这里定义Vue组件业务逻辑
	// export default暴露对象数据
	export default {
		data(){ return {} }, // 私有数据
		methods: {}, // 处理函数
	}
</script>

<style scoped> 
	/* 这里用于定义组件的样式 */
	/* scoped：防止组件样式之间的冲突问题 */
</style>

// 配置.vue文件的loader加载器

// 在 index.js 中，导入单文件组件 import App from './components/App.vue' 浏览器会报错
// 配置vue组件的加载器
	// 运行 npm i vue-loader@15.6.1 vue-template-compiler -D
	// 在 webpack.config.js 配置文件中，添加vue-loader 的配置项如下：
	const VueLoaderPlugin = require('vue-loader/lib/plugin')
	module.exports = { 
		module:{ 
			rules:[
				{test: /\.vue$/, loader: 'vue-loader'}
			]
		},
		plugins: [
			// ....... 其他组件
			new VueLoaderPlugin() // 请确保引入这个插件
		]
	}
// 安装之后，代码就不会报错，但是也没有任何效果，因为我们还没有正式使用vue代码

// 在webpack项目中使用vue

// 1、运行 npm i vue -S 安装 vue
// 2、在 srv -> index.js 入口文件中，通过 import Vue from 'vue' 来导入 vue 构造函数
// 3、创建 vue 实例对象，并指定要控制的 el 区域
// 4、通过 render 函数渲染 App 根组件
import Vue from 'vue'
import App from './components/App.vue'  // 根组件
const vm = new Vue({
	el: '#app',
	// 通过 render 函数，把指定的组件渲染到 el 区域中
	render: h => h(App)
})

二、webpack打包发布

// 在package.json文件中配置webpack打包命令
// 改命令默认加载项目根目录中的 webpack.cconfig.js 配置文件
"scripts": {
	// 用于打包的命令
	"build":"webpack -p",
}
// 删除dist目录(打包发布之后，会生成dist目录)
// 执行命令：npm run build
	// 执行build命令，会执行webpack -p进行打包，而打包会参照webpack.config.js配置文件，查看入口和出口文件等等配置项
	// 打包成功之后，会生成dist目录，bundle.js与index.html文件