VUE CLI3 小白环境搭建流程及配置

用vue cli3可视化搭建项目

这是第二次用vue cli3搭建项目，发现第一次遇到的坑，第二次又忘记了，特此来记录一下搭建流程和搭建过程中走过的坑

安装vue-cli3

• .安装vue-cli3.X版本

npm install -g @vue/cli

• 查看是否安装成功

vue -V

安装成功！

新建项目

• 访问可视化界面

vue ui

这样就表示启动成功了，

• 创建项目
  左侧选择Vue项目管理器
  
  输入或选择创建项目的目录。
  
  输入项目名称，其它默认（可根据实际开发情况选择）
  
  点击下一步，选择手动配置
  
  下一步，根据实际开发需要选择自己需要的插件
  
  下一步，根据自己的使用习惯选择css语言，我一直用的是less,所心选择了less
  
  选择好css的语言后，就可以直接创建项目啦，创建完会弹出保存配置弹框，一定要保存哦，下次可以直接用这个配置
  
  下次创建直接用配置
  
  好了，项目创建成功，可以愉快的玩耍啦O(∩_∩)O哈哈~

移动端自适应大小----px转rem配置

• 安装postcss-pxtorem
  打开图图界面选择‘依赖’----‘安装依赖’

vue ui

搜索输入’postcss-pxtorem’，选择第一个，点击安装

• vue.config.js配置

//vue.config.js文件
css: {
        loaderOptions: {
            postcss: {
                plugins: [
                    require('postcss-pxtorem')({
                        rootValue : 18, // 换算的基数
                        selectorBlackList  : [], // 忽略转换正则匹配项
                        propList   : ['*'],
                    }),
                    require('autoprefixer')({})
            ]
          },
        }
    },

• 引用rem.js文件
  在入口js文件main.js里引入
  

//rem.js
// 设置 rem 函数

function setRem () {
    let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
    // 320 默认大小16px; 320px = 20rem ;每个元素px基础上/16

//得到html的Dom元素
    let htmlDom = document.getElementsByTagName('html')[0];
//设置根元素字体大小
    if(htmlWidth<=800){
        htmlDom.style.fontSize= htmlWidth/20 + 'px';
    }else {
        htmlDom.style.fontSize= '40px';
    }

}
// 初始化
setRem();
// 改变窗口大小时重新设置 rem
window.onresize = function () {
    setRem()

}

引入全局LESS文件里的变量配置

我的需要：如下图，我要在vue文件的style里引用公用less文件的变量配置

首先add下面依赖，必须用下面vue add(ps:第一次用npm i style-resources-loader安装完以后，不能使用，直接报错了，用add会一起安装vue-cli-plugin-style-resources-loader,)

vue add style-resources-loader

然后配置vue.config.js文件

//vue.config.js
const path = require('path')
module.exports = { 
    pluginOptions: {
      'style-resources-loader': {
        preProcessor: 'less',
        patterns: [         
            path.resolve(__dirname, './src/style/var.less'),
        ]
      }
    }
}

OK，重启服务，刷新页面，搞定！

后台接口代理配置

• 安装axios

• 调用axios

//request.js
import axios from 'axios'
import store from '../store'
import {Toast,Dialog } from 'vant';

function transformRequest(data) {
    let newStr = ''
    for (let item in data){

        newStr += encodeURIComponent(item) + '=' + encodeURIComponent(data[item]) + '&'
    }
    newStr = newStr.slice(0, -1)
    return newStr
}
// 创建axios实例
const service = axios.create({
    baseURL: process.env.VUE_APP_BASE_API, // api 的 base_url
    timeout: 300000, // 请求超时时间
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
    },
    responseType:'json',
    withCredentials: true,
    transformRequest: [function (data) {
        // 对 data 进行任意转换处理
        return transformRequest(data)
    }],
})

console.log(process.env)
// request拦截器
service.interceptors.request.use(
    config => {

        if (store.getters.token) {
            // 让每个请求携带自定义token 请根据实际情况自行修改
        }

        return config
    },
    error => {
        // Do something with request error
        console.log(error) // for debug
        Promise.reject(error)
    }
)

// response 拦截器
service.interceptors.response.use(

    response => {
        /**
         * code为非20000是抛错 可结合自己业务进行修改
         */
        const res = response.data

        if(res.error){
            if (res.error!=201) {
                if(res.error!=403){
                    Dialog({
                        message: res.msg,
                    })
                }


                /*if (res.error == 403) {
                    Dialog.confirm(
                        {
                            title: '提示',
                            message: '您还未登录，是否立即登录',
                            confirmButtonText: '是',
                            cancelButtonText: '否',
                        }
                    ).then(() => {
                        location.href = '/Login/login/login.html';
                    })
                }*/
                return Promise.reject(res)
            } else {
                return response.data.data || response.data.object
            }
        }
        else {
            return response.data
        }

    },
    error => {
        console.log('err' + error) // for debug
        Message({
          message: error.message,
          type: 'error',
          duration: 5 * 1000
        })
        return Promise.reject(error)
    }
)

function request(params) {
    // let exselReg=/\w*Excel$/
    // if(params.method=='get'&&!params.params){
    //   params.params=params.data
    // }
    // if(exselReg.test(params.data.JsonType)){
    //   window.open(process.env.BASE_API+params.url+'?'+transformRequest(params.params))
    //   return
    // }

    let reg=/action/
    let isLoad=false;

    for(let key in params.data){

        if(reg.test(key)){
            isLoad=true
        }
    }

    return new Promise((res,ref)=>{
        if(isLoad){
            var loadingInstance = Toast.loading({ mask: true,message: '加载中...',duration:500});
        }

        service(params).then(data=>{
            if(isLoad){
                loadingInstance.close()

            }

            res(data)
        }).catch((e)=>{
            if(isLoad){
                loadingInstance.close()
            }

            ref(e)
        })


    })
}

export default request

• vue.config.js进行代理配置

module.exports = {
    // 基本路径
    publicPath: './',

    // 输出文件目录
    outputDir: 'dist',

    devServer: {
        open: true,
        https: false,
        proxy: {
            '/api': {
                target: 'http://xxx.com',//要代理到线上的地址
                changeOrigin: true, //改变源
                pathRewrite: {
                    '^/api': '' //路径重写
                }
            }

        },

    }
  }

• 把接口调用写在同一目录下
  习惯把所有的接口都写到api文件夹里，一个页面一个js文件
  
  接口示例

//login.js
import request from '@/utill/request'
export function islogin() {//是否登录
    return request({
        url:'/Action/LoginDetectionAction.do',
        method:'post'
    })
}

调用示例

！！！不要忘记配置环境变量

这次搭建的时候把环境变量文件给忘记了，代理一直不起作用，找了半天，
找不出原因(⊙ ▽ ⊙)！

• 默认配置.env文件
  不配置其它文件则默认调用些配置，注意文件名不要乱起，必须是这个才会调

NODE_ENV = 'production'
VUE_APP_FLAG = 'pro'
VUE_APP_BASE_API = ''

开发环境配置.env.development文件
**注意！注意！注意！**名字必须是这个，否则不会调用。

NODE_ENV = 'development'
VUE_APP_FLAG = 'pro'
VUE_APP_BASE_API = api

VUE_APP_BASE_AP的值为代理时的路径，根据实际名字调整