vue開發移動端h5環境搭建的全過程

Posted on by

技術選型

公司現在需要開發移動端的h5，使用現在比較流行的vue 2.0開發，使用的腳手架是Vant2，網絡訪問使用的是axios，路由跳轉使用的是vue-router，開發工具是vscode，作為一個安卓開發程序員，對vue是不熟悉的，好在把環境搭建起來瞭，通過博客記錄一下

  • Vant 2
  • vue cli
  • vue
  • vue中使用axios最詳細教程
  • vue router

環境搭建

引入庫

我這裡已經安裝好瞭nodejs，並且已經配置好瞭淘寶鏡像

npm config set registry https://registry.npm.taobao.org

這些配置網上都有，可以自行查詢。

vscode不能直接在工具裡創建項目，要先創建一個空文件夾，然後通過vscode打開文件夾。

在E:\vueProject文件夾下創建VueForBlog文件夾，使用vscode打開（vscode默認隻能打開一個項目，如果想打開多個，可以使用ctrl+shift+n），點擊工具欄終端，新建終端，正式開始創建項目

終端輸入

npm i vant@latest-v2 -S

再輸入

npm install -g @vue/cli

安裝完成

打開package.json看一下依賴

創建一個項目

vue create first-vue

這個好像不能用駝峰，我剛開始用firstVue就報錯。一般會出現選擇項，我這邊選擇瞭vue2

創建完成以後，會是這個樣子

記住，後邊要cd到工程裡，否則還是在工程外創建引用之類的

下邊用同樣的方法，引入axios，router，還有vant需要使用的 postcss-px-to-viewport，postcss-pxtorem，lib-flexible

npm install [email protected]
npm install axios
npm i -S amfe-flexible
npm install postcss postcss-pxtorem --save-dev
npm install postcss-px-to-viewport --save-dev
npm install --save less-loader less

配置環境

配置vant 的基礎樣式，方便引用vant的組件。在first\src\assets\style\下創建theme.less，內容

// Color Palette
@black: #000;
@white: #fff;
@gray-1: #f7f8fa;
@gray-2: #f2f3f5;
@gray-3: #ebedf0;
@gray-4: #dcdee0;
@gray-5: #c8c9cc;
@gray-6: #969799;
@gray-7: #646566;
@gray-8: #323233;
@red: #ee0a24;
@blue: #1989fa;
@orange: #ff976a;
@orange-dark: #ed6a0c;
@orange-light: #fffbe8;
@green: #07c160;

// Gradient Colors
@gradient-red: linear-gradient(to right, #ff6034, #ee0a24);
@gradient-orange: linear-gradient(to right, #ffd01e, #ff8917);

// Component Colors
@text-color: @gray-8;
@active-color: @gray-2;
@active-opacity: 0.7;
@disabled-opacity: 0.5;
@background-color: @gray-1;
@background-color-light: #fafafa;
@text-link-color: #576b95;

// Padding
@padding-base: 4px;
@padding-xs: @padding-base * 2;
@padding-sm: @padding-base * 3;
@padding-md: @padding-base * 4;
@padding-lg: @padding-base * 6;
@padding-xl: @padding-base * 8;

// Font
@font-size-xs: 10px;
@font-size-sm: 12px;
@font-size-md: 14px;
@font-size-lg: 16px;
@font-weight-bold: 500;
@line-height-xs: 14px;
@line-height-sm: 18px;
@line-height-md: 20px;
@line-height-lg: 22px;
@base-font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue',
  Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', 'miui', 'Hiragino Sans GB',
  'Microsoft Yahei', sans-serif;
@price-integer-font-family: Avenir-Heavy, PingFang SC, Helvetica Neue, Arial,
  sans-serif;

// Animation
@animation-duration-base: 0.3s;
@animation-duration-fast: 0.2s;
@animation-timing-function-enter: ease-out;
@animation-timing-function-leave: ease-in;

// Border
@border-color: @gray-3;
@border-width-base: 1px;
@border-radius-sm: 2px;
@border-radius-md: 4px;
@border-radius-lg: 8px;
@border-radius-max: 999px;

同樣目錄下，創建一個public.css，內容

body {
  background-color: #f8f8f9;
  min-height: 100vh;
  min-width: 100vw;
}
.padding-lr10 {
  padding: 0 10px;
}
.phoneContant header .van-nav-bar {
  text-align: center;
  line-height: 56px;
  background: #68c2bd;
}
h3 {
  font-size: 16px;
}
.phoneContant header .van-nav-bar .van-icon {
  font-size: 20px;
  color: #fff;
}
.phoneContant header .van-nav-bar__title {
  color: #fff;
}
.contant {
  padding: 0 10px;
}
.re {
  position: relative;
}
.cardContant {
  background: #f5f5f5;
  height: 78vh;
  width: 100%;
  clear: both;
  padding: 8px 0;
}
.hosImg {
  width: 60px !important;
  height: 60px !important;
  border-radius: 50%;
}

這裡的內容，是根據項目中需要的樣式自定義的

在vue.config.js裡進行配置

css: {
    loaderOptions: {
      less: {
        lessOptions: {
          modifyVars: {
            // 或者可以通過 less 文件覆蓋（文件路徑為絕對路徑）
            hack: `true; @import "@/assets/style/theme.less";`,
          },
        },
      },
    },
  },

訪問資源路徑，有個快捷方法，設置一個符號，用來直接指定到src目錄下，比用.或者..方便，還不容易出錯，同樣在vue.config.js裡，@就代表src目錄

  chainWebpack: (config) => {
    config.resolve.alias.set("@", resolve("src"));
    config.plugin("html").tap((args) => {
      args[0].minify = false;
      return args;
    });
  },

vue.config.js全部內容

const path = require("path");
// const CompressionWebpackPlugin = require("compression-webpack-plugin");
// // 定義壓縮文件類型
// const productionGzipExtensions = ["js", "css"];
// let timeStamp = new Date().getTime();

function resolve(dir) {
  return path.join(__dirname, dir);
}
module.exports = {
  // 基本路徑
  publicPath: "./",
  // 輸出文件目錄 不寫則默認根目錄
  outputDir: "dist",
  assetsDir: "static", // 靜態資源目錄 (js, css, img, fonts)
  lintOnSave: false,
  // eslint-loader 是否在保存的時候檢查
  // lintOnSave: 'error',
  // devServer: {
  //   // development server port 8000
  //   port: 8000,
  //   // If you want to turn on the proxy, please remove the mockjs /src/main.jsL11
  //   proxy: {
  //     '/api/': {
  //       target: process.env.VUE_APP_APIUrl,
  //       changeOrigin: true
  //     }
  //   }
  // },
  // /assets/style/public.css.less
  css: {
    loaderOptions: {
      less: {
        lessOptions: {
          modifyVars: {
            // 或者可以通過 less 文件覆蓋（文件路徑為絕對路徑）
            hack: `true; @import "@/assets/style/theme.less";`,
          },
        },
      },
    },
  },
  devServer: {
    // 設置主機地址
    // 設置默認端口
    port: 8080,
    // // 設置代理
    // proxy: {
    //   "/": {
    //     // target: "http://198.166.21.56:8080/",
    //     ws: true, // 支持ws協議；websocket的縮寫；
    //     changeOrigin: true, // 是否跨域
    //     pathRewrite: {
    //       // 路徑替換
    //       "^/api": "",
    //     },
    //   },
    // },
   
  },
  // use the full build with in-browser compiler?
  // https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only
  // compiler: false,

  // webpack配置
  // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md   webpack鏈接API，用於生成和修改webapck配置
  //部署打包html帶引號
  chainWebpack: (config) => {
    config.resolve.alias.set("@", resolve("src"));
    config.plugin("html").tap((args) => {
      args[0].minify = false;
      return args;
    });
  },
  //壓縮打包文件大小
  configureWebpack: (config) => {
    if (process.env.NODE_ENV === "Production") {
      // config.output.filename = `assets/js/[name].${timeStamp}.js`;
      // config.output.chunkFilename = `assets/js/[name].${timeStamp}.js`;
      config.plugins.push(
        new CompressionWebpackPlugin({
          algorithm: "gzip",
          test: new RegExp("\\.(" + productionGzipExtensions.join("|") + ")$"),
          threshold: 10240,
          minRatio: 0.8,
        })
      );
    }
    config.externals = {
      //   'vue': 'Vue',
      //   'vuex': 'Vuex',
      //   'vue-router': 'VueRouter',
      //   'element-ui': 'ELEMENT',
      //   'Axios': 'axios',
      //   'jquery': '$',
      //   'moment': 'moment',
      //   'js-cookie': 'Cookies',
      //   'echarts': 'echarts',
      //   'tinymce/tinymce': 'tinymce'
    };
    // }
  },
  // configureWebpack: (config) => {// webpack配置，值位對象時會合並配置，為方法時會改寫配置
  //   if (debug) { // 開發環境配置
  //     config.devtool = 'cheap-module-eval-source-map'
  //   } else { // 生產環境配置

  //   }
  //   Object.assign(config, { // 開發生產共同配置
  //     resolve: {
  //       alias: {
  //         '@': path.resolve(__dirname, './src')//設置路徑別名
  //         //...
  //       }
  //     }
  //   })
  // },
  // vue-loader 配置項
  // https://vue-loader.vuejs.org/en/options.html
  // vueLoader: {},

  // 生產環境是否生成 sourceMap 文件
  productionSourceMap: false,
  // css相關配置 配置高於chainWebpack中關於css loader的配置
  // css: {
  //   // 是否使用css分離插件 ExtractTextPlugin
  //   extract: true,
  //   // 開啟 CSS source maps?是否在構建樣式地圖，false將提高構建速度
  //   sourceMap: false,
  //   // css預設器配置項
  //   loaderOptions: {},
  //   // 啟用 CSS modules for all css / pre-processor files.
  //   modules: false
  // },
  // use thread-loader for babel & TS in production build
  // enabled by default if the machine has more than 1 cores 構建時開啟多進程處理babel編譯
  //parallel: require('os').cpus().length > 1,
  // 是否啟用dll
  // See https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#dll-mode
  // dll: false,

  // PWA 插件相關配置
  // see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
  //pwa: {},
  // webpack-dev-server 相關配置
  // devServer: {
  //   open: process.platform === 'darwin',
  //   host: '0.0.0.0',
  //   port: 8080,
  //   https: false,
  //   hotOnly: false,
  //   proxy: null, // 設置代理
  //   before: app => { }
  // },
  // 第三方插件配置
  pluginOptions: {
    // ...
  },
};

lintOnSave: false,這個的意思就是關閉語法檢查，要不然會很多報錯，運行不起來

在first-vue目錄下，新建一個.postcssrc.js，在裡邊配置postcss

module.exports = {
  plugins: {
    //...
    autoprefixer: {
      browsers: ["Android >= 4.0", "iOS >= 7"],
    },
    "postcss-pxtorem": {
      rootValue: 37.5, //vant-UI的官方根字體大小是37.5
      propList: ["*"],
    },
  },
};

底部安全區適配

在public目錄下的index.html文件配置底部安全區適配

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta base="/" id="base" />
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover,user-scalable=no"
    />

    <link rel="icon" href="<%=%20BASE_URL%20%>favicon.ico" rel="external nofollow"  />
    <title>首頁</title>
  </head>

  <body>

    <!-- 開啟頂部安全區適配 -->
    <van-nav-bar safe-area-inset-top />
    <div id="app"></div>
    <!-- built files will be auto injected -->
    <!-- 開啟底部安全區適配 -->
    <van-number-keyboard safe-area-inset-bottom />
  </body>
</html>
<script>
  
</script>

src目錄下，新建router目錄，下邊新建index.js，對router進行配置

import Vue from "vue";
//路由
import VueRouter from "vue-router";
import { asyncRouterMap } from "@/config/router.config";
Vue.use(VueRouter);
const routes = []
  const router = new VueRouter({
    routes: routes.concat(asyncRouterMap),
   
    mode: "hash",
  });
  
  export default router;

在src的config目錄下，新建router.config，這個對應路由和相應的頁面

export const asyncRouterMap = [
  {
    path: "/",
    component: () => import("@/components/Header.vue"),
    meta: { title: "首頁" },
    // redirect: '/dashboard/workplace',
    redirect: "/home",
    children: [
      {
        path: "/home",
        name: "home",
        component: () => import("@/views/Home.vue"),
        hidden: true,
        meta: { title: "首頁" },
      },
      {
        path: "/second",
        name: "second",
        component: () => import("@/views/Second.vue"),
        hidden: true,
        meta: { title: "第二頁" },
      },
     
    ],
  },
  {
    path: "*",
    redirect: "/home",
    hidden: true,
  },
];

具體頁面，等會創建

對App.vue進行修改

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>

export default {
  name: 'App',

}
</script>

<style>
#app {
  height: 100%;
}
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

body > .el-container {
  margin-bottom: 40px;
}
</style>

我現在需要對一個頭部組件進行封裝，因為每個頁面都有頭部導航欄，所以封裝成一個組件

在components目錄裡，新建Header.vue

<template>
  <div class="phoneContant">
    <header>
  
      <van-nav-bar
        class="personheader"
        :fixed="true"
        :placeholder="true"
        :safe-area-inset-top="true"
        :title="$route.meta.title"
        left-text=""
        :left-arrow="true"
        @click-left="back"
      />
    </header>
        <router-view></router-view>
  </div>
</template>

<script>

var config = {
  isAndroid: /Android/i.test(navigator.userAgent), //判斷是否為移動端
  isIos: !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //判斷是否為IOS
};

export default {
  name: "Headers",
  //import引入的組件需要註入到對象中才能使用
  components: {},
  data() {
    //這裡存放數據
    return {
      title: "",
    };
  },
  //監聽屬性 類似於data概念
  computed: {},
  //監控data中的數據變化
  watch: {
    $route: {
      handler(newRouter, fromRouter) {
      
      },
      immediate: true,
    },
  },
  //方法集合
  methods: {
    back() {
    this.$router.go(-1);
    
      return false;
    },
  },
  //生命周期 - 創建完成（可以訪問當前this實例）
  created() {
    let cont = window.history.length;
    console.log("window.history.length-----------------roomstep");
    console.log(cont);
  },
  //生命周期 - 掛載完成（可以訪問DOM元素）
  mounted() {
    
  },
  beforeCreate() {}, //生命周期 - 創建之前
  beforeMount() {}, //生命周期 - 掛載之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之後
  beforeDestroy() {}, //生命周期 - 銷毀之前
  destroyed() {
  
  }, //生命周期 - 銷毀完成
  activated() {}, //如果頁面有keep-alive緩存功能，這個函數會觸發
};
</script>

在main.js裡進行引入vant和css樣式，以及其他組件

import Vue from 'vue'
import App from './App.vue'
import "@/assets/style/public.css";
import router from "@/router";
import Vant from "vant";
import "vant/lib/index.less";
import "@/assets/style/public.css";
Vue.config.productionTip = false
Vue.use(Vant);

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

在src下創建一個views文件夾，新建兩個vue，Home.vue和Second.vue，內容很簡單

Home.vue

<template>

  <div class="phoneContant">
    <van-button type="warning" @click="goToNext">進入下一頁</van-button>
  </div>
</template>

<script>

export default {
  name: "Home",
  data() {
    return {
      msg: "我是首頁",
    };
  },
  methods: {
    goToNext() {
      this.$router.push("/second");
    },

  },
};
</script>

<style>
</style>

Second.vue

<template>
<div>
    {{msg}}
</div>
  
</template>

<script>
export default {
    data(){
        return{
            msg:"第二頁"
        }
    }
}
</script>

<style>

</style>

運行

命令行輸入

npm run serve

沒問題的話，就能運行起來瞭。如果想要中斷運行，終端裡邊用ctrl+c快捷鍵

網絡封裝

對axios進行封裝一下，方便使用。在src下新建utils文件夾，utils下新建request.js，

import axios from "axios";
import { Notify } from "vant";
import router from "@/router";

const baseURL =BaseUrl
  // process.env.NODE_ENV === "development" ? "/api" : window.productionUrl;
//創建axios實例
const service = axios.create({
  baseURL, // api的base_url  window.productionUrl
  withCredentials: true,
  timeout: 30000, // 請求超時時間
});

// 發送請求攔截器
service.interceptors.request.use(
  (config) => {
    const Nonce =
      Math.ceil(+new Date() / 1000) + "" + Math.ceil(Math.random() * 10000);
    const CurTime = Math.floor(+new Date() / 1000).toString();
    config.headers["Content-Type"] = "application/json;charset=UTF-8";

    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

//發送請求響應攔截
service.interceptors.response.use(
  (response) => {
    const res = JSON.parse(CryptoJS.decrypt(response.data));
    // 錯誤的status情況
    // console.log(res);
    if (!res.result) {
      Notify({ type: "danger", message: res.message || "error" });
      return Promise.reject(res.message || "error");
    } else {
      return res;
    }
  },
  (error) => {
    Notify({ type: "danger", message: error.message || "error" });
    return Promise.reject(error);
  }
);

export default service;

結語

現在隻是搭建瞭工程，如果沒有缺少步驟的話，應該是可以運行起來的，剩下的還有很多工作要做。。。

補充

之前的工程創建方式順序應該錯瞭，不是先創建文件夾，然後再用vscode打開，再執行vue create命令，這樣的話，主目錄下，就會有子目錄，子目錄就是項目名。如果想主目錄就是項目，要現在需要創建工程的地方，打開cmd命令行，執行命令，然後用vscode打開

總結 

到此這篇關於vue開發移動端h5環境搭建的文章就介紹到這瞭,更多相關vue移動端h5環境搭建內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：