webpack使用三

Vue单文件组件

1.传统组件的问题及解决方案

问题：

1.全局定义的组件必须保证组件的名称不重复

2.字符串模板缺乏语法高亮，在html有多行的时候，需要使用丑陋的\

3.不支持css意味着当html和js组件化时，css明显被遗漏

4.没有构建步骤限制，只能使用html和ES5JS，而不能使用预处理器（如Babel）

解决方案：

1.针对传统组件的问题，Vue提供了一个解决方案 ——使用Vue文件组件

1、Vue单文件组件的基本用法

单文件组件的组成结构

• template 组件的模板区域
• script 业务逻辑区域
• style 样式区域

<template>
    <div>
        <h1>这是App根组件</h1>
    </div>
</template>

<script>
    export default{
        data(){
			return{}
        },
        methods:{}
    }
</script>

<style scoped>
    /*scoped（私有） 为了防止样式冲突*/
    h1{
        color:red;
    }
</style>

这时把 App.vue 导入 index.js 文件中 会报错

2、webpack中配置Vue组件的加载器

①运行 npm i vue-loader vue-template-compiler -D命令
②在 webpack.config.js配置文件中，添加vue-loader 的配置项如下: 

	const VueLoaderPlugin = require('vue-loader/1ib/plugin');
	
	module.exports = {
		module: {
			rules: [
				//...其它规则
				{ test:/\.vue$/,use:'vue-loader' }
			]
        },    
		plugins: [
			// ...其它插件
			new VueLoaderPlugin() // 请确保引入这个插件!
		]
	}	

3、在webpack 项目中使用 vue

①运行npm i vue -s 安装 vue

②在src -> index.js 主入口文件中，通过import Vue from 'vue' 来导入vue构造函数

③创建vue的实例对象，并指定要控制的el区域

④通过render 函数渲染App根组件

index.html

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

index.js

import Vue from "vue";
import App from "./components/App.vue";

const vm = new Vue({
    el:"#app",
    render:h => h(App)   //这里尽量使用render函数，因为这里的Vue实例，是阉割版的VUE，template是不支持的
});
//这里必须箭头函数

4、webpack 打包发布

上线之前需要通过webpack将应用进行整体打包，可以通过package.json文件配置打包命令:

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