//下面是导入app.vue
import app from ‘./vue/app.vue‘
new Vue({
el:‘#app‘,
// tempalte会完全替换掉id为app的div里面的内容，所以使用了<app/>
template:‘<app/>‘,
components:{
app
}
})
上面是main.js中的代码
<template>
<div >
{{msg}}
<button @click="btnclick()">hello world</button>
<h2 class="title">....</h2>
</div>
</template>
<script>
export default {
name:‘app‘,
data(){
return{
msg:‘hello world‘
}
},
methods:{
btnclick:function(){
alert(‘hello world‘)
}
}
}
</script>
<style>
.title {
background-color: brown;
}
</style>
上面是app.vue中的代码
运行时需要先安装npm install --save-dev vue-loader vue-template-compiler（vue-loader）
这个完成后再运行npm run build会出现
vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.
需要在webpack.config.js中引入文件
const path = require(‘path‘); const VueLoaderPlugin = require(‘vue-loader/lib/plugin‘) module.exports = { entry:‘./src/main.js‘, output:{ //动态获取路径 path:path.resolve(__dirname,‘dist‘), filename:‘bundle.js‘, publicPath:"dist/" }, module:{ rules: [ { // $表示结尾 test: /\.css$/, //style-loader负责将样式添加到DOM中 //css-loader只负责加载，不负责解析 //使用多个loader时，是从右向左的 use: [‘style-loader‘, ‘css-loader‘ ] }, { test: /\.less$/, use: [{ loader: "style-loader" }, { loader: "css-loader" }, { loader: "less-loader" } ] }, { test: /\.(png|jpg|gif)$/, use: [ { loader: ‘url-loader‘, options:{ //当图片的体积大于limit时，会自动使用file-loader转换成文件形式，而不会转换成base64格式 limit:1000, //[]是一个变量 name:‘img/[name].[hash:8].[ext]‘ } }, ] }, { test:/\.vue$/, use:[‘vue-loader‘] } ] }, resolve: { //alias:别名 alias: { ‘vue$‘: ‘vue/dist/vue.esm.js‘ } }, plugins:[ new VueLoaderPlugin() ] }