Vue 3.0 脚手架配置 (TypeScript + less的px转rem + 反向代理 + axios + vuex )

一、创建项目

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

2.打开命令行窗口

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

     效果:

 3.创建vue脚手架 

注意!!!  此套配置 基于vue-cli 4.5.15版本   

使用 vue -V 查看当前cli版本

如果版本高于4.5.15  需要降低版本:

npm install -g @vue/cli@4.5.15

 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 lang="ts">
import { getCarList } from "@/api"; //引用
import { defineComponent, onMounted } from "vue";
 
export default defineComponent({
  setup() {
    const getData = async function () {
      console.log(await getCarList({ page: 1 }));
    };
    onMounted(async() => {
      console.log(await getCarList({ page: 1 }));
    });
    return {
      getData,
    };
  },
});
</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">
    <div><button @click="FnSetStateName">给about传值</button></div>
  </div>
</template>
 
<script lang="ts">
import { defineComponent } from "vue";
import { useStore } from "vuex";
export default defineComponent({
  name: "Home",
  setup() {
    const store = useStore();
    const FnSetStateName = function () {
      //Action 通过 store.dispatch 方法触发
      store.dispatch("setStateName", "这是home传的值");
    };
    return {
      FnSetStateName,
    };
  },
});
</script>

about:

<template>
  <div class="about">
    <p>{{ getState }}</p>
  </div>
</template>
<script lang='ts'>
import { computed, defineComponent } from "vue";
import { useStore } from "vuex";
 
export default defineComponent({
  setup() {
    const store = useStore();
    const getState = computed(() => store.getters.getState);
    return {
      getState,
    };
  },
});
</script>