Vue单文件组件

单文件组件的基本结构

1）template：组件的模板区域
2）script：业务逻辑区域
3）style：样式区域

• webpack中配置vue组件的加载器

1、运行 npm i vue-loader vue-template-compiler -D 命令
2、在 webpack.config.js 配置中，添加 vue-loader 配置项如下
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
	module:{
		rules:[
			// ... 其他规则
			{test: /.vue$/,use:'vue-loader'}
		]
	},
	plugins:[
		// ... 其他插件
		new VueLoaderPlugin()  //请确保引入这个插件
	]
}

• 在webpack项目中使用vue

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

• webpack打包发布

//在package.json文件中配置 webpack 打包命令
//该密令默认加载项目根目录的webpack.config.js 配置文件
"scripts":{
	// 用于打包的命令
	"build":"webpack -p",
	// 用于开发调试的命令
	"dev":"webpack-dev-server --open --host 127.0.0.1 --port 3000"
}

然后运行npm run build (运行之前可以把dist 文件删除 打包后会重新生成一个dist文件)
// dist 是成品项目 把dist 给后台发布
// dist / index.html  右键 可以看到页面