使用Vue全家桶開發移動端頁面。
本博文默認已安裝node.js。
github連接javascript
npm install vue
npm install -g @vue/cli
vue init webpack my-app
cd my-app npm run dev
按照提示,在瀏覽器打開http://localhost:8082/,效果以下:
css
npm install vuex --save-dev
至此,準備工做已就緒,接下來將進行項目總體的結構設計。html
assets
目錄下建立images
、js
、css
文件夾。
images
文件夾下建立index
文件夾,用於存放 首頁圖片(模塊化,讓項目結構一目瞭然)。src
目錄下建立pages
目錄,用戶存放不一樣的功能頁面。
pages
目錄下建立index
首頁目錄。index
目錄下建立index.vue
主文件。router
index.js
import Vue from 'vue' import Router from 'vue-router' import Index from '@/pages/index' Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'Index', component: Index } ] })
刪除components
目錄下的文件,將此目錄做爲頁面組件文件夾,在此目錄下建立index
文件夾,存放index
首頁的組件。
前端
pages/index/index.vue
中引入header組件<template> <div class="index-wrap"> <comHeader /> 你好,首頁 </div> </template> <script> import header from '@/components/index/header' export default { data() { return { } }, components: { comHeader: header } } </script> <style scoped> </style>
至此,項目的整個結構被從新設計完成,接下來讓咱們引入rem.js
和less
來讓咱們開發起來更舒服。vue
rem
assets/js
文件夾下建立common
文件夾存放公共js,再在common文件夾下建立rem適配文件js。並在main.js
中引入。// rem.js ;(function (designWidth, maxWidth) { var doc = document, win = window; var docEl = doc.documentElement; var tid; var rootItem, rootStyle; function refreshRem() { var width = docEl.getBoundingClientRect().width; if (!maxWidth) { maxWidth = 540; } ; if (width > maxWidth) { width = maxWidth; } //與淘寶作法不一樣,直接採用簡單的rem換算方法1rem=100px var rem = width * 100 / designWidth; //兼容UC開始 rootStyle = "html{font-size:" + rem + 'px !important}'; rootItem = document.getElementById('rootsize') || document.createElement("style"); if (!document.getElementById('rootsize')) { document.getElementsByTagName("head")[0].appendChild(rootItem); rootItem.id = 'rootsize'; } if (rootItem.styleSheet) { rootItem.styleSheet.disabled || (rootItem.styleSheet.cssText = rootStyle) } else { try { rootItem.innerHTML = rootStyle } catch (f) { rootItem.innerText = rootStyle } } //兼容UC結束 docEl.style.fontSize = rem + "px"; }; refreshRem(); win.addEventListener("resize", function () { clearTimeout(tid); //防止執行兩次 tid = setTimeout(refreshRem, 300); }, false); win.addEventListener("pageshow", function (e) { if (e.persisted) { // 瀏覽器後退的時候從新計算 clearTimeout(tid); tid = setTimeout(refreshRem, 300); } }, false); if (doc.readyState === "complete") { doc.body.style.fontSize = "16px"; } else { doc.addEventListener("DOMContentLoaded", function (e) { doc.body.style.fontSize = "16px"; }, false); } })(360, 750); // 360爲設計圖的尺寸,請按照實際設計圖修改 // main.js import Vue from 'vue' import App from './App' import router from './router' import '@/assets/js/common/rem.js' // 引入rem.js Vue.config.productionTip = false new Vue({ el: '#app', router, components: { App }, template: '<App/>' })
至此,rem適配已完成,在寫style時即可直接按照 (設計圖尺寸 / 100) rem,例如設計圖給到元素height爲200px,那麼用rem則爲height: 2rem
;java
// 安裝less和依賴 npm install less less-loader style-loader --save-dev
以header.vue爲例node
<template> <div class="header-wrap"> 我是頭頭頭 <div class="title"> title </div> </div> </template> <script> </script> <style scoped lang="less"> .header-wrap{ height: 1rem; background-color: #252627; .title{ color: #fff; height: .5rem; } } </style>
至此就能夠開始頁面的開發了。webpack
store
vuex
npm install vuex --save
/** * 組裝模塊並導出 store */ import Vue from 'vue' import Vuex from 'vuex' import game from './modules/game' import * as actions from './actions' import mutations from './mutations' import getters from './getters' Vue.use(Vuex) const debug = process.env.NODE_ENV !== 'production' const state = { userInfo:{} } export default new Vuex.Store({ state: state, actions: actions, mutations: mutations, getters:getters, modules: { game, }, strict: debug })
this.$store.dispatch('getData', response.data.data)
axios
src
目錄下穿件utils
目錄用於存放工具js。在utils
下建立request.js
對axios
請求進行封裝。import axios from 'axios' import { Message, MessageBox } from 'element-ui' import config from '../../config/config' import toast from './toast' import store from '@/store' const service = axios.create({ baseURL: 'www.baidu.com', timeout:0// request timeout }) service.interceptors.request.use( requestConfig => { let data = { // 公共請求參數 }; requestConfig.data = Object.assign({}, requestConfig.data, data) return requestConfig }, error => { Promise.reject(error) } ) // response interceptor service.interceptors.response.use(response => { const res = response.data if (res.errno === 501) { MessageBox.alert('系統未登陸,請從新登陸', '錯誤', { confirmButtonText: '肯定', type: 'error' }).then(() => { }) return Promise.reject('error') } else if (res.errno === 502) { toast.showToast('系統內部錯誤,請聯繫管理員維護',1200,'error') return Promise.reject('error') } else if (res.errno === 503) { toast.showToast('請求業務目前未支持',1200,'error') return Promise.reject('error') } else if (res.errno === 504) { toast.showToast('更新數據已經失效,請刷新頁面從新操做',1200,'error') return Promise.reject('error') } else if (res.errno === 505) { toast.showToast('更新失敗,請再嘗試一次',1200,'error') return Promise.reject('error') } else if (res.errno === 506) { toast.showToast('沒有操做權限,請聯繫管理員受權',1200,'error') return Promise.reject('error') } else { return response } }, error => { toast.showToast('登陸鏈接超時',5 * 1000,'error') return Promise.reject(error) }) export default service
src
目錄下常見 api
文件夾,並建立組件index.jsimport request from '../utils/request' /** * @method getUserInfo 獲取用戶信息 * @param query {Object} */ export function getUserInfo(query){ return request({ url: 'user/info', method: 'post', data: query }) }
index.vue
中調用<template> <div class="index-wrap"> <comHeader /> 你好,首頁 </div> </template> <script> import header from '@/components/index/header' import { getUserInfo } from '@/api/index.js' // 引入 export default { data() { return { } }, components: { comHeader: header }, methods: { getInfo(){ getUserInfo() //業務邏輯 .then(res => { // do something }) .catch(response => {}) } }, created() { this.getInfo(); //調用 } } </script> <style scoped lang="less"> </style>
dist
npm run build //在根目錄下生成dis文件夾,能夠將此文件夾放到oss上以供不一樣瀏覽器瀏覽。