Vue学习笔记-Day7 webpack配置vue环境、引入.vue文件

webpack配置vue环境

首先进行安装vue相关的包：

npm install vue -save  //安装vue，这里不需要加-dev，因为vue是开发和运行都需要的

注意：开发依赖在安装完成后，自动显示在 package.json的devDependencies中，而 运行依赖，在 dependencies中

安装完成后，在需要使用的地方导入，并且创建vue的实例：

import Vue from 'vue'
const app = new Vue({
  el:'#app',
  template:`
  <div id='app'><button>hello</button></div>
  `,
  data:({
    msg : "hello world!",
  })
})

这样一运行，发现，报错了

错误原因：使用的是 runtime-only模式，模板编译是无效的。
这是由于vue在构建的时候，构建了两种版本，一种是runtime-only还有一种是 runtime-compiler。那么这种情况该如何解决呢？

方法1

在webpack.config.js中配置使用runtime-compiler模式

方法二

省掉template 的解析过程

import Vue from 'vue'
const app = new Vue({
  el:'#app',
  render:function (h){
    return h('button',['hello'])
  },
  data:({
    msg : "hello world!",
  })
})

这样运行出来的效果和上面使用模板是一样的，但是，DOM树可能存在差距。这是由于render函数的参数所导致的，在正式开发的过程中，我们用到组件后，就可以直接给render传组件作为参数。

el和template的使用：

我们在初始化实例的时候，同时写有el和template，如果两者都存在，那么template的优先级 > el的优先级的，这个优先级是vue的底层所定义的，根据生命周期可看出来：

el和template同时存在，则将template编译成渲染函数，如果不存在template，则编译el里面的html作为模板。

webpack引入逐步.vue文件

一步步的实现在webpack中引入vue：
a.在同一个JS文件中，把template中的内容抽离成子组件的形式进行加载。
b.将子组件放入另外一个JS文件中，在创建实例的时候引用
c.将子组件放入.vue的文件中，在创建实例的时候引用

1 抽离成子组件

import Vue from 'vue'

const App = {
  template:`
  <div id='app'><button>{{msg}}</button></div>
  `,
  data(){
    return {
      msg : "hello world!",
    }
  }
}
const app = new Vue({
  el:'#app',
  template:'<App/>',
  components:{
    App,
  }
})

2 使用单独的js文件存放，按需导入

创建App.js

export default  {
    template:`
    <div id='app'><button>{{msg}}</button></div>
    `,
    data(){
      return {
        msg : "hello world!",
      }
    }
}

调用

import Vue from 'vue'

import App from './app'; //导入app.js
const app = new Vue({
  el:'#app',
  template:'<App/>',
  components:{
    App,
  }
})

虽然单独将代码抽离出来，但是模板和JS代码依然没有分离，所以需要我们引入vue文件

3 JS文件转化为.vue文件

创建app.vue文件，然后将代码放入

<template>
  <div id='app'><button>haha</button></div>
</template>
<script>
export default {
   data(){
      return {
        msg : "hello world!",
      }
    }
}
</script>

由于多了.vue文件，浏览器不认识，所以需要加载对应的loader将他编译成浏览器能认识的样子,这里需要两个loader：vue-loader、vue-template-comiler(编译子组件template)

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

安装完loader以后，在webpack.config.js中进行配置：

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

然后npm run build,发现报错了，大概意思就是 我没有安装解析vue的loader，但是明明已经安装过 vue-loader，后来发现，是因为vue-loader在版本15以上的，需要和一个插件连用。所以解决方法：

方法1

降低vue-loader的版本，在package.json中设置vue-loader的版本

然后 npm install，之后就能正常运行了

方法2

配置插件: