vue 优化组件开发

一、简介:

      1. 本文主要介绍的是vue使用组件化开发的一种新方式，那就是使用.vue后缀的文件进行组件化开发。 

      2 .现在使用新建的.vue后缀的文件，这种类型的文件就是专门用于组件的，它的模板代码，js代码，css代码是分开的，而每个.vue文件又是一个完整的组件，而且在组件中又可以导入其他组件。

       

       

       

 

二、对后缀名为.vue的文件进行打包

       1. 安装对应的loader:  npm  install   vue-loader   vue-template-compiler  --save-dev; vue-loader是针对后缀名为.vue文件的打包工具，vue-template-compiler是对vue的编译工具；

       2. 修改webpack.config.js中的moudle中的rules:

       

       3. 安装成功后进行打包，此时会报出一个错误:

       错误提示就是在打包.vue后缀的文件的时候出错了，原因是vue-loader的版本太高了，这边将它的版本改为14.0.0以下，然后重新npm  install。

       4. 修改完版本之后重新打包，一切ok。