vue（9）—— 组件化开发 - webpack（3）

前面两个终于把webpack相关配置解析完了。现在终于进入vue的开发了

  

vue组件化开发预热 

 

前期准备 

 

创建如下项目：

 

 

 app.js:

 footer.js:

main.js:

 

 

 

webpack.config.js:

 

同样的生成两个webpack配置文件，webpack.dev.config.js，webpack.prod.config.js，配置跟webpack.config.js一模一样

 

package.json:

 

 

组件化开发终于到了重头戏了

 

webpack引入vue

 

有几种方法导入

 

1.第一种

这个前面文章 vue（8）—— 组件化开发 - webpack（2）   已经用过了，不多说，直接在html文件里导入

 

 

2.第二种

 

在入口函数里引入：

 

然后在webpack配置文件里添加一个resolve属性：

 

注意，使用import导入的方法导入vue，导入的vue并不是完整的vue对象，只提供runtime-only的方式。

 

 

安装loader 

 

其实vue真的做组件化开发的时候，文件后缀名是.vue，并不是.js，所以webpack要识别后缀为vue的组件的话，需要安装loader

 

这里要注意，需要安装vue-loader和vue-template-compiler，前者是识别vue后缀的文件的，后者是识别vue后缀文件里的组件代码的，并且两者版本是配套，必须匹配，

我这安装的是vue-loader14.1.1 和vue-template-compiler@2.5.17版本，当然你也可以安装更高版本的两个匹配的

 

webpack配置文件里配置 

 

配置上webpack-dev-server，html-webpack-plugin的配置，这里就略过了，还不太会的回过头去看

 

 

 

package.json配置：

 

 在项目根目录创建一个src文件，将刚才的app.js，footer.js，main.js移到src文件夹内，并把app.js和footer.js文件重命名后缀为.vue：

 

 

 

代码规范整合

 

vue文件

 

上面的app.js文件修改成app.vue之后，开发规范已经变了，只有如下三个标签作为逻辑代码，之前我们写的代码已经不认识

 

<!--结构-->
<template>    

</template>

<!--逻辑-->
<script>
export default {
    
}
</script>

<!--样式-->
<style>

</style>

 

 

 改成正确的代码：

 

 

export default 抛出一个vue组件，组件的结构为template，数据为data抛出，因为vue组件的data必须是一个函数，所以这里是函数。

style样式则和之前用的没什么区别

 

footer.vue文件：

 

入口文件 

 

入口函数不用改为js文件

 

 main.js:

 

 

 

其他配置

 

其他webpack.dev.config.js和package.json不用变

 

 

编译运行 

npm  run dev: 

发现报错了，这里就解释前面文章 vue（7）—— 组件化开发 — webpack（1）   的问题为什么已经在全局安装webpack，在开发环境下还要再装一次了

 

npm i webpack -D 之后，再次编译运行，注意安装指定版本的webpack vue（7）—— 组件化开发 — webpack（1）

 

 运行是运行了，但是页面打开报错了，大概意思是说vue-loader和vue-template-compiler这两个插件有问题

 

按照我多年解决bug的问题，我把当前的vue版本卸载了，然后装了个低版本的，装了个与vue-template-compiler的版本一样的2.5.17版本的，完美解决上面这个问题

 

重新编译：

 

 发现还是报错，意思是这个App组件没有正确注册，检查代码，发现根本没有问题，把App删除之后，只留一个Footer看看：

 

 

 可以渲染，但是没有任何数据，按理说是有的

 

这下怎么办呢？进入关键地步，仔细看

 

初学者容易入的坑

 

错误分析

 

其实按道理完全没有问题，因为在之前非webpack下的vue开发中，在一个html文件就是这么用的没有错，那为什么这里的footer可以，app不行呢？大众思维，先把App删除掉，看Footer呢？

 

这到底怎么回事呢？标签可以出，但是没有数据渲染，卡在这了。

 

这里如果你去发现研究的话花些时间也会发现问题的，但是为了不浪费你的时间，你不用自己去研究了。

 

其实上面的Footer和App组件都错的，都不可以渲染成功的，其实footer的显示，其实是被浏览器当html5的标签处理了

 

 

 

如果你运气好，定义的两个组件的名字刚好和html5的标签撞上，那绝对不会报错，但是一样不会把数据渲染出来

 

总之，按以上以前简单的html页面的vue配置，根本就是错的，组件化开发根本不认这种写法。

为什么，就因为多定义了一个局部，然后再从这个局部组件挂载到vue实例，所以关键就在于我标注出的位置

 

 

也就是说，在webpack里，或者说在vue-loader和vue-template-compiler插件里，不认这种写法 

 

 既然都已经是组件化开发了，那么你要定义局部组件，完全可以再新建一个vue文件，然后写上组件代码，最后在入口文件main.js里挂载就行了。

 

不信的话，看我现在不通过Main组件挂载，直接在vue实例对象里挂载App和Footer看看：

 

 

其他配置不变

 

打开页面，是不是显示了，而且没报错

 

正确引入vue组件

 

 好，再把刚才按个Main组件新建一个vue文件放进去

 

 

注意在vue文件里导入另一个vue文件的用法

 

main.js：

 

其他不变，打开网页，正确返回

 

 

好了组件化开发规范终于解析完了，下面才开始真正的开发测试

 

Vue组件化开发

 

掌握以上的规范之后，你就可以利用前面学到的vue开发，只要符合规范，随心所欲的在里面写你的代码了。如下，给一个简单的例子：

 

package.json:

 

 webpack.dev.config.js

 

 

 

入口文件  main.js:

 

main.vue

 

 

app.vue

 

 

 footer.vue

 

index.html

 

 

 

编译运行

 

打开网页：

 

 

页面数据是有了，但是这个有个问题，css样式乱了，我明明每个vue组件都设置了css的，但是都乱了

 

问题解决

 

这个就不多说了，在每个vue组件的sytle标签里都加上  scoped参数就行了

 

这个scoped就不多说了，它是由css属性选择器实现的，没必要去深究了，反正你就记住设置scoped之后当前的css样式只对当前的元素生效，对其他文件上的html元素不生效就行了

 

相关代码：

{
  "name": "day3",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack-dev-server --open --hot --inline --config ./webpack.dev.config.js",
    "build": "webpack --config ./webpack.prod.config.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {},
  "devDependencies": {
    "css-loader": "^2.1.1",
    "html-webpack-plugin": "^3.2.0",
    "style-loader": "^0.23.1",
    "vue": "^2.5.17",
    "vue-loader": "^14.1.1",
    "vue-template-compiler": "^2.5.17",
    "webpack": "^3.12.0",
    "webpack-dev-server": "^2.9.0"
  }
}

package.json