然后在webpack中配置Vue

lyz的自学笔记

---

前言

在webpack中使用vue开发

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、如何在webpack中配置才可以使用vue

1、不使用webpack的情况下去使用Vue

• 下载Vue框架，使用scricpt标签引入vue.js文件，就可以使用Vue了，这样使用不是模块化的思想。

2、使用webpack的情况下去使用Vue

• 使用npm下载vue，然后通过import引入vue，这样就符合模块化的思想。
• 为什么可以引入Vue呢？因为Vue使用了ES6将Vue暴露出去了。

---

二、使用Vue

1.使用npm命令下载Vue

	npm install --save vue

2、然后在js文件中使用import导入vue

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

3、挂载标签ID

	new Vue({
	  el: '#app',
	  data:{
	    message:'你好'
	  }
	})

4、使用npm命令进行打包

	npm run build

打包完成后，引入打包后的js文件，打开浏览器发现报错了，报错原因如下：

大概意思是你正在使用vue的是runtime-only版本，这个版本中不能有template。
Vue构建有两个版本：

• runtime-only：代码中，不可以有任何的template
• runtime-compiler：代码中可以有template，因为complier中可以编译template

这里需要使用template，所以使用的的版本是runtime-compiler，就需要去webpac-config.js文件中为vue配置别名

	  resolve: {
	    // alias: 别名
	    alias: {
	    	//省略js/css/vue后缀名
	       extensions: ['.js', '.css', '.vue'],
	      //指定Vue的文件为vue.esm.js，默认是vue.runtime.js文件
	      'vue$': 'vue/dist/vue.esm.js'
	    }
	  },

配置完成后，打开浏览器就可以正常浏览了

---

三、el和template的区别

正常运行后，我们来考虑另外一个问题：

• 如果我们希望将data中的数据显示在界面中，就必须修改index.html
• 如果我们后面自定义了组件，也必须修改index.html来使用组件
• 但是html模版在之后的开发中我们不希望手动的来频繁修改，是否可以做到呢？

定义template属性：

• 在Vue实例中，我们定义el属性，用于和index.html中的#app进行绑定，让Vue实例可以管理它其中的内容
• 定义了template之后，我们就可以将index.html中的{{message}}内容删除了，在接在template属性中定义就可以直接显示了。

	new Vue({
	  el: '#app',
	  data:{
	    message:'你好！',
	    name:'lyz'
	  },
	  template: `
	  <div id=‘app’>
	  	<h1>{{message}}</h1>
	  	<h2>{{name}}</h2>
	  </div>`
	})

四、组件化
1、如果每次都在template中写大量的html代码，会显得非常不整洁，不易读，写起来也恶心，所有可以将template中的代码抽取分离出来到一个组件中
例：在src下创建一个文件夹vue，在vue中创建一个vue文件，App.vue

	<template>
	  <div>
	    <h2 class="title">{{message}}</h2>
	    <button @click="btnClick">按钮</button>
	    <h2>{{name}}</h2>
	    <Cpn/>
	  </div>
	</template>
	
	<script>
	  import Cpn from './Cpn'
	
	  export default {
	    name: "App",
	    components: {
	      Cpn
	    },
	    data() {
	      return {
	        message: 'Hello Webpack',
	        name: 'lyz'
	      }
	    },
	    methods: {
	      btnClick() {
	      }
	    }
	  }
	</script>
	
	<style scoped>
	  .title {
	    color: green;
	  }
	</style>

写完组件后将App.vue导入main.js文件中

	import App from './vue/App.vue'

导入后在Vue实例中注册，并且在template中使用组件

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

以上步骤完成后，在此运行npm命令打包，但是还会报错，错误是打包不了vue，因为没有打包vue文件的loader，所有需要在webpack中去配置，下载以下两个包。

• vue-loader：用于加载打包vue
• vue-template-compiler：vue模版的编译

下载完成后配置webpack-config.js

    {
    		//.有特殊含义，需要转义，使用/
      test: /\.vue$/,
      use: ['vue-loader']
    }

配置完成后浏览就可以了

将template中的代码抽取出来处理成一个组件，然后在实例中注册，这样的写法使得Vue实例中代码看清很舒服，维护起来也便利。
vue文件t中的标签：
template：专写模版代码
script:专写js代码
style:专写样式代码