Webpack中使用Vue的相关配置

前面讲述了Webpack通过安装并配置相应的loader实现css文件、less文件、图片文件、ES6转ES5的一些打包方式，接下来重点介绍一下关于vue的一些配置。

vue的安装：

1. 直接下载使用
2. CDN引入
3. npm 安装

通过npm 安装vue:

npm install vue --save

注意：--save运行时依赖，--save -dev开发时依赖 ，因为最终运行时需要vue环境，所以不加-dev

在main.js文件中引入vue，并对vue产生依赖（使用vue）

main.js

//使用vue进行开发
//1.引入vue
import Vue from 'vue'

const app = new Vue({
  el:'#app',
  data(){
    return{
      message:'Hello Webpack!'
    }
  }
})

index.html文件中添加以下内容：

<div id="app">
  <h2>{{message}}</h2>
</div>

运行：npm run build，报错信息如下： 

配置webpack.config.js文件

resolve:{
    alias:{//别名
      'vue$': 'vue/dist/vue.esm.js'
    }
  }

 重新打包运行：npm run build

 main.js中使用vue

//使用vue进行开发
//1.引入vue
import Vue from 'vue'

const app = new Vue({
  el:'#app',
  template:`
  <div>
    <h2>{{message}}</h2>
    <button @click="btnClick">按钮</button>
    <h2>{{name}}</h2>
  </div>
  `,
  data:{ 
      message:'Hello Webpack!',
      name:'webpack 配置 vue！'
    }
})

此时index.html只需要添加

<div id = "app"></div>

打包运行：npm run build 

 main.js中的<template></template>会替换掉index.html文件中的<div id = "app"></div>

Vue项目的抽取一

为了在开发过程中能够更加简单方便，需要对代码文件进行抽取：

 main.js的抽取

//使用vue进行开发
//1.引入vue
import Vue from 'vue'

//抽取到组件App内
const  App = {
  template:`
  <div>
    <h2>{{message}}</h2>
    <button @click="btnClick">按钮</button>
    <h2>{{name}}</h2>
  </div>`,
  data(){
    return{
      message:'Hello Webpack!',
      name:'webpack 配置 vue！'
    }
  },
  methods:{
    btnClick(){
      console.log('btnClick')
    }
  }

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

打包运行：npm run build

继续抽取：

在src目录下新建文件夹vue并新建app.js文件：

export default{
  template:`
  <div>
    <h2>{{message}}</h2>
    <button @click="btnClick">按钮</button>
    <h2>{{name}}</h2>
  </div>`,
  data(){
    return{
      message:'Hello Webpack!',
      name:'webpack 配置 vue！'
    }
  },
  methods:{
    btnClick(){
      console.log('btnClick')
    }
  }
}

 main.js

//使用vue进行开发
//1.引入vue
import Vue from 'vue'
import App from './vue/app'

//抽取到组件App内
new Vue({
  el:'#app',
  template:'<App/>',//使用组件App
  components:{//注册组件App
    App
  }
})

打包运行：npm run build 能够正常运行 

Vue项目的抽取二

 创建.vue文件

在vue文件夹下创建App.vue文件：

<template>
  <div>
    <h2 class="title">{{message}}</h2>
    <button @click="btnClick">按钮</button>
    <h2>{{name}}</h2>
  </div>
</template>

<script>
  export default {
    name:'App',
    data(){
    return{
      message:'Hello Webpack!',
      name:'webpack 配置 vue！'
     }
    },
    methods:{
      btnClick(){
        console.log('btnClick')
     }
    }
  }
</script>

<style scoped>
.title{
  color: yellow;
}
</style>

 在main.js文件中导入并使用

//使用vue进行开发
//1.引入vue
import Vue from 'vue'
// import App from './vue/app.js'
import App from './vue/App'//不能加.vue

//抽取到组件App内
new Vue({
  el:'#app',
  template:'<App/>',//使用组件App
  components:{//注册组件App
    App
  }
})

 此时还无法正常打包vue，需要添加对应的loader并进行相关配置

cnpm install --save-dev vue-loader@15.4.2 vue-template-compiler@2.5.21

然后配置webpack.config.js文件：

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

修改vue-loader版本：打开package.json 修改vue-loader的版本为13.0.0

运行npm install能够自动更新并安装，然后打包运行:npm run build

注意：打包vue文件，同样需要前面加载的一些loader:css、style、babel等。

vue组件化开发： 

 新建Cpn.vue文件

<template>
  <div>
    <h2>Cpn组件</h2>
    <p>Cpn组件内容</p>
    <h2>{{name}}</h2>
  </div>
</template>
<script>
export default {
  name:"Cpn",
  data(){
    return{
       message:'Hello Vue',
       name:'Cpn'
    }
   
  }
  
}
</script>

然后在App.vue文件中引用

<template>
  <div>
    <h2 class="title">{{message}}</h2>
    <button @click="btnClick">按钮</button>
    <h2>{{name}}</h2>
    <Cpn/>
  </div>
</template>

<script>
import Cpn from "./Cpn.vue"
  export default {
    name:'App',
    components:{
      Cpn
    },
    data(){
    return{
      message:'Hello Webpack!',
      name:'webpack 配置 vue！'
     }
    },
    methods:{
      btnClick(){
        console.log('btnClick')
     }
    }
  }
</script>

<style scoped>
.title{
  color: red;
}
</style>

打包运行：npm run build