vue-cli3.0移动端项目搭建

第一步

引入amfe-flexible

安装amfe-flexible：　　

npm i amfe-flexible --save

在项目的入口main.js文件中引入amfe-flexible:

import 'amfe-flexible'

第二步

使用postcss-pxtorem自动将css中的px转换成rem

安装postcss-pxtorem ：　

npm install postcss-pxtorem --save-dev

第三步

新建vue.config.js文件，并添加以下代码

使用 postcss-pxtorem

//使用 postcss-pxtorem
const autoprefixer = require("autoprefixer");
const pxtorem = require("postcss-pxtorem");
module.exports = {
    publicPath: "./",
    lintOnSave: true,
    css: {
        // modules:false,
        // extract:true,
        sourceMap: false,
        loaderOptions: {
            postcss: {
                plugins: [
                    autoprefixer(),
                    pxtorem({
                        rootValue: 37.5, //vant使用375设计稿,其他使用750设计稿，rootValue:75
                        selectorBlackList: ["weui", "mu"], // 忽略转换正则匹配项
                        propList: ["*"]
                    })
                ]
            }
        }
    },
    configureWebpack: (config) => { //生产环境去掉console.log
        if (process.env.NODE_ENV === 'production') {
            config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true
        }
    },
    devServer: {
        // port: 端口号,
        proxy: {
            "/apis": {
                target: url, // target host  目标接口域名
                ws: true, // proxy websockets
                changeOrigin: true, // needed for virtual hosted sites  是否跨域
                pathRewrite: {
                    "^/apis": "" // rewrite path 重写接口
                }
            }
        }
    }
};

如果使用 postcss-px2rem

module.exports = {
    lintOnSave: true,
    css: {
        loaderOptions: {
            postcss: {
                plugins: [
                    require('postcss-px2rem')({remUnit: 30}), // 换算的基数
                ]
            }
        }
    },
}

第四步

添加视口内容

在public文件夹下的index.html里修改视口内容

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">

第五步

引入axios

npm i axios -s

main.js里配置axios

import axios from 'axios'
Vue.prototype.$axios = axios;

封装axios

创建utils文件夹，下面新建http.js文件

import axios from "axios";
import QS from "qs";
axios.defaults.timeout = 10000;

//post请求头
axios.defaults.headers.post["Content-Type"] =
    "application/x-www-form-urlencoded;charset=UTF-8";

// 环境的切换,vue-cli3 开发就是dev,打包就是production
// if (process.env.NODE_ENV == "development") {
//     axios.defaults.baseURL = "http://192.168.31.51:3000/api";
// } else if (process.env.NODE_ENV == "production") {
//     axios.defaults.baseURL = "http://127.0.0.1:3000/api";
// }

import store from "../store";
//请求拦截
axios.interceptors.request.use(
    config => {
        console.log("请求拦截");
        // const token = store.getters.getToken;       
        // config.headers.Authorization = "Bearer " + token;
        return config;
    },
    error => {
        return Promise.error(error);
    }
);

// 响应拦截器
axios.interceptors.response.use(
    response => {
        console.log("响应拦截");
        return Promise.resolve(response);
    },
    // 服务器状态码不是200的情况
    error => {
        if (error.response.status) {
            console.log("错误处理");
            //状态码错误处理
            return Promise.reject(error.response);
        }
    }
);

//get请求封装
export function get(url, params) {
    return new Promise((resolve, reject) => {
        axios
            .get(url, {
                params: params
            })
            .then(res => {
                resolve(res.data);
            })
            .catch(err => {
                reject(err.data);
            });
    });
}

//post请求封装,qs库将对象转换为&连接的字符串表单格式
export function post(url, params) {
    return new Promise((resolve, reject) => {
        axios
            .post(url, QS.stringify(params))
            .then(res => {
                resolve(res.data);
            })
            .catch(err => {
                reject(err.data);
            });
    });
}

export function put(url, params) {
    return new Promise((resolve, reject) => {
        axios
            .put(url, QS.stringify(params))
            .then(res => {
                resolve(res.data);
            })
            .catch(err => {
                reject(err.data);
            });
    });
}

//delete方法的删除参数有点问题{ data: params }
export function deletes(url, params) {
    return new Promise((resolve, reject) => {
        axios
            .delete(url, { data: params })
            .then(res => {
                resolve(res.data);
                console.log("成功删除");
            })
            .catch(err => {
                reject(err.data);
                console.log("删除失败");
            });
    });
}

第六步：引入ui框架

1.vant框架

链接如下：https://youzan.github.io/vant/#/zh-CN

1.vant安装

npm i vant -S

2.安装插件

npm i babel-plugin-import -D

3.在 babel.config.js 中配置vant

最后结果如下：

module.exports = {
    presets: [
        '@vue/cli-plugin-babel/preset'
    ],
    plugins: [
        ['import', {
            libraryName: 'vant',
            libraryDirectory: 'es',
            style: true
        }, 'vant']
    ]
}

2.iview框架

链接如下：https://www.iviewui.com/docs/introduce

2.1.iview安装

npm install view-design --save

2.2.按需引入

npm install babel-plugin-import --save-dev

2.3.在 babel.config.js 中配置

// .babelrc
{
  "plugins": [["import", {
    "libraryName": "view-design",
    "libraryDirectory": "src/components"
  }]]
}

关注微信公众号，了解更多前端知识。更有小程序和UI设计、后台node等方面的内容哦