webpack，vue整合

最新推荐文章于 2024-07-28 11:20:53 发布

黄尚炎

最新推荐文章于 2024-07-28 11:20:53 发布

阅读量827

点赞数

分类专栏： webpack Vue 文章标签： webpack4整合vue

本文链接：https://blog.csdn.net/weixin_44702125/article/details/89415686

版权

webpack 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

Vue

2 篇文章 0 订阅

订阅专栏

开发环境：Windows
node版本
npm版本
1.初始化项目
npm init -y
项目结构：
webpack_vue
|-dist
|-src
package.json
2.安装
2.1:webpack
指令：
cnpm install webpack webpack-cli -d
webpack-dev-server：cnpm i webpack-dev-server -D
2.2:babel
指令：
cnpm i babel-loader @babel/core -D
cnpm i @babel/plugin-transform-runtime @babel/runtime @babel/plugin- proposal-class-properties -D
cnpm i @babel/preset-env
2.3:vue
cnpm i vue -D
cnpm i vue-loader vue-template-compiler -D
3.配置
3.1：自动编译打包（webpack-dev-server）
package.json
{
“name”: “webpack4_vue”,
“version”: “1.0.0”,
“description”: “”,
“main”: “index.js”,
“scripts”: {
“test”: “echo “Error: no test specified” && exit 1”,
+ “dev”: "webpack-dev-server --mode development"
},
“keywords”: [],
“author”: “”,
“license”: “ISC”,
“dependencies”: {
“jquery”: “^3.4.0”,
“webpack”: “^4.30.0”,
“webpack-cli”: “^3.3.0”
}
}
3.2：配置解析ES6语法，及更高版本语法(babel)
webpack.config.js 配置文件
//加载模块
const path = require(‘path’)
module.exports = {
entry: path.join(__dirname, ‘./src/main.js’),//入口文件
output: {
path: path.join(__dirname, ‘./dist’), //出口（打包后）文件路径
filename: ‘bundle.js’ //出口（打包后））文件名
},
+ module:{
+ rules:[
+ {test: /.js$/, use: ‘babel-loader’, exclude: /node_modules/}//解析js文件，node_modules目录除外
+ ]
+ }
}

.babelrc 配置文件
{
“plugins”: [
“@babel/plugin-transform-runtime”,
“@babel/plugin-proposal-class-properties”
],
“presets”: [
[
“@babel/preset-env”,
{
“useBuiltIns”: “entry”
}
]
]
}

3.3配置vue
webpack.config.js配置文件
const path = require(‘path’)
+const VueLoaderPlugin = require(‘vue-loader/lib/plugin’)
module.exports = {
entry: path.join(__dirname, ‘./src/main.js’),//入口文件
output: {
path: path.join(__dirname, ‘./dist’), //出口（打包后）文件路径
filename: ‘bundle.js’ //出口（打包后））文件名
},plugins:[
new VueLoaderPlugin()
],module:{
rules:[
{test: /.js$/, use: ‘babel-loader’, exclude: /node_modules/},
+ {test: /.vue$/, use: ‘vue-loader’}
]
}
}
4.举例使用：
4.1:页面：
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<meta http-equiv=“X-UA-Compatible” content=“ie=edge”>
<title>webpack 整合vue
</head>
<body>
<div id=“app”>
<login>
</div>
</body>
<script src="…/bundle.js">
</html>
4.2：编写组件
register.vue组件
<template>
<h1>注册控件
</template>
login.vue组件
<template>
<div>
<h1>登录控件
<register>
</div>
</template>
<script>
//组件中引用组件
import register from ‘./register.vue’
export default {
components: {register}
}
</script>
4.3编写js
main.js
//导入
import Vue from ‘vue/dist/vue.js’
import login from ‘./login.vue’
//创建VM实例
var vm = new Vue({
el: ‘#app’,
components: {
//方式一：定义组件
//login: {template: ‘<h1>登录组件</h1>’}
//方式二：引用组件
login
}
})
4.4：执行
指令：npm run dev
项目结构：
webpack_vue
package.json
.babelrc
webpack.config.js
|-dist
   |–index.html
|-src
   |–login.vue
   |–main.js
   |–register.vue