音乐App前后

Posted 2020-10-22 檀思佟

一.安装环境部分

①.谷歌环境

访问数据自动格式化 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.各个组件均放在