浅谈用webpack构建Vue

朱雀 2022-06-16 01:41 327阅读 0赞

1、创建基本结构

1) 通过以下命令创建一个项目空文件夹myApp并进入该文件夹：

mkdir myApp
    cd myApp/

2) 通过以下命令创建package.json：

npm init

3) 创建index.html：

<!DOCTYPE html>
    <html>
      	<head>
        	<title></title>
      	</head>
      	<body>
          	<h3>{
       { message }}</h3>
        	<script src="dist/build.js"></script>
      	</body>
    </html>

4) 通过以下命令创建空文件夹src并进入该文件夹：

mkdir src
    cd src/

5) 创建main.js：

import Vue from 'vue'
    new Vue({
      	el: 'body',
      	data: {
          	message: "Hello Vue"
      	}
    })

2、基本webpack构建

1) 创建webpack.config.js：

module.exports = {
      	// 入口主文件，包括其他模块
      	entry: './src/main.js',
      	// 编译的文件路径
      	output: {
         	// 输出的文件路径
        	path: './dist',
        	// 输出的文件名
        	filename: 'build.js'
      	},
      	module: {
        	// 特定的编译规则
        	loaders: [
          		{
            		// 验证文件是否是.js结尾，是则将其转换
            		test: /\.js$/,
            		// 通过babel转换
            		loader: 'babel',
            		// 不用转换的node_modules文件夹
            		exclude: /node_modules/
          		}
       		]
      	}
    }

2) 创建一个文件.babelrc，babel工具可以转换ES6到现在的JavaScript，Vue需要配置es2015和stage-0：

{
     	"presets": ["es2015", "stage-0"],
     	"plugins": ["transform-runtime"]
    }

3) 在命令行中安装webpack：

npm install -g webpack

4) 在命令行中一次性安装babel的一系列依赖包：

npm install --save-dev babel-core babel-loader babel-plugin-transform-runtime babel-preset-es2015 babel-preset-stage-0 babel-runtime

5) 在命令行中安装vue：

npm install --save-dev vue

6) 在命令行中运行：

webpack

3、vue-loader和.vue文件

1) 修改index.html文件：

<!DOCTYPE html>
    <html>
     	<head>
     		<title></title>
     	</head>
     	<body>
     		<app></app>
     		<script src="dist/build.js"></script>
     	</body>
    </html>

2) 修改main.js：

import Vue from 'vue'
    import App from './app.vue'
    new Vue({
     	el: 'body',
     	components: { App }
    })

3) 在src文件夹中创建app.vue：

<template>
    	<div class="message">{
       { message }}</div>
    </template>
    <script>
    	export default {
     		data () {
     			return {
     				message: 'Hello vue by vue-loader!'
     			}
     		}
    	}
    </script>
    <style>
    	.message {
     		color: blue;
    	}
    </style>

注意1：一个组件下只能有一个并列的 div。

可以写成：

<template>
    	<div class="out">
    		<div class="in">
    			{
       { message }}
    		</div>
    	</div>
    </template>

不能写成：

<template>
    	<div class="out">
    		{
       { message }}
    	</div>
    	<div class="in">
    		{
       { message }}
    	</div>
    </template>

注意2：使用export default时数据要写在 return里。

可以写成：

export default {
     	data () {
     		return {
     			message: 'Hello vue by vue-loader!'
     		}
     	}
    }

不能写成：

export default {
     	data () {
     		message: 'Hello vue by vue-loader!'
     	}
    }

export default是ES2015的模块规范，而module.exports是CommonJS的模块规范，因此也可使用module.exports：

module.exports = {
    	data: function() {
    		return {
    			message: 'Hello vue by vue-loader!'
    		}
    	}
    }

4) 修改webpack.config.js：

module.exports = {
      	entry: './src/main.js',
      	output: {
        	path: './dist',
        	publicPath: 'dist/',
        	filename: 'build.js'
      	},
      	module: {
        	loaders: [
          		{
            		test: /\.js$/,
            		loader: 'babel',
            		exclude: /node_modules/
          		},
    			{ 
    				test: /\.vue$/, 
    				loader: 'vue'
    			}
     		]
     	}, 
    	vue: { 
    		loaders: { 
    			js: 'babel'
    		}
    	}
    }

5) 在命令行中安装loaders：

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

6) 在命令行中运行：

webpack