vue webpack 环境搭建
安装包
npm init -y
npm install -S vue@2
npm install -D babel-core@6 babel-loader@7 babel-plugin-transform-runtime@6 babel-preset-env@1 babel-preset-stage-0@6 css-loader@0 file-loader@2 html-webpack-plugin@3 less@3 less-loader@4 sass.js@0 sassjs-loader@2 style-loader@0 url-loader@1 vue-loader@14 vue-template-compiler@2 webpack@3 webpack-dev-server@2
配置 webpack.config.js
var path = require("path")
var webpack = require("webpack")
var htmlWebpackPlugin = require("html-webpack-plugin")
module.exports = {
entry: path.join(__dirname, "./src/main.js"),
output: {
path: path.join(__dirname, "./dist"),
filename: "bundle.js"
},
devServer: {
open: true,
port: 3000,
contentBase: "src",
hot: true,
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new htmlWebpackPlugin({
template: path.join(__dirname, "./src/index.html"),
filename: "index.html"
})
],
module: {
rules: [
{test: /\.css$/, use: ["style-loader", "css-loader"]},
{test: /\.less$/, use: ["style-loader", "css-loader", "less-loader"]},
{test: /\.scss$/, use: ["style-loader", "css-loader", "sassjs-loader"]},
{test: /\.(jpg|jpeg|png|git|bmp)$/, use: "url-loader?limit=10240&name=[hash:8]-[name].[ext]"},
{test: /\.(ttf|eot|svg|woff|woff2)$/, use: "url-loader"},
{test: /\.js$/, use: "babel-loader", exclude: /node_modules/},
{test: /\.vue$/, use: "vue-loader"}
]
}
}
配置 .babelrc
{
"presets": ["env", "stage-0"],
"plugins": ["transform-runtime"]
}
修改 package.json
,
"dev": "webpack-dev-server --open --host 127.0.0.1 --port 3000 --hot"
页面 src/index.html
<!DOCTYPE html>
<html>
<head>
<title>webpack vue</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
脚本 src/main.js
import Vue from "vue"
import login from "./login.vue"
var vm = new Vue({
el: "#app",
data: {},
methods: {},
render: c => c(login)
})
组件 src/login.vue
<template>
<div>
<h1>{{msg}}组件</h1>
</div>
</template>
<script>
export default {
data: function() {
return {
msg: "登录"
}
}
}
</script>
<style lang="sassjs" scoped>
h1 {
font-size: 80px;
}
</style>
运行
npm run dev