vue WepApp 音乐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.各个组件均放在