你需要安装好vue-cli脚手架
注意:该文章只针对与vue-cli版本为4.5.13
查看自己vue版本
vue -V
vue create .
回车点
vue create .
npm run serve
,回车启动项目npm run serve
npm i lib-flexible postcss-px2rem-exclude --save
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/
}),//换算的基数
]
}
}
},
}
"postcss":{
"plugins":{
"autoprefixed":{}
}
}
devServer: {
proxy: {
// 配置跨域
'/api': {
target: 'http://www.ibugthree.com/oldcar/',//这里是后端接口地址
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
},
open: true //启动项目自动打开浏览器
}
npm install axios --save
index.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)
})
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
})
}
This is an about page
/* eslint-disable no-undef */
/* eslint-disable no-unused-vars */
import * as axios from 'axios'
declare module 'axios' {
interface AxiosInstance {
(config: AxiosRequestConfig): Promise
}
}
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: {
}
})
{{ getState }}
import Concat from '../views/Concat.vue'
{
path: '/concat',
name: 'Concat',
component: Concat
},
|Concat