vue开发移动端h5环境搭建的全过程

下面就是Vue开发移动端H5环境搭建的完整攻略：

准备工作

在开始搭建之前，需要安装有Node.js，并且全局安装vue-cli脚手架工具。可以使用以下命令进行安装：

npm install -g vue-cli

创建项目

在命令行中使用以下命令创建一个名为"my-project"的Vue项目：

vue create my-project

其中，可以根据自己的需求选择相应的插件和特性。在项目创建过程中，可以使用预设配置，或者手动进行配置。如果选择预设配置，则可使用以下命令：

vue create my-project --preset default

配置移动端环境

移动端H5环境的适配问题需要我们自己来解决。因此，我们需要自己进行相关的配置。

使用rem来适配不同屏幕

在项目的src目录下创建一个assets文件夹，然后创建一个scss文件，例如index.scss。在该文件中，我们需要写入以下代码：

$base-font-size: 16px;

/* 计算rem方法 */
@function px2rem($px) {
  @return $px / $base-font-size + rem;
}

/* 设置页面根元素的font-size值 */
html {
  font-size: $base-font-size;
}

/* 将所有元素字体大小转化为rem值 */
body, button, input, select, textarea {
  font-size: px2rem($base-font-size);
}

在main.js中，我们需要引入index.scss文件，然后计算根元素字体大小。代码如下：

import './assets/index.scss';

// 全局配置设计稿尺寸
const DesignWidth = 750;

// 计算当前屏幕与设计稿的比例
const scale = document.documentElement.clientWidth / DesignWidth;

// 设置根元素的字体大小
document.documentElement.style.fontSize = 16 * scale + "px";

使用vw来适配不同屏幕

除了使用rem来适配屏幕外，还可以使用vw。相比于rem，vw更加简单，不需要编写繁琐的计算方法。

在main.js中，我们需要计算当前屏幕与设计稿的比例，并设置根元素字体大小。代码如下：

// 全局配置设计稿尺寸
const DesignWidth = 750;

// 计算当前屏幕与设计稿的比例
const scale = window.innerWidth / DesignWidth;

// 将比例乘以100，得到1vw的大小
// 然后将根元素的font-size设置为该大小
document.documentElement.style.fontSize = scale * 100 + "vw";

示例说明

示例一：使用vue-router来实现页面路由

在src目录下创建一个router文件夹，然后创建一个名为index.js的文件。在该文件中，我们需要编写以下代码：

import Vue from 'vue';
import Router from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    }
  ]
});

然后，在main.js中引入路由配置并使用路由:

import Vue from 'vue';
import App from './App.vue';
import router from './router';

Vue.config.productionTip = false;

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

示例二：使用axios来实现数据请求

在src目录下创建一个api文件夹，然后创建一个名为index.js的文件。在该文件中，我们需要编写以下代码：

import axios from 'axios';

// 创建axios实例
const instance = axios.create({
  baseURL: 'https://api.xxx.com',  // 设置接口的根路径
  timeout: 5000  // 设置请求的超时时间
});

// 请求拦截器
instance.interceptors.request.use(config => {
  config.headers['Authorization'] = 'Bearer ' + localStorage.getItem('token');  // 设置请求头
  return config;
}, error => {
  return Promise.reject(error);
});

// 响应拦截器
instance.interceptors.response.use(response => {
  return response.data;
}, error => {
  return Promise.reject(error);
});

// 封装请求方法
const request = {
  get: function(url, params) {
    return instance({
      method: 'get',
      url,
      params
    });
  },
  post: function(url, data) {
    return instance({
      method: 'post',
      url,
      data
    });
  },
  put: function(url, data) {
    return instance({
      method: 'put',
      url,
      data
    });
  },
  delete: function(url) {
    return instance({
      method: 'delete',
      url
    });
  }
};

export default request;

然后，在需要进行数据请求的地方引入该文件并使用请求方法。例如：

import request from '@/api';

request.get('/user/info', { id: '123' }).then(res => {
  console.log(res);
});

以上就是Vue开发移动端H5环境搭建的完整攻略，希望能够对你有所帮助。