要使用vue就要安装VUE 安装VUE的话应该是
npm install vue --save
注意 这个地方就不加 -dev 因为生产环境的时候也是需要vue的
//使用vue进行开发
import Vue from 'vue'
//直接把app里面的代码都放到了 app.js里面
import App from './vue/APP'
const app = new Vue({
el:'#app',
template:'<App/>',
//往组件里面注册APP
components:{
App
}
})
vue.vue
<template>
<div><h2>{{message}}</h2>
<button>按钮</button>
<h2>{{name}}</h2></div>
</template>
<script>
export default {
name: "APP",
data() {
return {
message: 'hello webpack',
name: 'codewhy'
}
}
}
</script>
<style scoped>
</style>
这样就把app内容提取出来成为了一个.vue文件
template:'<App/>', 这个编译的时候是直接替代el里面的内容
当然是用.vue文件得需要添加loader
npm install vue-loader vue-template-compiler --save-dev
配置文件里面添加
{
test:/\.vue$/,
use:['vue-loader']
}
总vue-loader 14之后的版本要想使用这个必须要给他配置一个插件
当然也可以不用引入 直接在package.json里面把vue-loader的版本改为13.0.0之后再npm instal就行了
下面引入插件概念