webpack配置vue之main.js文件代码的抽取

配置vue是代码要怎么抽取？？？
main.js文件 vue实例的
template：’ ’ , 两个单引号 之间的 内容 会替换
index.html 文件中 的 <div"id=“app”>

有点傻帽，，，下面的
data（）{
return{
}
}，
都定义错了！！！！

这样我们已经初步的分离了，但是还不够
下面我们新建几个vue文件夹，里面建一个app.js文件，
把我们刚才的声明 const Bpp 对象里的内容放进去，

然后我们在main.js文件中 引用这个 app.js文件就可以了

这样就极大的简化了我们的main.js文件

但是这样 我们的 模板 和他的 js代码 没有进行分离
进一步 抽取 把这个 app.js文件 用一个 app.vue文件 代替


然后我们执行打包
npm run build

安装vue-loader和vue-template-compiler

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

vue-loader 是用来加载vue文件的，
vue-template-compiler 是用来开发时 解析文件的
修改webpack.config.js的配置文件：

{
test:/.vue$/,
use:[‘vue-loader’]
}

这个 /.vue$/ 是正则 表达式
. \反斜杠 是 转义 匹配点 $表示 以vue结尾

打包还是 可能出现错误 ，
是因为 vue-loader 从13或者是14版本 开始，想要使用还需要要安装插件 plugins，
如果不想安装插件，就安装vue-loader低一点的版本

下面我们就可以在写别的组件 ，，，
在在App.vue 这个文件中引用
如：：：

这样我们 就能够向我们 初学vue时，，一样的写代码了
对于main.js文件代码的抽取工作 就做完了