webpack 配置vue

一、简介

       本篇文章介绍如何通过webpack配置从而能够在js文件中撸vue的代码，vue的代码就是比如 const  app=new  Vue({});类似这样的。那为什么要通过webpack配置来使用vue，而不是通过cdn，直接引用vue.js代码；答案就是为了进行模块化开发。不知道大家是否了解我刚刚所提及的两种使用vue的方式，cdn和直接引用vue.js。这两种方式都有一个特点就是需要在html文件中通过<script></script>来将vue.js进行一个导入，这样模块化开发的效果非常差，所以需要改变，而为什么模块化开发就是比较好的呢，本专栏有篇文章专门介绍。

 

二、如何操作

        1.首先安装vue， 安装命令是： npm  install  vue  --save ，这里没有-dev, 只有--save，原因是我们安装的vue是运行时依赖，也就是说当我们代码打包完成之后，vue的东西还要用呢，它的代码不是说打包完成之后就没用了，我们的项目时需要vue的代码才能运行起来的，所以选择运行时依赖来安装 。

        2. 使用vue: 在js中进行导入，让webpack知道要对vue进行打包；在html中搞个id=app的vue实例作用域。

       

       3. 最后使用webpack进行打包，然后在浏览器运行，此时发现了一个错误:

      这个错误的大概意思是： 你当前使用的是vue的runtime-only版本，该版本不支持template编译；大家需要了解的是，vue在完成编译后会有两个版本，一个是runtime-only，一个是runtime-compiler；后面这个版本支持template编译，因此我们需要将vue的编译版本切换到runtime-compiler。我们只需要在webpack.config.js中加入该配置：

      

      再次打包，然后运行，通过webpack配置的vue成功的运行起来了。