10.webpack中使用vue

最新推荐文章于 2020-07-14 15:54:37 发布

「已注销」

最新推荐文章于 2020-07-14 15:54:37 发布

阅读量96

点赞数

分类专栏： vue简介文章标签： vue

本文链接：https://blog.csdn.net/weixin_47870554/article/details/107285392

版权

vue简介专栏收录该内容

14 篇文章 0 订阅

订阅专栏

初始化npm。

npm init -y

npm安装vue。

npm install vue --save-dev

npm安装vue相关编译器

npm i vue-loader vue-template-compiler --save-dev

npm安装babel

npm install @babel/cli @babel/core @babel/preset-env @babel/preset-react babel-loader --save-dev

npm安装webpack。

npm install webpack webpack-cli webpack-dev-server --save-dev

npm安装webpack插件：

npm install html-webpack-plugin open-browser-webpack-plugin --save-dev

npm安装CSS、Sass

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

查看安装地依赖：

npm list --depth 0

webpack配置webpack.config.js：

const path = require('path')
const HtmlWebPackPlugin = require('html-webpack-plugin')
const OpenBrowserPlugin = require('open-browser-webpack-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const webpack = require('webpack')

module.exports = {
	entry: './index.js',
	output: {
		path: path.join(__dirname, 'dist'),
		filename: 'bundle.js'
	},
	module: {
		rules: [
			{
				test: /\.jsx?/,
				// 排除 node_modules 目录下的文件，防止被打抱
				exclude: path.resolve(__dirname, 'node_modules'),
				use: {
					loader: 'babel-loader',
					options: {
						babelrc: false,
						presets: [
							require.resolve('@babel/preset-react'),
							[require.resolve('@babel/preset-env', {module: false})],
						],
					}
				}
			},
			{
				test: /\.vue$/,
				use: ['vue-loader'],
			},
		]
	},
	plugins: [
		new VueLoaderPlugin(),
		new HtmlWebPackPlugin(),
		new OpenBrowserPlugin({
			url: 'http://localhost:8080'
		}),
		new webpack.HotModuleReplacementPlugin(),
	],
	devServer: {
		hot: true
	}
};

app.vue

<template>
	<div>{{message}}</div>
	<button v-on:click='hi'>hi</button>
</template>
<script type="text/javascript">
	export default {
		data() {
			return {
				message: 'hello vue'
			}
		},
		methods: {
			hi(){
				alert('hi');
			}
		},
		beforeCreate: function(){
			console.log('创建之前');
		},
		created: function(){
			console.log('创建');
		},
		beforeMount: function(){
			console.log('挂载之前');
		},
		mounted: function(){
			console.log('挂载');
		},
	}
</script>

测试js

import Vue from 'vue'
import app from './app.vue'

const root = document.createElement('div');
document.body.appendChild(root)

Vue.config.productionTip = false;
new Vue({
    render: (h) => h(app)
}).$mount(root);

测试页面index.html：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>webpack</title>
</head>
<body>
	<script type="text/javascript" src="dist/bundle.js"></script>
</body>
</html>

文件目录

编译

webpack

webpack-dev-server服务器上部署

webpack-dev-server

「已注销」

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
10.webpack中使用vue

初始化npm。npm init -ynpm安装vue。npm install vue --save-devnpm安装vue相关编译器npm i vue-loader vue-template-compiler --save-devnpm安装babelnpm install @babel/cli @babel/core @babel/preset-env @babel/preset-react babel-loader --save-devnpm安装we
复制链接

扫一扫