1. window+R打开命令行 输入
npm create vite@latest
按照如下步骤创建
2. 进入项目下载依赖
3. 依赖安装好后运行项目
4.引入element-plus
npm install element-plus --save
main.js里引入
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
const app = createApp(App).use(ElementPlus)
app.mount('#app')
使用el-icon需要另外下载引入
npm install @element-plus/icons-vue
main.js里引入
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
5.配置路由
npm install vue-router
main.js里引入路由
import router from './router'
const app = createApp(App).use(ElementPlus).use(router)
新建router文件
import { createRouter, createWebHashHistory } from "vue-router"
const routes = [
{
path: '/',
name: 'index',
component: () => import('../views/index.vue')
},
{
path: '/login',
name: 'login',
component: () => import('../views/login.vue')
}
]
export const router = createRouter({
history: createWebHashHistory(),
routes: routes
})
export default router
注意:一定要在app.vue内添加router-view!!!
6.axios封装接口器请求
npm i axios
npm i qs
新建request>axios.js文件
/**axios封装
* 请求拦截、相应拦截、错误统一处理
*/
import axios from 'axios';
import QS from 'qs';
import router from '../router/index'
//qs.stringify()是将对象 序列化成URL的形式,以&进行拼接
// let protocol = window.location.protocol; //协议
// let host = window.location.host; //主机
// axios.defaults.baseURL = protocol + "//" + host;
axios.defaults.baseURL = 'http://localhost:8888'
axios.interceptors.request.use( //响应拦截
async config => {
// 每次发送请求之前判断vuex中是否存在token
// 如果存在,则统一在http请求的header都加上token,这样后台根据token判断你的登录情况
// 即使本地存在token,也有可能token是过期的,所以在响应拦截器中要对返回状态进行判断
config.headers.token = sessionStorage.getItem('token')
return config;
},
error => {
return Promise.error(error);
})
// 响应拦截器
axios.interceptors.response.use(
response => {
if (response.status === 200) {
return Promise.resolve(response); //进行中
} else {
return Promise.reject(response); //失败
}
},
// 服务器状态码不是200的情况
error => {
if (error.response.status) {
switch (error.response.status) {
// 401: 未登录
// 未登录则跳转登录页面,并携带当前页面的路径
// 在登录成功后返回当前页面,这一步需要在登录页操作。
case 401:
break
// 403 token过期
// 登录过期对用户进行提示
// 清除本地token和清空vuex中token对象
// 跳转登录页面
case 403:
sessionStorage.clear()
router.push('/login')
break
// 404请求不存在
case 404:
break;
// 其他错误,直接抛出错误提示
default:
}
return Promise.reject(error.response);
}
}
);
/**
* get方法,对应get请求
* @param {String} url [请求的url地址]
* @param {Object} params [请求时携带的参数]
*/
const $get = (url, params) => {
return new Promise((resolve, reject) => {
axios.get(url, {
params: params,
})
.then(res => {
resolve(res.data);
})
.catch(err => {
reject(err.data)
})
});
}
/**
* post方法,对应post请求
* @param {String} url [请求的url地址]
* @param {Object} params [请求时携带的参数]
*/
const $post = (url, params) => {
return new Promise((resolve, reject) => {
axios.post(url, QS.stringify(params)) //是将对象 序列化成URL的形式,以&进行拼接
.then(res => {
resolve(res.data);
})
.catch(err => {
reject(err.data)
})
});
}
//下面是vue3必须加的,vue2不需要,只需要暴露出去get,post方法就可以
export default {
install: (app) => {
app.config.globalProperties['$get'] = $get;
app.config.globalProperties['$post'] = $post;
app.config.globalProperties['$axios'] = axios;
}
}
main.js内引入
import Axios from './request/axios';
app.use(ElementPlus).use(Axios)
进入需要发送请求的页面
import { getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();
function logout() {
proxy
.$post("/api/qrycontent/", {
page: 1,
perpage: 4,
section: "LearningGarden",
})
.then((response) => {
console.log(response);
if (response.code == 200) {
sessionStorage.clear();
router.push("/");
ElMessage({
message: "退出成功",
type: "success",
});
}
});
}
7.到这一步接口会请求不通,因为还没有配置跨域,接着配置跨域
server: {
proxy: {
'/api': {
target: 'http://------------/', // 实际请求地址
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, "/api"),
},
},
},
8.使用vuex
npm i vuex
main.js引入
import store from './store'
const app = createApp(App).use(router).use(ElementPlus).use(Axios).use(store)
新建store>index.js
/*
* @Author: wangdandan 15249780720@163.com
* @Date: 2023-10-17 11:16:03
* @LastEditors: wangdandan 15249780720@163.com
* @LastEditTime: 2023-10-17 14:08:00
* @FilePath: \vue3-practice\src\store\index.js
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
import { createStore } from 'vuex'
// 类似 Redux 中的建立状态树
export default createStore({
// 1、 存储所有全局数据
state: {
person:{
name:'jack',
age:20
}
},
// 2、 需要通过计算获取state里的内容获取的数据
// 只能读取不可修改
getters: {
getPerson(state){
return state.person
}
},
// 3、定义对state的各种操作
// why不直接实现在mutation里需要写到action里?
// mutations不能执行异步操作。aq:从云端获取信息-->(等待云端反馈)更新到state异步操作
// 因此说:对于异步操作需要放到action里,简单的直接赋值操作可以直接放到mutation里
mutations: {
ageGrow(state,value){
state.person.age += value
}
},
// 3、定义对state的各种操作
// actions无法直接修改state,需要在mutations里更新
// mutation不支持异步,所以需要在action里写api到url
actions: {
// 比说action定义了更新state的操作
// 但是不可对其直接修改
// 所有的修改操作必须放到mutations里
ageGrow(store,value){
store.commit('ageGrow',value)
}
},
// state中信息过长时
// 用来将state进行分割
// 如下,将state树分割出一个user state。
modules: {
// user: ModuleUser,
}
})
在页面使用
import { useStore } from "vuex";
<h2>----------vuex使用-------------</h2>
<h3>名字:{{store.state.person.name}} ------------ 年龄:{{store.state.person.age}}</h3>
<el-button @click="changeAge">同步改变年龄</el-button>
<el-button @click="asycChangeAge">异步改变年龄</el-button>
// vuex
const store = useStore();
// 同步改变vuex数据
const changeAge = () =>{
store.commit('ageGrow',1)
}
// 异步改变vuex数据
const asycChangeAge = () =>{
setTimeout(() => {
store.dispatch('ageGrow',2)
}, 100);
}
9.配置环境变量
# just a flag
ENV = 'development'
# base api
VITE_APP_BASE_API = 'http://----------------/'
# title
VITE_APP_TITLE = '开发环境'
axios内修改url
axios.defaults.baseURL = '/api';
vite.config.js内修改
import path from "path";
import { defineConfig, loadEnv } from 'vite';
import vue from '@vitejs/plugin-vue';
// https://vitejs.dev/config/
export default ({ mode }) => {
//参数mode为开放模式或生产模式
//console.log(mode); // development or product
const env=loadEnv(mode, process.cwd()); // 获取.env文件里定义的环境变量
console.log(env); //变量在命令行里打印出来
return defineConfig({
plugins: [vue()],
//项目部署在主域名的子文件使用,例如http://localhost:3000/myvite/。不填默认就是/
base: env.VITE_APP_BASE_URL,
build: {
cssCodeSplit: false, //默认ture,将css分割提取到css文件中,false将全部css提取到一个文件里
},
resolve: {
alias: {
//别名配置
"@": path.resolve(__dirname, "src"), //配置src的别名
"@comp": path.resolve(__dirname, "src/components"),
},
},
server: {
proxy: {
// 代理配置
"/api": {
// target: "http://127.0.0.1/1000", //本地服务器环境后台目录D:\phpstudy_pro\WWW\1000
target: env.VITE_APP_BASE_API,
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, "/api"),
},
},
},
})
}