使用 webpack 运行 vue [英] run vue with webpack
问题描述
我正在尝试使用 webpack 运行 vue,但是当我运行 webpack
时,index.html
显示一个空白页面.我的代码有什么问题?
I'm trying to run vue using webpack but when i run webpack
, index.html
shows a blank page.whats wrong with my code?
index.html
<html lang="en">
<head>
<meta charset="utf-8">
<title>Vue Example</title>
</head>
<body>
<div id="app">{{ message }}</div>
<script src="dist/build.js"></script>
</body>
</html>
.
//main.js
import Vue from 'vue'
var a = new Vue({
el: '#app',
data: {
message: "i know you"
}
})
.
//webpack.config.js
module.exports = {
// This is the "main" file which should include all other modules
entry: './src/main.js',
// Where should the compiled file go?
output: {
// To the `dist` folder
path: './dist',
// With the filename `build.js` so it's dist/build.js
filename: 'build.js'
},
module: {
// Special compilation rules
loaders: [
{
// Ask webpack to check: If this file ends with .js, then apply some transforms
test: /\.js$/,
// Transform it with babel
loader: 'babel',
// don't transform node_modules folder (which don't need to be compiled)
exclude: /node_modules/
}
]
}
}
推荐答案
在使用 VUE 时,WebPack 本身的配置非常人性化,但是对于初学者来说,很容易出错.导致项目出错,就像你出不来页面一样.
When using VUE, the configuration of the WebPack itself is very user-friendly, but for beginners, it is easy to make mistakes. Cause the project to go wrong, just like you do not come out of the page.
在使用vue的项目中,个人不建议单独配置webpack和vue-loader.可以直接使用vue官方脚手架vue-cli.不用考虑这些配置,自动配置.
In projects that use vue, individuals do not recommend configuring webpack and vue-loader separately. You can directly use vue official scaffolding, vue-cli. Do not have to consider these configurations, automatically configured.
如果您刚开始学习 Vue,这里有一个入门级演示.虽然只是一个小应用,但是涵盖了很多知识点(vue2.0 + vue-cli + vue-router + vuex + axios + mysql + express + pm2 + webpack),包括前端、后端、数据库等网站的一些必备元素,对我来说,学习意义重大,希望互相鼓励!
If you just started learning Vue, here's an entry-level demo. Although it is only a small application, but it covers a lot of knowledge points (vue2.0 + vue-cli + vue-router + vuex + axios + mysql + express + pm2 + webpack), including front-end, back-end, database and other sites Some of the necessary elements, for me, learning great significance, would like to encourage each other!
这篇关于使用 webpack 运行 vue的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!