一、创建项目
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>