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.各個組件均放在