随笔- 45 文章- 5 评论- 2 阅读- 28294

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、element-plus、axios......

npm install vue-router@4 -S
npm install vuex@next -S
npm install axios -save
npm install element-plus -save
npm install @element-plus/icons-vue
npm install sass
npm install echarts
npm install jwt-decode --save

npm install qs
npm install js-md5

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

//element-plus采用按需引入，需要安装组件
npm install -D unplugin-vue-components unplugin-auto-import

//vue3+vite ＜script setup＞配置name属性
npm install vite-plugin-vue-setup-extend -D

5、配置根目录下的vite.config.js，（红色）配置按需引入element-plus，（棕色）配置＜script setup＞的name属性

import { defineConfig } from "vite";

import vue from "@vitejs/plugin-vue";

import AutoImport from "unplugin-auto-import/vite";

import Components from "unplugin-vue-components/vite";

import { ElementPlusResolver } from "unplugin-vue-components/resolvers";

import vueSetupExtend from "vite-plugin-vue-setup-extend";

export default defineConfig({

plugins: [

vue(),

AutoImport({

resolvers: [ElementPlusResolver()],

}),

Components({

resolvers: [ElementPlusResolver()],

}),

vueSetupExtend(),

});

5、src目录下新建api、router、store、utils、views（含子文件夹）等文件夹，并创建js及vue文件，

src文件链接：https://files.cnblogs.com/files/shiliumu/src.rar?t=1665903988

|-- src
  |-- api
  |-- assets
  |-- components
    |-- layoutAside.vue
    |-- layoutHeader.vue
    |-- layoutTab.vue
  |-- router
    |-- index.js
  |-- store
    |-- index.js
  |-- utils
    |-- request.js
  |-- views
    |-- sale
      |-- salebill
        |-- index.vue
    |-- system
      |-- user
        |-- index.vue
      |-- role
        |-- index.vue
    |-- home.vue
    |-- layout.vue
    |-- login.vue
  |-- App.vue
  |-- main.js

router\index.js

import { createRouter, createWebHashHistory } from "vue-router";
// 创建路由对象
const routes = [
  {
    path: "/",
    name: "home",
    component: () => import("../views/layout.vue"),
    redirect: "/home",
    children: [
      {
        path: "/home",
        name: "home",
        component: () => import("../views/home.vue"),
      },
      {
        path: "/user",
        name: "user",
        component: () => import("../views/system/user/index.vue"),
      },
      {
        path: "/role",
        name: "role",
        component: () => import("../views/system/role/index.vue"),
      },
      {
        path: "/salebill",
        name: "salebill",
        component: () => import("../views/sale/salebill/index.vue"),
      },
    ],
  },
  {
    path: "/login",
    name: "login",
    component: () => import("../views/login.vue"),
  },
];
const router = createRouter({
  // createWebHashHistory hash 路由
  // createWebHistory history 路由
  // createMemoryHistory 带缓存 history 路由
  history: createWebHashHistory(),
  routes,
});

export default router;

router\index.js

store\index.js

import { createStore } from "vuex";

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

store\index.js

utils\request.js

import axios from "axios";
import qs from "qs";

// 创建axios实力对象
const instance = axios.create({
  // 设置请求根路径
  baseURL: "http://127.0.0.1:5083/api/",
  // 请求超时时间
  timeout: 5000,
});
// 添加请求拦截器
instance.interceptors.request.use(
  (config) => {
    // 发送请求之前做什么
    config.headers.Authorization = "Bearer " + sessionStorage.getItem("token");
    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);
};

// 导出一个post方法
export const $delete = (url, params) => {
  return instance({
    method: "POST",
    params: params,
    url,
  });
};
// 导出一个delete方法，通过key删除。
// 请求体编码:默认情况下，axios将 JavaScript 对象序列化为 JSON 。
// 要以application/x-www-form-urlencoded格式发送数据，
export const $deleteKey = (url, params) => {
  return instance({
    method: "POST",
    headers: { "content-type": "application/x-www-form-urlencoded" },
    data: qs.stringify(params), //
    url,
  });
};

// 导出一个post方法
export const $exportExcel = (url, params, name) => {
  return instance({
    method: "GET",
    url,
    params: params,
    responseType: "blob",
  })
    .then((res) => {
      let blob = new Blob([res.data], {
        type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
      });
      let filename = name + ".xlsx";
      // 将blob对象转为一个URL
      let url = window.URL.createObjectURL(blob);
      // 创建一个a标签
      var tempLink = document.createElement("a");
      // 隐藏a标签
      tempLink.style.display = "none";
      // 设置a标签的href属性为blob对象转化的URL
      tempLink.href = url;
      // 给a标签添加下载属性
      tempLink.setAttribute("download", filename);
      if (typeof tempLink.download === "undefined") {
        tempLink.setAttribute("target", "_blank");
      }
      // 将a标签添加到body当中
      document.body.appendChild(tempLink);
      // 启动下载
      tempLink.click();
      // 下载完毕删除a标签
      document.body.removeChild(tempLink);
      window.URL.revokeObjectURL(url);
      // window.location.href = url;
    })
    .catch((err) => {
      console.log("err");
    });
};

// 导出设置请求头信息方法
export const $setHeader = (key, value) => {
  instance.defaults.headers.common[key] = value;
};

// 将axios对象导出
export default instance;

utils\request.js

utils\msg.js

// 导入消息提示、消息弹出框
import { ElMessage, ElMessageBox } from "element-plus";
// 消息提示框
export const $msg = (
  message,
  type = "success",
  duration = 1500,
  showClose = true
) => {
  ElMessage({
    message,
    type,
    duration,
  });
};

// 确认框
export const $confirm = (message, title = "提示", type = "warning") => {
  return new Promise((resolve, reject) => {
    ElMessageBox.confirm(message, title, {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type,
    })
      .then(() => {
        resolve();
      })
      .catch(() => {
        // reject()
      });
  });
};

utils\msg.js

views\home.vue，其他vue文件补充基础代码

<template>
  <div class="container">我是home</div>
</template>

<script setup name="home"></script>

<style lang="scss" scoped></style>

views\home.vue

6、配置main.js文件

import { createApp } from "vue";
import App from "./App.vue"; // 引入App根组件
import router from "./router"; // 引入路由
import store from "./store"; // 引入状态管理
import * as ElementPlusIconsVue from "@element-plus/icons-vue"; //引入所有icons图标并进行全局注册
import "element-plus/theme-chalk/el-loading.css"; //引入Elloading的css样式文件
import "element-plus/theme-chalk/el-message.css"; //引入Elmessagecss样式文件
import "element-plus/theme-chalk/el-message-box.css"; //引入ElmessageBox的css样式文件
const app = createApp(App);
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component);
}
app.use(store).use(router).mount("#app");

7、修改App.vue文件

<template>
  <router-view />
</template>
<style>
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#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>

App.vue

8、修改views/layout.vue

<template>
  <el-container>
    <el-aside width="200px"> Aside </el-aside>
    <el-container>
      <el-header>Header</el-header>
      <el-main>
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup></script>

<style lang="scss" scoped></style>