vuejs学习3.4 webpack基本使用——配置Vue

下载

下载特定版本

npm install vue@2.6.11 --save

使用vue

//后面必须是小写的vue
import Vue from "vue"
const app = new Vue({
  el:"#app",
  data:{
    message:"我是message",
  },
})



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

使用后报错：

解决方法：
在webpack.config.js中配置：

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

真实代码

如果需要将data中数据显示到界面，必须要修改iindex.html，如果后面自定义组件，也需要修改，但是在真实代码中不会频繁的进行修改，可以通过template来实现

el和template区别

template会替换整个el

index.html中
<div id="app"></div>

new Vue({
  el:"#app",
  template:`<div>
    <h2>{{message}}</h2>
    <button @click="btn_click">按钮</button>
  </div>`,
  data:{
    message:"我是message",
  },
  methods:{
    btn_click(){
      console.log("点击按钮");
    }
  }
})

运行结果：

id=app消失，因为整个div会被template替换

代码抽取

抽取一

由于template中代码过多，可以定义一个组件

import Vue from "vue"
const cpn = {
  template:`<div>
    <h2>{{message}}</h2>
    <button @click="btn_click">按钮</button>
  </div>`,
  data(){
    return {
      message:"我是message"
    }
  },
  methods:{
    btn_click(){
      console.log("点击按钮");
    }
  }
}
new Vue({
  el:"#app",
  template:`<cpn/>`,
  components:{
    cpn,
  }
})

抽取二

创建一个vue文件夹，下创建cpn.js，抽取组件

export default {
  template:`<div>
    <h2>{{message}}</h2>
    <button @click="btn_click">按钮</button>
  </div>`,
  data(){
    return {
      message:"我是message"
    }
  },
  methods:{
    btn_click(){
      console.log("点击按钮");
    }
  }
}

而在main.js中直接导入cpn即可

import Vue from "vue"
import cpn from "./vue/cpn"
new Vue({
  el:"#app",
  template:`<cpn/>`,
  components:{
    cpn,
  }
})

抽取三

在vue文件夹下创建vue component类型文件cpn.vue，将cpn.js进行抽取替换

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

<script>
  export default {
    name: "cpn",
    data(){
      return {
        message:"我是message"
      }
    },
    methods:{
      btn_click(){
        console.log("点击按钮");
      }
    }
  }
</script>

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

在main.js中进行导入

import Vue from "vue"
import cpn from "./vue/cpn.vue"
new Vue({
  el:"#app",
  template:`<cpn/>`,
  components:{
    cpn,
  }
})

然后npm run build后报错

打包vue类型文件也需要合适的loader才能正常加载显示

安装vue-loader vue-template-compiler

vue-loader是对vue文件的加载，vue-template-compiler是对vue文件的编译

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

配置

{
        test: /\.vue$/，
        use: ['vue-loader']
      }

用于省略扩展名问题：
在webpack.config.js中添加extensions: [’.js’, ‘.css’, ‘.vue’]，可以省略扩展名

resolve:{
   extensions: ['.js', '.css', '.vue']，
    //alias别名
    alias:{
      'vue$':'vue/dist/vue.esm.js'
    }
  }