ypeScript Vue Plugin作用 vue3.0 typescript

前提

  你需要安装好vue-cli脚手架

  注意：该文章只针对与vue-cli版本为4.5.13     查看自己vue版本  vue-V

  文章内容比较长(保姆级别教程)，全是干货，请耐心看完

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

npm install -g @vue/cli@4.5.15

一、搭建Vue3.0

  1.创建一个项目文件夹，cmd打开该文件夹

2.输入 vue create . 回车

vue create .

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

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

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

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

 7.之后的提示全部选 n

 

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

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

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

 

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

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

 13.等待下载

 14.下载完成后 如图  

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

npm run serve

 16.在浏览器输入以下网址

 17.出现首页表示完成

 二、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'

 px转rem

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

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

 5.打开package.json文件 ,添加以下代码

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

 

 6.配置完成后, 重启项目 查看效果

 三、配置 反向代理+ axios

1.反向代理

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

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

 2.配置axios

     1.下载axios

npm install axios --save

 

     2.在src目录下创建api文件夹 , 文件夹内创建 index.ts 和 request.ts 两个文件

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
    })
}

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)
})

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

<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 }));
    };
    return {
      getData,
    };
  },
});
</script>

4. 在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<any>
    }
}

 5.重启项目 查看获取的数据

 

四、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: {
  }
})

 2.修改home中的文件代码如下

<template>
  <div class="home">
    <div><button @click="FnSetStateName">给Concat传值</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>

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

<template>
  <div class="concat">
    <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>

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

 6.在App.vue加入这行代码

|<router-link to="/concat">Concat</router-link>

 7.npm run serve启动项目

  打开Concat 查看默认值

 回到home点击传值

 查看传出的值

以上就是 Vue3.0 脚手架（TypeScript+less+px转rem+反向代理+axios+Vuex） 配置的详细步骤

有问题及时沟通！