记录vue-music项目开发过程

vue-cli安装请看上一篇文章;

脚手架搭建如下:


记录vue-music项目开发过程_第1张图片

cd vue-music-->cnpm install-->cnpm run dev自动打开如下页面:


记录vue-music项目开发过程_第2张图片

如果在编辑器中运行npm run dev 报错,请检查你的node.js版本以及端口是否被占用

由于使用stylus预处理样式,webpack 没有自动补齐package.json关于stylus配置信息,需要手动填写。

关于stylus请转移:www.jianshu.com/p/791042bf3ad2

记录vue-music项目开发过程_第3张图片

packge.json

记录vue-music项目开发过程_第4张图片

build-->webpack.base.config.js

记录vue-music项目开发过程_第5张图片

main.js

记录vue-music项目开发过程_第6张图片

组件注册使用

记录vue-music项目开发过程_第7张图片

路由配置

记录vue-music项目开发过程_第8张图片

在main.js中引入router实例


记录vue-music项目开发过程_第9张图片

使用router(App.vue中指定router-view路由容器)


记录vue-music项目开发过程_第10张图片

后端代理axios

先在package.json 中输入依赖然后在dev-server中配置代理信息,如下:


记录vue-music项目开发过程_第11张图片


记录vue-music项目开发过程_第12张图片

vue-lazyload的使用:


记录vue-music项目开发过程_第13张图片


记录vue-music项目开发过程_第14张图片

fastclick和better-scroll的click事件冲突:

给需要点击的图片加上class="needsclick" 这样fastclick就不会拦截better-scroll点击事件

记录vue-music项目开发过程_第15张图片

你可能感兴趣的:(记录vue-music项目开发过程)