配置vue3.0 + ts + axios + 反向代理 + px转rem

前提

你需要安装好vue-cli脚手架
注意：该文章只针对与vue-cli版本为4.5.13 查看自己vue版本
vue -V

搭建vue3.0

• 创建一个项目文件夹，cmd打开该文件夹，输入vue create . 回车
• 注意：create后面有 点

vue create .

• 敲 y 然后回车

• 按上下键进行选择，选择最后一个，回车

• 按上下键进行选择，按空格选中，按需选择，选择好后回车

• 选择vue版本 选择3.x ，回车

• 这里三次全部按 n ，回车

• 选择css预处理器 选择less ，回车

• 这里选择 Mocha + Chai， 回车

• 这里选择 In package.json ， 回车

• 是否保存为预设， y 保存 ；n 不保存。 这里我们按y保存一下以便于以后使用

• 输入预设的名字， 回车等待下载

• 下载完毕后 输入 npm run serve ，回车启动项目

npm run serve

• 看到这个页面就 ok
  

配置px转rem

• 命令行输入以下代码

npm i lib-flexible postcss-px2rem-exclude  --save

• vscode打开项目 在src中的main.ts 中引入以下代码

 import 'lib-flexible'

• 在项目根目录下创建 vue.config.js 文件，输入以下代码

// vue.config.js
module.exports = {
  css:{
    loaderOptions:{
      postcss:{
        plugins:[
          require('postcss-px2rem-exclude')({
            remUnit:75, // 设计稿宽/10
            exclude:/node_modules/
          }),//换算的基数
        ]
      }
    }
  },
}

• 在package.json 文件中添加以下代码：

"postcss":{
    "plugins":{
      "autoprefixed":{}
    }
  }

• 重新 npm run serve 启动项目 看看效果

配置反向代理 和 axios

• 在vue.config.js配置文件的module.exports 中添加以下代码

devServer: {
       proxy: {
            //    配置跨域
            '/api': {
                target: 'http://www.ibugthree.com/oldcar/',//这里是后端接口地址
                changeOrigin: true,
                pathRewrite: {
                    '^/api': ''
               }
           }
       },
     open: true   //启动项目自动打开浏览器
}

• cmd输入以下命令

npm install axios --save

• 在src目录下创建api文件夹 , 文件夹内创建 index.ts 和 request.ts 两个文件 分别输入以下代码：

• request.ts代码：

import axios from "axios";
export const Service = axios.create({
    timeout: 8000, //延迟时间
    method: 'POST',
    headers: {
        "content-Type": "application/x-www-form-urlencoded",
        "pc-token": "4a82b23dbbf3b23fd8aa291076e660ec", //后端提供
    }
})
// 请求拦截
Service.interceptors.request.use(config => {
    return config
})
// 响应拦截
Service.interceptors.response.use(response => {
    return response.data
}, err => {
    console.log(err)
})

• index.ts代码：

import { Service } from "./request";
interface getSearchConfig{
    page: number | string
    mod: string
}
interface getCarConfig{
    page: number | string
}
// 搜索接口
export function getSearchCar(config: getSearchConfig) {
    const params = new URLSearchParams()
 
    params.append('page', config.page as string);
    params.append('mod', config.mod);
 
    return Service({
        url: "./api/searchCar",
        data: params
    })
}
 
// 列表接口
export function getCarList(config: getCarConfig) {
    const params = new URLSearchParams()
    params.append('page', config.page as string)
    return Service({
        url: "/api/getCarList",
        data: params
    })
}

• 在src中的views中的About.vue文件输入以下代码

• 在scr目录下创建axios.d.ts文件 加入以下代码

/* eslint-disable no-undef */
/* eslint-disable no-unused-vars */
import * as axios from 'axios'
declare module 'axios' {
    interface AxiosInstance {
        (config: AxiosRequestConfig): Promise
    }
}

• npm run serve 启动项目看看效果

vuex传值测试

• 修改store文件夹的index.ts文件代码如下

import { createStore } from 'vuex'
export default createStore({
  state: {
    name: '默认值'
  },
  mutations: {
    setState(state, args) {
      state.name = args
    }
  },
  actions: {
    setStateName({ commit }, args) {
      commit('setState', args)
    }
  },
  getters: {
    getState(state) {
      return state.name
    }
  },
  modules: {
  }
})

• 修改home中的文件代码如下：

• 在src文件夹中的views文件夹新建一个Concat.vue输入以下代码

• 在router中的index.ts这样这样定义

import Concat from '../views/Concat.vue'


  {
    path: '/concat',
    name: 'Concat',
    component: Concat
  },

• 在App.vue加入这行代码：

|Concat

• npm run serve启动项目

以上就是全部内容