当前Vue版本2.4.2,Webpack版本3.5.5。
搭建简单的Vue脚手架
基本安装
mkdir vue-start && cd vue-start
npm init -y
cnpm install --save-dev webpack html-webpack-plugin clean-webpack-plugin webpack-dev-server
cnpm install --save-dev babel-core babel-loader babel-preset-vue-app
cnpm install --save-dev css-loader style-loader file-loader url-loader
cnpm install --save-dev postcss-loader autoprefixer
cnpm install --save-dev vue-loader vue-template-compiler
cnpm install --save vue
新建webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const webpack = require('webpack');
module.exports = {
entry: {
app: './src/index.js',
},
devtool: 'inline-source-map', //仅限开发环境配置,用于堆栈追踪错误和警告
devServer: {
contentBase: './dist',
hot: true //启用HMR
},
module: {
rules: [{
test: /\.vue$/,
use: ['vue-loader']
},
{
test: /\.js$/,
use: ['babel-loader'],
exclude: /node_modules/
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader', 'postcss-loader']
},
{
test: /\.(png|jpg|jpeg|gif|eot|ttf|woff|woff2|svg|svgz)(\?.+)?$/,
use: [{
loader: 'url-loader',
options: {
limit: 10000
}
}]
}]
},
plugins: [
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
title: 'Webpack Vue Demo'
}),
new webpack.HotModuleReplacementPlugin() //配置HRM插件
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
修改package.json文件
"scripts": {
"build": "webpack",
"start": "webpack-dev-server --open"
},
增加.babelrc配置文件
{
"presets": ["vue-app"]
}
增加postcss.config.js文件
module.exports = {
plugins: [
require('autoprefixer')()
]
}
搭建demo页面
新建src目录,在src下新建App.vue文件如下:
<template>
<div id="app">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default{
data () {
return {
msg: 'Hello World!'
}
}
}
</script>
<style>
h1{
color:red;
}
</style>
新建index.js如下:
import Vue from 'vue'
import App from './App.vue'
new Vue({
el: 'body',
render: h => h(App)
})
命令行运行npm run start,打开浏览器,可以看到红色的Hello World!,将h1样式改成green,可以看到浏览器自动刷新成绿色。
运行npm run build,可以看到工程目录下多了dist目录。
源代码地址:https://github.com/wu-boy/vue-demo,vue-start目录。
本例子配置简单,仅用于学习使用。