webpack 详解五：配置Vuejs

后续我们的实际项目中，也会用到 vue，所以并不是开发时候的依赖

 

安装命令     npm install vue --save         中间是杠杠奥

之后 还需要配置 webpack.config.js   文件

因为，Vue有runtime-only和runtime-compiler  的区别，我们需要的是 runtime-compiler 状态，所以配置如下

 

 

那么接下来，就要整合之前学习的vue组件的知识了

首先 是main.js  配置

 

 

 

 

 

详解:  创建vue时，template和el的关系

如果我们希望将data中的数据显示在界面中，就必须是修改index.html

如果我们后面自定义了组件，也必须修改index.html来使用组件

但是html模板在之后的开发中，我并不希望手动的来频繁修改，是否可以做到呢？

 

如上图，Vue实例中定义了 el属性

用于和index.html中的#app进行绑定

 

 

所以 只需要在，Vue实例中 加一个template 属性

后期，调整页面的话，只需要，修改template里面的内容即可

 

下面具体讲一下，template和el的关系

el用于指定Vue要管理的DOM，可以帮助解析其中的指令、事件监听等等

如果vue实例中指定了template模板，那么template模板的内容会替换掉挂载的对应el的模板

接着往下看，马上把template模板中的内容进行抽离

 

在main.js 文件中导入 app.js

import App from './vue/app'

将Vue实例中的template模板的内容 抽离成一个app.js 文件     如下图

 

 

 

 

 

 

终于到了，.vue文件了  

 

 

 

 

 

 

 

此时 还需要安装 两个文件，vue-loader 和 vue-template-compiler

 

安装命令       npm install vue-loader vue-template-compiler --save-dev

配置webpack.config.js  文件 

 

 

 

 

你如果 改过，package.json文件 之后   需要执行  npm install

每次 打包之后，需要执行   npm run build

 

 

 

 

 

 

最后 在分析一下  Vue文件

首先是template模板

然后跟着的是 script标签，里面是import 导入的其他Vue文件，如下图

 

 

最后是 style 标签 

 

 

 

到此   webpack配置 Vue 结束