從零開始搭建vue移動端項目

Vue項目搭建

初始化

1.安裝node.js
2.使用npm全局安裝webpack npm install webpack -g
3.全局安裝vue-cli npm install --global vue-cli
4.安裝腳手架 npm install --g vue-cli
5.在目標文件夾目錄建立項目 vue init webpack myproject(項目目錄名稱)
6.注意:
    (1)Install vue-router? Yes
    (2)Use ESLint to lint your code? Yes
    (3)Set Up Unit tests No
    (4)Setup e2e tests with Nightwatch? No
    (5)Yes,use NPM
7.搭建目錄結構
    build                               webpack項目配置文件
    config                              項目配置目錄，運行環境，端口之類的
    dist                                npm run build輸出目錄
    node_modules                        項目依賴包                     
    src                                 項目主要文件存放目錄
        api                             請求模塊
            common-api.js               定義公共請求
            home-api.js                 定義模塊請求
        apiconfig                       請求封裝
            index.js                    
        assets                          項目靜態文件存放目錄(會通過webpack處理,圖片之類的靜態資源)
        components                      公共組件
            tabbar.vue                  tabbar底部導航
        pages                           主邏輯組件頁面
            home.vue                    主頁
        router                          路由配置
            index.js                    
        store                           vuex狀態管理
            modules                     各個模塊的狀態
                home.js                 
            index.js                    統一輸出各個模塊狀態
            mutation-type.js            定義改變狀態的方法
        styles                          統同樣式
            base.less                   全局css的字體型號
            index.less                  樣式統一入口
            mixin.less                  基準字體大小及算法
            reset.less                  重置默認樣式
            variable.less               定義主題顏色等基本樣式
    App.vue                             統一入口組件
    main.js                             入口js文件
    static                              靜態文件存放目錄(不會受到webpack的影響,第三方的靜態資源庫)

路由（vue-router）

1.搭建時已安裝router
2.配置router router/index.js

import Vue from 'vue'
   import Router from 'vue-router'
   Vue.use(Router)
   // "@"至關於".."
   export default new Router({
     routes: [{
       path: '/',
       name: 'Home',//首頁
       component: (resolve) => require(['@/pages/Home'], resolve)
     }{
       path: '/User',
       name: 'User',//個人
       component: (resolve) => require(['@/pages/User'], resolve)
     }]
   })

3.使用路由跳轉
this.$router.push('/Home')
this.$router.go('/Home')
this.$router.replace('/Home')

Vuex（狀態管理）

1.安裝vuex npm install vuex --save
2.引入vuex main.js

import Vue from 'vue'
    import App from './App'
    import router from './router'
    import Vuex from 'vuex'
    import store from './store'
    Vue.config.productionTip = false
    Vue.use(Vuex)
    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      router,
      store,
      components: { App },
      template: '<App/>'
    })

3.配置使用vuex （暫時省略，後補）

Axios（數據請求模塊）

1.安裝axios和js-cookie npm install axios js-cookie --save
2.配置axios
    (1)配置請求封裝部分 apiconfig/index.js

/* eslint-disable */
    import axios from 'axios'
    /**
     * 定義請求常量
     */
    export const baseUrl = "http://192.168.1.220:8001/api/update.ashx";
    
    // 請求超時時間
    axios.defaults.timeout = 2000;
    
    // 請求攔截
    axios.interceptors.request.use(
        config => {
            // 在發送請求以前作些什麼
            return config
        },
        error => {
            // 對請求錯誤作些什麼
            return Promise.reject(error)
        }
    )
    
    // 響應攔截
    axios.interceptors.response.use(
        response  => {
            // 對響應數據作點什麼
            let {data} = response;
            if(response.config.url == baseUrl){
                return Promise.resolve(data.result);
            }else if(!data.Result){
                // 服務器錯誤處理
                return Promise.reject(data.Message);
            }else{
                return Promise.resolve(data.Data);
            }
        },
        error => {
            // 對響應錯誤作點什麼
            return Promise.reject(error)
        }
    )
    
    // 封裝post請求
    export function fetch(requestUrl, params = '') {
        return axios({
            url: requestUrl,
            method: 'post',
            data: {
                'body': params
            }
        })
    }

(2)定義模塊請求 api/home-api.js

/**
     * 引入fetch
     * @param params
     * @returns {*}
     */
    import {fetch} from 'config/index'
    // 獲取UserID
    export function GetUserAndKey(params) {
        return fetch('http://192.168.1.220:8002/api/GetUserAndKey.ashx', params)
    }

(3)在頁面使用

import * as homeApi from 'api/home-api'  // 引入api
    export default {
        name: '',
        data() {
            return {
                
            };
        },
        watch: {
            
        },
        methods: {
            getUserAndKey(){
                let params = {
                    "UserID":"",
                    "KeyID": ""
                }
                homeApi.GetUserAndKey(params).then((res) => {
                    console.log(res);
                }).catch(() => {
    
                })
            },
        },
        computed: {
    
        }
    };

(4)在文件裏引入fetch方法，能夠簡寫成'config/index'，須要作如下配置
    找到build/webpack.base.conf.js文件下resolve.alias添加代碼
    resolve: {
        extensions: ['.js', '.vue', '.json'],
        alias: {
            'vue$': 'vue/dist/vue.esm.js',
            '@': resolve('src'),
            'config': resolve('src/apiconfig'),//添加的代碼
            'api': resolve('src/api'),//添加的代碼
        }
    },
4.跨域問題
在vue-cli裏面已經配置瞭解決跨域問題的模塊，
咱們能夠在config/index.js裏面配置一下要代理的地址，
將以root開頭的api轉發出去，將地址指向接口地址
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
    '/root/':{target: 'http://xxx'} //添加的代碼
},

使用Less

1.安裝less和less-loader npm install less less-loader --save-dev
2.配置less 
在build/webpack.base.conf.js 的module.exports.module.rules 裏面添加
{
    test: /\.less$/,
    loader: 'style-loader!css-loader!less-loader',
}
3.使用less 
<style scoped lang="less"></style>

移動端適配

1.安裝lib-flexible npm i lib-flexible --save
2.引入lib-flexible 
在main.js添加 import 'lib-flexible/flexible'
3.安裝px2rem-loader npm install px2rem-loader
4.配置px2rem-loader 
在build文件中找到util.js，將px2rem-loader添加到cssLoaders中，在generateLoaders方法中添加px2remLoader

// 添加的代碼
    const px2remLoader = {
        loader: 'px2rem-loader',
        options: {
          remUnit: 75 // 這裏設置html根字體，vant-UI的官方根字體大小是37.5
        }
    }
    // generate loader string to be used with extract text plugin
    function generateLoaders (loader, loaderOptions) {
        const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader, px2remLoader]// 添加的代碼
        if (loader) {
            loaders.push({
                loader: loader + '-loader',
                options: Object.assign({}, loaderOptions, {
                    sourceMap: options.sourceMap
                })
            })
        }
        // Extract CSS when that option is specified
        // (which is the case during production build)
        if (options.extract) {
            return ExtractTextPlugin.extract({
                use: loaders,
                fallback: 'vue-style-loader'
            })
        } else {
            return ['vue-style-loader'].concat(loaders)
        }
    }

5.注意事項
不用在index.html的頭部加name爲viewport的meta標籤，flexible會自動爲咱們添加；
對css中文字樣式增長/* px */後綴，會編譯出適應不一樣dpr的字號；
font-size: 28px; /* px */
對邊框樣式增長/* no */後綴，會保持原樣；
border: 1px solid #fff; /* no */

移動端頁面切換動畫

移動端通常，第一級菜單切換不須要轉場動畫，第一級菜單向第二級菜單轉場時須要過渡動畫
使用vue的transition
1.在 App.vue設置動畫

<template>
       <div id="app">
          <transition :name="transitionName">
              <router-view class="Router"></router-view>
          </transition>
      </div>
    </template>
    <script>
        import Vue from 'vue'
        window.Vue = Vue;
        export default {
          name: 'App',
              data() {
                return {
                    transitionName: "fade"
                };
            },
            created:function(){
         
            },
            methods: {
               
            },
            watch: {
                $route() {
                    // 監聽路由變化從新賦值
                    if (this.$router.isleft) {
                        this.transitionName = "slideleft";
                    }else if (this.$router.isright) {
                        this.transitionName = "slideright";
                    }else{
                        this.transitionName = "fade";
                    }
                }
            }
        }
    </script>
    <style lang="less">
        @import "./styles/index.less";
        #app {
            -webkit-tap-highlight-color:rgba(0,0,0,0); 
            font-family: "Avenir", Helvetica, Arial, sans-serif;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            text-align: center;
            color: #2c3e50;
            font-size: 28px;
        }
        .Router {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            width: 100%;
            height: 100%;
            transition: all 0.5s ease;
            -webkit-transition: all 0.5s ease;
            -moz-transition: all 0.5s ease;
        }
        .fade-enter{
            opacity: 0;
        }
        .fade-leave-active {
            opacity: 0;
        }
        .slideleft-enter,
        .slideright-leave-active {
            opacity: 0;
            -webkit-transform: translate(100%, 0);
            transform: translate(100%, 0);
        }
        .slideleft-leave-active,
        .slideright-enter {
            opacity: 0;
            -webkit-transform: translate(-100%, 0);
            transform: translate(-100%, 0);
        }
    </style>

2.在rounter/index.js 配置路由跳轉類

// 須要左方向動畫的路由用this.$router.togo('****')
    Router.prototype.togo = function (path) {
        this.isleft = true
        this.isright = false
        this.push(path)
    }
    // 須要右方向動畫的路由用this.$router.goRight('****')
    Router.prototype.goRight = function (path) {
      this.isleft = false
        this.isright = true
        this.push(path)
    }
    // 須要返回按鈕動畫的路由用this.$router.goBack()，返回上一個路由
    Router.prototype.goBack = function () {
      this.isleft = false
        this.isright = true
        this.go(-1)
    }
    // 須要replace使用this.$router.goReplace()
    Router.prototype.goReplace= function () {
      this.isleft = true
        this.isright = false
      router.replace(path)
    }
    // 點擊瀏覽器返回按鈕執行，此時不須要路由回退
    Router.prototype.togoback = function () {
      this.isleft = false
        this.isright = true
    }

三、使用方法
this.$router.togo('****') // 進入頁面,動畫往左
this.$router.goRight('****') // 進入頁面,動畫往右
this.$router.goReplace('****') // 進入頁面不保存當前頁面,動畫往左
this.$router.goBack('****') // 返回,動畫往右
四、監聽點擊瀏覽器返回按鈕 main.js 添加
window.addEventListener('popstate', function (e) {
  router.togoback()
}, false)

Ui框架

1.選擇Vant
2.安裝Vant npm i vant -S
3.導入組件 main.js添加
import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant)
4.使用時還須要引入
import { Dialog } from 'vant';

打包

若是將項目打包用於移動端瀏覽器，則直接打包上傳至服務器，使用nginx作下接口轉發便可
若是想將打包的靜態文件進一步打包成移動端應用，則須要修改如下config/index.js裏build.assetsPublicPath
在config/prod.env.js新增baseUrl

其餘

1.ios上點擊元素會閃出來一個半透明的灰色框，這裏須要在#app的css加一句css兼容
-webkit-tap-highlight-color:rgba(0,0,0,0); 
2.解決點擊事件300ms延遲，採用fastclick.js
安裝npm install fastclick --save
在main.js 添加
import FastClick from 'fastclick'
FastClick.attach(document.body)
3.開發時配置瀏覽路徑 config/index.js 修改host
如：host: '192.168.1.72', 
4.eslint報錯 找到build目錄下的webpack.base.conf.js文件，註釋掉其中的與有關的eslint規則便可
// ...(config.dev.useEslint ? [createLintingRule()] : []),

安裝彙總

npm install vuex axios js-cookie vant fastclick lib-flexible px2rem-loader --save
npm install less less-loader --save-dev