一、起步
1.引入reset.css解決手機之間不同分辨率的問題（reset.css為別人封裝的css文件）
import './assets/styles/reset.css'
使用方式 1rem=50px
我們使用rem代替px
2.引入border.css解決手機邊框1px的問題
import 'styles/border.css'
使用方式 class="top" //在添加上邊框，同理 left、right、bottom
3.解決移動端點擊事件存在300毫秒延遲問題
在項目目錄運行cmd輸入
npm install fastclick --save
在main.js中引入文件
import fastClick from 'fastclick'
實例化：fastClick.attach(document.body)
二、常用插件
1.stylus 簡化css編寫方式
安裝：npm install stylus --save
再安裝：npm install stylus-loader --save
使用方式：<style lang="stylus"></style>
2.axios Ajax工具
安裝： npm install axios --save
使用，法1：在需要使用的組件中<script>標簽里引入
import axios from 'axios'
this.$axios()
使用，法2：
在main.js中引入
import axios from 'axios'
改為Vue的原型屬性
Vue.prototype.$ajax=axios
直接調用this.$ajax()
例子：
this.$ajax.get('/api/index.json')
.then(function(res){
console.log(res)
})
3.vue-awesome-swiper 安裝輪播插件（這里推薦使用2.6.7版）
安裝：npm install vue-awesome-swiper@2.6.7 --save
使用方式：官方文檔
4.better-scroll 滾動窗口插件
安裝：npm install better-scroll --save
使用方式：
<div class="wrapper"> <ul class="content"> <li>...</li> <li>...</li> ... </ul> <!-- 這里可以放一些其它的 DOM，但不會影響滾動 --> </div>
script中
import BScroll from 'better-scroll' let wrapper = document.querySelector('.wrapper')//找到對應的標簽 let scroll = new BScroll(wrapper)//實例化的第一個參數是一個原生的 DOM 對象
詳情：官方文檔
三、數據管理
Vuex 數據框架（進行數據傳輸）
/* 引入數據管理框架 */
import store from './store'
數據管理框架基礎：
內容state（存公共數據）、actions、mutations（用於改變公用數據中的值）
如：
state: { city: '成都' }, actions: { changeCity (ctx, city) { // 調用mutations里對應的方法，city為所傳值 ctx.commit('changeCity', city) } }, mutations: { changeCity (state, city) { state.city = city }
注意：
1.采用dispatch調用index.js中actions對應的方法，city為所傳的值
this.$store.dispatch('changeCity', city)
2.調用mutations里對應的方法，city為所傳值
ctx.commit('changeCity', city)
改變值只能通過mutation方法區完成
3.調用公用數據方法
直接調用：this.$store.state.city
映射調用：
添加import { mapState } from 'vuex'
添加計算屬性，將vuex里的city映射到計算屬性的city中可直接調用this.city
computed: {
...mapState(['city'])
}
四、優化
keep-alive標簽
功能 標簽內的內容會被放入內存中，只需渲染一次，不用每次訪問都進行渲染
<keep-alive>
<router-view/>
</keep-alive>
路由內的東西只需渲染一次，下次會直接從內存中調用數據
如果有每次進入都需要更新的數據可以使用生命鈎子函數activated(){}
activated 在組件加載時調用
對應的 deactivated 在組件關閉時調用
前提需要使用 keep-alive
也可以這樣寫：
<keep-alive exclude="排除的組件名（不放入內存中，每次進入都會更新）">
內容。。。
</keep-alive>
五、開發環境的轉發
編輯config里的index.js
找到proxyTable:{}
改寫：
proxyTable: {
'/api':{
target: 'http://localhost:8080',
pathRewrite: {
'^/api': '/static/hithock'
}
}
}
//在開發環境訪問時，將需要訪問的api目錄下的index.json改寫為本地目錄下static/hithock目錄里
//前提需要用webpack
六、聯機測試
1.要想服務可以通過ip地址訪問需要改工程文件目錄下的package.json中的 dev
添加 --host 0.0.0.0
變為："dev": "webpack-dev-server --host 0.0.0.0 --inline --progress --config build/webpack.dev.conf.js"
七、項目打包
npm run build
打包出一個dist文件夾
將文件夾里的內容放到后端服務器上即可
當然，如果想改變文件的路徑需要修改 config/index.js里面的打包內容如下：
assetsPublicPath: '/Travel', // 后端運行的目錄
這里我們改為Travel目錄
八、疑難問題
1.解決手機兼容性問題
npm install babel-polyfill --save //判斷有無cs6新特性
2.使用better-scroll后click事件失效，解決方法
mounted(){
this.scroll=new Bscroll(this.$refs.wrapper, { mouseWheel: true, click: true, tap: true })
}
//better-scroll，默認它會阻止touch事件。所以在配置中需要加上click: true
OK！這就是我在項目中遇到的一些需要注意事項
最后：大家可以看一下我的成品。
易簡圖 ——一個專注於圖片瀏覽資源器
歡迎騷擾！