对于vue2的语法不是很明白的同学請先到熟悉语法,包括es2015webpack等,这个就不在一一说明
??首先Vue.js提供的来初始化我们的项目:
??刚开始初始化項目的时候构建工具会询问一些有关项目的一些信息,可根据自己的需要进行选择如果你不是太明白,一路回车就可以了对于没有翻牆的同学npm加载可能比较慢,这时可以使用淘宝的镜像cnpm具体怎么用。在npm run
dev之后我们就可以在浏览器中查看当前项目的内容了对于端口冲突嘚同学,请在/config/index.js文件中第26行自行修改看到下面的内容说明你的项目已经初始化成功了。
??手写修改app.vue文件如下:
??其中每个文件的代碼就不再一一说明整个项目src中的目录如下:
??为了使项目UI好看点,加入了样式但是对于习惯用sass,less的同学来说,突然间用css来写样式总是感觉不太方便这里我们就用csss的语法来编写css,对于官方提供的webpack工具已经配置好了,我们只需要安装两个依赖的npm包就可以使用scss了如下:
注意:用windows系统的用npm安装可能会报错,建议用cnpm
??当然也可按需引入来减少项目的大小。具体怎么用请参考官网:
??vue-resource的使用比较简单对於具体怎么使用请参考官方手册。vuex这里把store的action,getters,mutation封装成了一个独立的文件对于他们的调用和映射等,我总结了一下可以做个参考,如下:
??echart主流的web图表控件,是在canvas类库zrender的基础上做的主题图库优点有数据驱动,图例丰富功能强大,有更详细的介绍囿同学的可以去参考下。
?? vue websocket的使用协议是基于TCP的一种新的协议vue websocket的使用最初在HTML5规范中被引用为TCP连接,作为基于TCP的套接字API的占位符它实現了浏览器与服务器全双工(full-duplex)通信。这个需要用nodejs做后台才能正常测试demo后台代码在根目录下的static文件夹中。可以测试一下