webpack +vue

1. webpack 简介 

webpack是一款模块加载器及处理工具,它能把各种资源,例如JS(含JSX)、coffee、样式(含less/sass)、图片等都作为模块来使用和处理。也就是说,webpack可以把ES6语法的js文件,sass样式等无法直接在浏览器中使用的语言编译成浏览器支持的形式,也可以把需要的文件进行合并、压缩混淆。

webpack的使用

1.使用 sudo cnpm/npm install webpack -g 将webpack全局安装到本地环境中,这样就能使用webpack命令了

2.在项目文件下创建下列文件: index.html,main.js,App.vue, webpack.config.js。 其中index.html是最终展示的html文件,main.js是入口文件,App.vue是一个vue文件,为main.js提供需要的组件,webpack.config.js是webpack的配置文件,用于配置编译各类文件所需要的加载器,例如.js 文件要用到的babel-loader,.css文件要用到的css-loader和style-loader。此外,还要利用npm init  --yes 生成package.json工程文件。

3.而在package.json里面可以配置常用命令:

4.利用cnpm install  XXXX  --save-dev下载相应的加载器,配置文件package.json也会自动更新。

5.在webpack.config.js中配置相应的加载器。简单解释如下配置。文件的入口是./main.js,出口是bundle.js文件。以.vue结尾的文件用vue-loader加载编译,除/node_modules/目录以外的其他所有以.js结尾的文件都用babel-loader加载编译。babel是下一代js语法编译器,可以将ES6转成ES5代码。

6.main.js文件这时候就可以引入vue实例以及App组件,这个App.vue组件是被vue-loader加载加载过后的模块,可以直接引入。在创建vue的实例的时候,el与index.html中的根元素想对应,并且vue2.0用箭头函数包含组件。


7.App.vue就是对应的组件,在早期进行组件化编写时,我们往往会把一个组件的html,css,js放在三个不同的文件中,然后利用编译工具再合到一起。这样产生的不便就时文件过多。vue-loader的出现,使得我们能将一个组件的html,css,js放在一个文件中,用不同的标签包裹住即可。vue-loader会将这三块代码分别编译成可执行的代码。还有一点要注意的是,在template里面编写html代码,一定要事先用一个跟元素div包含起来。

8.最后运行npm run dev指令,然后打开http://localhost:8080,就可以看到如下页面:

2.配合vue-router使用

1.继续用cnpm install  vue-router --save下载。

2.在 App.vue中增加两个超链接

3.创建Home.vue、News.vue文件。

4.创建一个router.config.js文件配置router的路径,在这个文件中要引入之前创建的两个vue文件Home.vue、News.vue。在配置路径的时候要用到。

5.在入口文件main.js引入vue-router,router.config.js。并且创建路由实例router放入Vue中。

5.最后运行npm run dev即可得到相应页面。

3.注意事项

1.组件导出: 

比如在New.vue文件中,引入了一个Child作为其子组件,并直接在template中作为标签应用。

而这个自组件Child则是在Child.vue中定义,这个组件可以有自己的方法change,自己的数据,以及绑定了其父组件的对象news,因为绑定的是这个对象引用,因此在子组件Child.vue中定义的change方法改变了news.news1之后,父组件的news.news1也会改变。

此外,这种定义组件的方法等价于直接在父组件中定义成:(这个定义方法其实有bug,这里只是为了说明.vue文件导出的含义)

2.组件间通信

1)、父组件给子组件传递消息

父组件如下,首先引入子组件Child.vue,并在componets中对子组件重命名为child。其次,在template中使用child标签,并为其绑定父组件的数据对象

而在子组件中通过props得到父组件的对象的引用,并且可以以此来改变该对象里面的属性。

2)、子组件给父组件传递消息

 子组件通过.$emit方法将数据msg发出去,让父组件响应receive事件。

而父组件则在<child></child>标签上响应receive事件,参数msg就是子组件传递过来的数据msg。

推荐阅读更多精彩内容