Vue配合webpack组件化开发（实际开发中也是如此）

最新推荐文章于 2021-10-04 23:51:29 发布

沼泽深处的王

最新推荐文章于 2021-10-04 23:51:29 发布

阅读量231

点赞数 1

分类专栏：前端文章标签： vue

本文链接：https://blog.csdn.net/zeshen123/article/details/104569244

版权

前端专栏收录该内容

27 篇文章 0 订阅

订阅专栏

1.在主页面只留下id为app的div和引进打包后的js

<body>
		<div id="app"></div>
		<script src="./dist/bundle.js"></script>
</body>

2.在打包前的js中写上根节点App及导入后续组件

import Vue from 'vue'
import App from './vue/App.vue'

new Vue({
	el:'#app',
	template:'<App/>',
	components:{
		App
	}
})

import Vue需要先配置Vue，在命令行输入

npm install vue --save

会出现报错此时webpack.config.js中配置上resolve及vue的rule

module.exports={
	entry:'./src/main.js',
	module:{
		rules:[
		{
			test:/\.vue$/,
			use:['vue-loader']
		}
		]
	},
	resolve:{
		alias:{
			'vue$': 'vue/dist/vue.esm.js'
		}
	}
}

此时运行可能还会报错，需将vue-loader的版本改低，改为13.0.0，在package.json文件中改
再更新一下

npm install

此步骤完成则可创建.vue文件

<template>
	<div>
	<h2>
	haha
	{{message}}
	</h2>
	</div>
</template>

<script>
	export default{
		name:"App",
		data(){return {message:'app'}},
	methods:
	{
		open(){}
	}
	}
	
</script>

<style>
</style>

在template中写html，在script写data，methods以及引用其他组件，在style中写css

此时需要配置一下webpack对于css的loader
在命令行输入

npm install --save-dev css-loader
npm install style-loader --save-dev

再webpack.comfig.js配置上css和style的loader

module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          { loader: "style-loader" },
          { loader: "css-loader" }
        ]
      }
    ]
  }

3.此后每加入一个组件则创建一个Vue文件，在template写上对应html代码，在script中export default下写上name。
然后在根的Vue文件中引入，如：

import Cpn from './Cpn.vue'

在export default下components注册对应组件名

沼泽深处的王

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue配合webpack组件化开发（实际开发中也是如此）

1.在主页面只留下id为app的div和引进打包后的js<body> <div id="app"></div> <script src="./dist/bundle.js"></script></body>2.在打包前的js中写上根节点App及导入后续组件import Vue from 'vue'impor...
复制链接

扫一扫