Vue 3.0 脚手架配置 (TypeScript + less的px转rem + 反向代理 + axios + vuex )-CFANZ编程社区

一、创建项目

二、less的px转rem

三、配置反向代理 + axios

四、vuex传值测试

一、创建项目

1.新建一个文件夹 (不能为中文)

2.打开命令行窗口

方式一：文件路径栏输入 cmd 后回车

效果:

方式二：按win+r键打开运行输入cmd打开命令行窗口

d: 回车 (切换到文件所在盘符)

cd: + 文件绝对路径回车 (进入文件目录)

3.创建vue脚手架

1.命令行输入 vue create .

2.回车后提示 : 是否在此目录创建项目输入 y后回车继续

3.选择预设按方向键切换到最后一个手动选择功能然后回车

4.选择需要的功能用空格选中选好后回车

5.选择vue版本这里选择3.x 然后回车

6. 之后的提示全部选 n

7.选择css预处理器这里选择less

8.单元测试方案 ,选择默认的第一个

9.选择配置的保存位置选第二个

10.是否保存为预设按需设置如果保存为预设需要设置预设的名字

11.等待下载

12.下载完成后如图

13.此时输入 npm run serve 即可启动项目

二、less的px转rem

1.移动端适配

1.项目启动后在命令行中按ctrl + c 停止运行项目

2.命令行输入以下代码下载'lib-flexible' 'postcss-px2rem-exclude' 两个插件

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

3.下载完成后用vscode打开项目在入口文件 main.ts 中引入 lib-flexible ( import 'lib-flexible')

2.px转rem

1.在项目根目录下创建 vue.config.js 并在里面配置

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

2.打开package.json文件 ,添加:

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

3.配置完成后, 重启项目

三、配置反向代理 + axios

1.反向代理

打开vue.config.js配置文件,在module.exports 中添加以下代码

devServer: {
    proxy: {
        //    配置跨域
        '/api': {
            target: 'http://....................',      //这里是后端接口地址
                changeOrigin: true,
                pathRewrite: {
                '^/api': ''
            }
        }
    }
}

2.配置axios

1.下载axios:

npm install axios --save

2.在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 searchConfig {
    page: number | string
    mod: string
}
interface getConfig {
    page: number | string
}
// 搜索接口
export function searchCar(config: searchConfig) {
    const params = new URLSearchParams()

    params.append('page', config.page as string);
    params.append('mod', config.mod);

    return Service({
        url: "./api/oldcar/searchCar",
        data: params
    })
}

// 列表接口
export function getCarList(config: getConfig) {
    const params = new URLSearchParams()
    params.append('page', config.page as string)
    return Service({
        url: "/api/oldcar/getCarList",
        data: params
    })
}

3.在view/about中测试:

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <button @click="getData">获取数据</button>
  </div>
</template>
<script>
import { getCarList } from "@/api"; //引用
export default {
  methods: {
    async getData() {
      this.car_list = await getCarList({ page: 1 });
    },
  },
  async created() {
    console.log(await getCarList({ page: 1 }));
  },
};
</script>

点击按钮获取数据

四、vuex传值测试

1.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:

<template>
  <div class="home"><button @click="button">vuex传值</button></div>
</template>

<script>
import { mapActions } from "vuex";
export default {
  name: "Home",
  methods: {
    ...mapActions(["setStateName"]),
    button() {
      this.setStateName("这是Home传的值");
      this.$router.push("/about");
    },
  },
};
</script>

about:

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <button @click="getData">获取数据</button>
    <!-- vuex  -->
    <p>{{ getState }}</p>
  </div>
</template>
<script>
import { getCarList } from "@/api"; //引用
import { mapGetters } from "vuex"; //vuex
export default {
  methods: {
    async getData() {
      this.car_list = await getCarList({ page: 1 });
    },
  },
  async created() {
    console.log(await getCarList({ page: 1 }));
  },
  computed: {
    ...mapGetters(["getState"]), //vuex
  },
};
</script>