4、vite创建vue项目

1、创建项目

npm init vite@latest
或
npm init vite

依次输入项目名称、选择vue、选择使用js或者ts

2、引入依赖

cd 项目名称
npm install

3、启动项目

npm run dev

4、引入vue-router、vuex、axios、element-plus

npm install vue-router@4 -S
npm install vuex@next -S
npm install axios -save
npm install jwt-decode --save
npm install js-md5
npm install element-plus -save
npm install sass

//也可以一次安装多个，中间以空格分隔
npm i vue-router@4 npm install vuex@next npm i axios npm i jwt-decode npm i element-plus npm i js-md5 

5、src目录下新建router、store、utils、views文件夹，并创建js及vue文件

|-- src
| |-- router
| | |-- index.js
| |-- store
| | |-- index.js
| |-- utils
| | |-- request.js
| |-- views
| | |-- home.vue
| | |-- layout.vue
| | |-- login.vue
| |-- App.vue
| |-- main.js

import { createRouter, createWebHashHistory } from "vue-router";
// 创建路由对象
const routes = [
  {
    path: "/login",
    name: "login",
    component: () => import("../views/login.vue"),
  },
  {
    path: "/home",
    name: "home",
    component: () => import("../views/home.vue"),
  },
  {
    path: "/layout",
    name: "layout",
    component: () => import("../views/layout.vue"),
  },
];

const router = createRouter({
  // createWebHashHistory hash 路由
  // createWebHistory history 路由
  // createMemoryHistory 带缓存 history 路由
  history: createWebHashHistory(),
  routes,
});

export default router;

store/index.js

import { createStore } from "vuex";

export default createStore({
  state: {
    num: 10,
  },
  mutations: {},
  actions: {},
  modules: {},
});

utils/request.js

import axios from "axios";
// 创建axios实力对象
const instance = axios.create({
  // 设置请求根路径
  baseURL: "http://127.0.0.1:8080/",
  // 请求超时时间
  timeout: 5000,
});
// 添加请求拦截器
instance.interceptors.request.use(
  (config) => {
    // 发送请求之前做什么
    return config;
  },
  (error) => {
    // 请求错误做什么
    return Promise.reject(error);
  }
);
// 添加响应拦截器
instance.interceptors.response.use(
  (response) => {
    // 对响应做什么
    return response;
  },
  (error) => {
    // 响应错误做什么
    return Promise.reject(error);
  }
);
// 导出一个get方法
export const $get = (url, params) => {
  return instance.get(url, { params });
};
// 导出一个post方法
export const $post = (url, params) => {
  return instance.post(url, params);
};
// 导出设置请求头信息方法
export const $setHeader = (key, value) => {
  instance.defaults.headers.common[key] = value;
};
// 将axios对象导出
export default instance;

6、配置main.js文件

import { createApp } from "vue";
import App from "./App.vue"; // 导入App根组件
import router from "./router"; // 导入路由器
import store from "./store"; // 导入状态管理
import ElementPlus from "element-plus"; // 导入element-plus组件库
import "element-plus/dist/index.css"; // 导入element-plus组件库对应样式
const app = createApp(App);
app.use(ElementPlus);
app.use(store).use(router).mount("#app");

7、修改App.vue文件

<template>
  <router-view />
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

8、使用用户片段修改home.vue

<template>
  <div class="home">
    store: {{ $store.state.num }}
    {{ msg }}
  </div>
</template>
<script setup>
import usestore from "vuex";
const store = usestore;
let msg = "hello world!";
</script>