webpack配合vue的基本搭建

序言

上次我们说了webpack的搭建，其实就是为了我们开发各种框架和使用各种语言做的一个准备，所以这次我就记一下webpack配合vue的开发。

一、先来看下搭建大型网站的配置步骤，vue官网上有详细说明，这边把它简化下来

1、安装vue
npm install vue --save-dev

2、全局安装vue-cli
npm install --global vue-cli

3、初始化项目
vue init webpack my-project

4、进入my-project文件并安装依赖

cd ./my-project

在安装之前我们需要把phantomjs独立先安装，不然就会各种报错
npm install phantomjs --phantomjs_cdnurl=http://cnpmjs.org/downloads

npm install

需要说明的是如果构建小型的应用并不推荐用cli，个人觉得它的目录结构太复杂，并不利于小型应用开发。

二、接下来，我们在自己创建的好的webpack文件里进行配置

先安装vue

npm install vue--save-dev

接着安装vue-loader和vue-template-compiler(用于解析.vue文件的模板)

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

接下来需要在loader里添加vue后缀文件的处理器

    {
      test: /\.vue$/,
      use:[
          {loader: "vue-loader"}
      ]
    }

XXX.vue：一般模块化开发用于存放模块。

然后我们就可以愉快的在index.js中引进vue来使用了

import * as Vue from 'vue';
或者 var Vue = require('vue');