npm init -y
npm install --save vue vue-router
npm install --save-dev webpack webpack-cli
./src/app.js
import Vue from 'vue'
import App from './App.vue'
new Vue({
el: '#app',
render: h => h(App)
})
./src/App.vue
<template>
<div>
<h1>Hello World!</h1>
</div>
</template>
./build/webpack.config.dev.js
'use strict'
const { VueLoaderPlugin } = require('vue-loader')
module.exports = {
mode: 'development',
entry: [
'./src/app.js'
],
module: {
rules: [
{
test: /\.vue$/,
use: 'vue-loader'
}
]
},
plugins: [
new VueLoaderPlugin()
]
}
npm install --save-dev vue-loader vue-template-compiler vue-style-loader css-loader
./package.json
"build": "webpack --config build/webpack.config.dev.js"
./index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>My Vue app with webpack 4</title>
</head>
<body>
<div id="app"></div>
<script src="dist/main.js" type="text/javascript"></script>
</body>
</html>
npm run build
App.vue→app.js→main.js
输出到默认文件夹./dist/main.js
本文系外文翻译,前往查看
如有侵权,请联系 cloudcommunity@tencent.com 删除。
本文系外文翻译,前往查看
如有侵权,请联系 cloudcommunity@tencent.com 删除。