webpack配置VUE

runtime-only/compiler版本

vue构建了两类版本：区别在于打包中的main.js文件

• runtime-compiler:代码中，可以有template，compiler会编译template

  template->ast->render->vdom->UI

new Vue({
    el:'#app',
    template:<App/>,  //使用
    components:{App}}) //注册

• runtime-only:代码中，不可以有任何template，推荐使用

  render->vdom->UI

  • 性能更好

  • 代码量更少，轻6KB

new Vue({
    el:'#app',
    render：h=>h(App)}) //render函数，其中的所有内容替换到html的id='app'板块中，也可以传组件

基本配置

1、在集成终端下载：

npm install vue --save

2、在 webpack 配置对象webpack.config.js中，使用runtime-compiler版本

module.exports = {
  ***resolve:{  //指定版本，使用runtime-compiler，使代码中，可以有template
      alias:{'vue$':'vue/dist/vue.esm.js'}}},

3、使用vue进行开发

<div id='app'>  //html中相应写id='app'
    <h2>{{message}}</h2>
    <button>按钮</button>
</div>

***import Vue from 'vue'  //系统自动去node_modules找vue，原因export default Vue
*const app=*new Vue({   
    el:'#app',...})

el和tempalte的区别

<div id="app">  //html中内容清空
</div>

import Vue from 'vue' 
//子组件
const App={
    template:`
        <div>
        <h2>{{message}}</h2>
        <button>按钮</button>
        </div>`,
    data(){message:'AAA'}}  //data用函数表示
//父组件
const app=new Vue({
    el:'#app',
    template:'<App></App>' //直接调用子组件，vue自动将template内的所有内容替换到html的id='app'板块中
    components:{App}})  //注册组件

vue-loader

1、安装vue loader和编译

*vue-template-compiler用于将template解析为render函数

npm install --save-dev vue-loader@13.0.0 vue-template-compiler

2、在 webpack 配置对象webpack.config.js中配置

module: {
    rules: [
        {test:/\.vue$/,
        use:['vue-loader']}

3、使用

<div id="app">  //html中内容清空
</div>

import Vue from 'vue'   //main.js,被打包文件，导入import
import App from './vue/App.vue'  //将子组件分离成单独文件App.vue，调用即可
const app=new Vue({
    el:'#app',
    template:'<App/>',
    components:{
        App}})

App.vue内容：vue自动export导出

//html要引用的模板
<template>    
     <div>
        <h2 class="title">{{message}}</h2>
        <button>按钮</button>
    </div>
</template>
//方法，数据等
<script>
export default{
    name:'App',
    data(){return {message:'AAA'}},
    methods:{},}，
</script>
//样式
<style scoped>
    .title{color: aquamarine;}
</style>