这是我参与「第四届青训营」笔记创作活动的的第9天

在webpack环境中集成Vuejs

希望在项目中使用Vuejs，必然需要对其有依赖，所以需要先进行安装注：因为我们后续是在实际项目中也会使用vue的，所以并不是开发时依赖没有-dev
npm install vue@2.5.21 --save

安装后就可以把vue整个当成一个模块

使用：import Vue from "vue"

没有写路径就会到node_modules找对应东西，找到就会把vue引入为什么：源码里export default Vue 导出Vue

使用vue

// 使用vue进行开发
import Vue from 'vue';

const app = new Vue({
  el : '#app',
  data : {
    messege : 'hello webpack'
  }
})

报错：You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build. 您正在使用Vue的仅运行时版本，而模板编译器不可用。可以将模板预编译为渲染函数，也可以使用包含编译器的内部版本。

解释：这个错误说的是我们使用的是runtime-only版本的Vue Vue在构建最终发布版本时，有两类版本

runtime-only：代码中不可以有任何template 不包含编译template的代码
runtime-compiler：代码中可以有template，因为有compiler可以用于编译template

因为会把div当作vue实例app的template，而我们当前使用的是版本runtime-only，所以报错

解决方案：修改webpack的配置

  resolve : {
    // alias 别名，外号
    alias : {
      'vue$' : 'vue/dist/vue.esm.js'
      // 以后在代码中import Vue from 'vue'
      // 会先看vue有没有指向具体的文件夹，否则默认vue.runtime.js
      // vue.esm.js里有compiler
      // 或者在导入Vue时直接import Vue from ‘vue/dist/vue.esm.js’就不用再配置了
    }
  }

安装vue：npm install vue@2.5.21 --save
导入：import Vue from "vue"
配置：'vue$' : 'vue/dist/vue.esm.js'

创建Vue时template和el关系

SPA:Single Page Application(单页应用程序) 一般只有一个html代码

正常运行之后，我们来考虑另外一个问题：如果我们希望将data中的数据显示在界面中，就必须是修改index.html 如果我们后面自定义了组件，也必须修改index.html来使用组件但是html模板在之后的开发中，我并不希望手动的来频繁修改，是否可以做到呢？

定义template属性： 在前面的Vue实例中，我们定义了el属性，用于和index.html中的#app进行绑定，让Vue实例之后可以管理它其中的内容这里，我们可以将div元素中的{{message}}内容删掉，只保留一个基本的id为div的元素但是如果我依然希望在其中显示{{message}}的内容，应该怎么处理呢？我们可以再定义一个template属性

在真实开发中，index.html中只写
<div id="app"></div>

而在vue实例中写template

new Vue({
  template : `
  <h2>{{messege}}</h2>
  <button @click="btnClick"></button>
  <h2>{{name}}</h2>
  `,
})

在vue实例中定义template，vue内部在编译时会自动将<div id="app"></div>替换成template的内容

运行后发现代码中就没有<div id="app"></div>了

vue终极使用方案

vue实例里加组件，在子组件里写之前的东西，vue实例的模板只写<子组件名字>

注册组件是components，局部组件。cpn中的template是组件模板，而vue中的template：‘’就是使用组件，也可template:'','效果相同

const App = {
  template : `
    <div>
    <h2 class="title">{{messege}}</h2>
    <button @click="btnClick">按钮</button>
    <h2>{{name}}</h2>
    </div>
  `,
  data(){
    return {
      messege : 'hello webpack',
      name : 'sonny'      
    }
  },
  methods : {
    btnClick(){
      console.log('btnClick');
    }
  }
}
new Vue({
  el : '#app',
  template : `<App></App>`,
  components : {
    App
  }
})

新建vue文件夹，app.js文件，在app.js里导出子组件, 在main.js里引入

// app.js 
export default {
  template : `<div></div>`,
  data(){
    return {}
  },
  methods : {}
}

// main.js
import App from './vue/app'
new Vue({
    el : '#app',
    template : `<App></App>`,
    components : {
      App
    }
  })

修改vscode默认模板，在安装目录resources下搜索expand-full，这个文件就是

创建app.vue文件，安装配置对应loader：vue-loader 和 vue-template-compiler vue-loader：加载vue文件 vue-template-compiler：对vue进行编译

安装：npm install --save-dev vue-loader@15.4.2 vue-template-compiler@2.5.21

配置：

{
  test : /\.vue$/,
  use : {
    loader : 'vue-loader'
  }
}

报错：vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config. 解决方案:

修改为 "vue-loader": "^13.0.0", 版本在13以上需要plugin插件 npm install
这里可以参考Vue官网安装一个插件，很简单：进入官网-生态系统-工具-Vue-loader-找到导航条上面的如何从v14迁移，第一个就是！ VueLoaderPlugin这个插件可以在vue官网导航栏生态系统里面查看vue-loader中如何安装
配置里面加上plugins:[ new VueLoaderPlugin() ] 和出入口同级

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

<script>
  export default {
    name : "App",
    components: {},
    data() {
      return {
        messege : 'hello webpack',
        name : 'sonny'
      };
    },
    methods: {
      btnClick(){
        console.log('btnClick');
      }
    },
  };
</script>

<style lang='scss'>
  .title{
    color: green;
  }
</style>

整个应用程序是一个组件树

能不能简写.vue

修改webpack的配置

resolve : {
    extensions : ['.js','.css','.vue'],
    // 这些后缀可以省略 
}

Webpack配置Vue ｜ 青训营笔记

在webpack环境中集成Vuejs

创建Vue时template和el关系

vue终极使用方案

能不能简写.vue

Webpack配置Vue ｜青训营笔记