音乐App前后

2022-05-01 IT知识音乐

丈夫志四海，万里犹比邻。这篇文章主要讲述音乐App前后相关的知识，希望能为你提供帮助。
一.安装环境部分
①.谷歌环境
访问数据自动格式化 Google jsonview插件
②安装 vue环境
node必须是6.95以上
npm必须是3.10以上

node -v 和npm -v 检查版本
安装webpack
cnpm install webpack -g
安装vue脚手架
cnpm install vue-cli -g
/检测版本 vue -V;
1. 安装前 vue init webpack \'项目名称\' 以及ESlint 代码风格检查 ESlint风格检查需要进行设置
2.cmd 命令 md 创建文件夹 rd删除文件夹
(见安装教程)

二.安装依赖工具
1.stylus cnpm install stylus stylus-loader --save-dev
2.babel-polyfill 低版本浏览器不支持Es6的新语法，所以要安装此插件来转义
引入方式 main.js中:
import \'babel-polyfill\';
3.fastclick click事件移动端延迟300ms
cnpm install fastclick -S
引入方式 main.js中:
import Fastclick from \'fastclick\';
Fastclick.attach(document.body);
4.跨域请求jsop
cnpm i -S vue-jsonp
5.better-scroll(https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/options.html)
cnpm install better-scroll --save
6.axios请求
第一步:cnpm install axios
第二步:cnpm install --save axios vue-axios
7.图片懒加载
cnpm install vue-lazyload -S
8.vuex
cnpm install vuex --save
9.css3 动画 js
npm install create-keyframe-animation --save

三.开始设置部分
1.关于src里面的目录
　

文章图片

创建 common，common 内容里面的内容都是一些静态资源

文章图片

1.获取字体图片资源访问地址:https://icomoon.io/
步骤：

文章图片
------>

文章图片
(添加你的svg，可以转化成字体图标）------->

文章图片

----->
选中导出

文章图片

2.关于stylus 文件引入
1. 下面几种定义css变量以及 css 方法需要在用到的时候就用 @import(css提供的方法) \'\' 引入不支持全局，因为找不到

文章图片

文章图片

2.css 多重引入

文章图片

文章图片
引入 index.styl（后缀名必须正确）就相当于前面三个全部引入了 (注意前面三个stylus 都支持全局)

3. ESlint 相关设置 (没设置可以不看)

文章图片

　4.关于别名(此引入路径在js里面生效，需要注意的是如果没有配置别名引入需要用 ./ 的相对路径)

文章图片

文章图片

设置完以后你在js里面引入css引入可以这样
　

文章图片
注意因为是修改配置文件所以需要重启服务
　那么在stylus中也可以用js里面写法但是是这样的，这是stylus的写法~common意思是相对于common 因为js设置了别名所以css stylus用这种方式也能很好的做到统一引入

文章图片

5.各个组件均放在

文章图片

【音乐App前后】

推荐阅读

上一篇：Appium新手入门—— Appium Server安装

下一篇：webapp开发下input获取焦点时被弹出键盘挡住解决方法