//vue开发------------------------------------------------------------------------
npm install vue
webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyPlugin = require("copy-webpack-plugin");
const {CleanWebpackPlugin} = require("clean-webpack-plugin");
var path = require('path');
module.exports = {
entry: './src/main.js',
output: {path: path.resolve(__dirname, './dist'), filename: 'app.js'},
module: {
rules: [
{
test: /.css$/i,
use: ['style-loader', 'css-loader']
},
{
test: /.(png|jpg|gif)$/i,
use: [
{
loader: 'url-loader',
options:
{
limit: 8192,
name: '[path][name].[ext]',
},
},
],
},
{
test: /.vue$/i,
use: ['vue-loader']
},
],
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
title: 'Custom template',
// filename:'index.html',
inject: 'body',
template: path.resolve(__dirname, "index.html")
}),
new CopyPlugin({
patterns: [
{from: "static", to: "static"},
],
}),
],
resolve: {
alias:
{
'vue': 'vue/dist/vue.js'
}
}
};
main.js
import user from './t1' import css from './t1.css' import Vue from 'vue' console.log('this is main', user, css, Vue) var main = new Vue({ el: '#app', data: { message: 'Hello Vue!' }, })
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h3>{{message}}</h3>
</div>
</body>
</html>
