其他分享
首页 > 其他分享> > 09.webpack处理.vue文件

09.webpack处理.vue文件

作者:互联网

使用vue-loader@15版本来处理.vue文件

首先要说明一点,vue-loader的不同版本在处理.vue文件的时候其配置是不同的,所以要分开来处理。
下面是使用webpack来打包一个.vue单文件组件的配置:

  1. 安装vue2.+版本
npm i vue@2.6.12 -D
  1. 编写一个简单的.vue单文件组件
// App.vue
<template>
	<div id="app">
		<div class="demo">
			{{message}}
		</div>
	</div>
</template>

<script>
	export default {
		data(){
			return {
				message:"你好啊,李银河"
			}
		}
	}
</script>

<style scoped lang="less">
	.demo{
		color: pink;
		font-size: 40px;
	}
</style>

  1. 在入口文件index.js中导入App.vue并进行挂载
import Vue from 'vue';
import App from './App.vue';

new Vue({
	render:h=>h(App)
}).$mount("#app")
  1. 安装vue-loader15版本
npm i vue-loader@15.8.9 -D
  1. 安装编译template的包vue-template-compiler,版本必须和vue版本保持一致
npm i vue-template-compiler@2.6.12 -D
  1. 在webpack.config.js中配置
const {
	VueLoaderPlugin
} = require('vue-loader');

module.exports = {
	module: {
		rules: [
			// 官方文档:在 v15 中,<style lang="less"> 会完成把它当作一个真实的 *.less 文件来加载,所以需要配置less-loader来处理这种.less文件
			{
				test:/\.less$/,
				use:[
					"style-loader",
					{
						loader:"css-loader",
						options:{
							importLoaders:2
						}
					},
					"postcss-loader",
					"less-loader",
				]
			},
			{
				test: /\.js$/,
				exclude: /node_modules/,
				use: ["babel-loader"],
			},
			{
				test: /\.vue$/,
				use: "vue-loader"  // 处理.vue文件
			}
		],
	},
	plugins:[
		new VueLoaderPlugin(), // 官方文档:Vue Loader v15 现在需要配合一个 webpack 插件才能正确使用
	]
}
  1. 执行npm run build,打包成功,说明vue-loader生效。

使用vue-loader@17版本来处理.vue文件

  1. 安装vue3.0+版本
npm i vue@3.1.21 -D
  1. 编写一个简单的.vue单文件组件(同上)
  2. 在入口文件index.js中导入App.vue并进行挂载
    vue3.0没有全局的Vue类,而是导出了一个creatApp的方法
import {creatApp} from 'vue';
import App from './App.vue';

// Vue3.0挂载APP组件方法
createApp(App).mount('#app');

// Vue2.0挂载APP组件方法
new Vue({
	render:h=>h(App)
}).$mount("#app")
  1. 安装vue-loader和vue-template-compiler
    官方文档:你应该将 vue-loader 和 vue-template-compiler 一起安装——除非你是使用自行 fork 版本的 Vue 模板编译器的高阶用户
    官方文档:每个 vue 包的新版本发布时,一个相应版本的 vue-template-compiler 也会随之发布。编译器的版本必须和基本的 vue 包保持同步,这样 vue-loader 就会生成兼容运行时的代码。这意味着你每次升级项目中的 vue 包时,也应该匹配升级 vue-template-compiler。
npm install vue-loader vue-template-compiler -D
  1. 在webpack.config.js中配置(同上)

标签:vue,版本,App,09,loader,webpack,template,compiler
来源: https://www.cnblogs.com/gaokai/p/15971131.html