vue3 + Vite 从0到1搭建框架

本文宗旨，尽量简短！但又步骤完整。

主要功能：vue-router, ElementPlus, Pinia, 封装axios

虽然小步骤没有编号，从上往下按顺序看就行。

目录

1. 使用vite构建项目

1.1 执行命令

 1.2 选择Vue 回车

1.3 安装依赖，运行项目

 1.4 构建成功，查看页面​编辑

2. vue-router

2.1 安装

2.2 使用

3. ElementPlus

3.1 安装

3.2 使用

4.Pinia

4.1 安装

4.2 使用

5.axios

5.1 安装

5.2 封装

 6. 打包优化

6.1请看博文

6.2 优化结果（1.17MB-168KB）

---

1. 使用vite构建项目

1.1 执行命令

npm create vite@latest

 1.2 选择Vue 回车

1.3 安装依赖，运行项目

cd vue-vite

npm install
npm run dev

 1.4 构建成功，查看页面

2. vue-router

2.1 安装

npm install vue-router

2.2 使用

在src目录下新建view文件夹，并添加两个文件page1.vue、page2.vue;

在src目录下新建router文件夹，并添加index.js

此时src目录文件结构

page1.vue

<template>
  <img src="/vite.svg" class="logo" alt="Vite logo" />
</template>

page2.vue 

<template>
  <img src="/vue.svg" class="logo vue" alt="Vue logo" />
</template>

在vite.config.js设置别名

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from "path";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "src"),
    }
  },
})

  src/router/index.js 使用别名“@”导入vue文件

import { createRouter, createWebHistory } from "vue-router";
import page1 from "@/view/page1.vue";
import page2 from "@/view/page2.vue";

const routes = [
  { path: "/", component: page1 },
  { path: "/page2", component: page2 },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

main.js 引入router

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from '@/router'

const app = createApp(App);

app.use(router)
.mount('#app')

app.vue

<template>
  <router-link to="/">page1</router-link><br/>
  <router-link to="/page2">page2</router-link>
  <div class="page-container">
    <router-view/>
  </div>
</template>

<script setup>
</script>

<style scoped>
img{
  width:300px;
  height: 300px;
}
</style>

3. ElementPlus

按需导入组件和css查看Vite 打包优化-CSDN博客https://blog.csdn.net/sinat_35607202/article/details/135528001

3.1 安装

npm install element-plus

3.2 使用

在main.js中导入

import { createApp } from 'vue'
import './style.css'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
import router from '@/router'

const app = createApp(App);

app.use(ElementPlus)   
.use(router)
.mount('#app')

在页面使用

<el-button type="primary">Element Plus Button</el-button>

4.Pinia

共享数据管理，vuex简化版,功能更加强大。

主要有state、getters 和 actions 三个模块，这里仅展示state的定义及使用。

详情可看Vue3 的状态管理库（Pinia）_vue3 pinia-CSDN博客https://blog.csdn.net/weixin_62897746/article/details/129124364

4.1 安装

npm install pinia

4.2 使用

在 src 文件下创建一个 store 文件夹，并添加 store.js 文件。

import {defineStore} from "pinia";
import {ref} from "vue";

export const useUserStore = defineStore('user', () => {
    const pinia = ref('pinia使用')
    
    return { pinia } // 将数据暴露出去，共享给需要的组件
})

 在main.js中导入

import { createApp } from 'vue'
import './style.css'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
import router from '@/router'
// 引入 createPinia 函数
import { createPinia } from 'pinia'

const app = createApp(App);

app.use(ElementPlus)   
.use(router)
.use(createPinia())
.mount('#app')

 page1.vue组件中使用

<template>
  <div class="page1">
    <div>{{ user_store.pinia }}</div>
    <img src="/vite.svg" class="logo" alt="Vite logo" />
  </div>
</template>

<script setup>
import { useUserStore } from "@/store/store.js";

// 获取 UserStore 实例
const user_store = useUserStore();
</script>

<style scoped>
.page1 {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #eee;
  box-shadow: #aaa 0px 0px 5px;
  margin-bottom: 5px;
  width:300px;
  height: 300px;
}
</style>

5.axios

5.1 安装

npm install axios

5.2 封装

在src目录下新建request 文件夹，再添加文件，如图

request/http.js

import axios from 'axios' // 引入axios
// import router from 'vue-router'

var host = "/api";
var isProd = process.env.NODE_ENV === 'production'
if(isProd) {
    host = window.globalParameter.host;
}
// 创建axios实例
const instance =axios.create({
    // `baseURL` 将自动加在 `url` 前面
    baseURL: host,
    // 设置请求超时
    timeout: 60000
})
// 设置post请求头
instance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
// instance.defaults.headers.post['Content-Type'] = 'application/json'
/** 
 * 请求拦截器 
 * 每次请求前，如果存在token则在请求头中携带token 
 */ 
instance.interceptors.request.use(
    config => {
        const token = '123'
        token && (config.headers.Authorization = token)
        return config
    },    
    error => Promise.error(error)
)
// 响应拦截器
instance.interceptors.response.use (
    // 请求成功
    res => res.status === 200? Promise.resolve(res) : Promise.reject(res),
    // 请求失败
    error => {
        console.log(error)
        const {response} = error
        errorHandle(response.status, response.data.message)
        return Promise.reject(response)
    }
)
/** 
 * 跳转登录页
 * 携带当前页面路由，以期在登录页面完成登录后返回当前页面
 */
const toLogin = () => {
    router.replace({
        path: '/login',        
        query: {
            redirect: router.currentRoute.fullPath
        }
    });
}
/** 
 * 请求失败后的错误统一处理 
 * @param {Number} status 请求失败的状态码
 */
const errorHandle = (status, other) => {
    // 状态码判断
    switch (status) {
        // 401: 未登录状态，跳转登录页
        case 401:
            toLogin()
            break;
        // 403 token过期
        // 清除token并跳转登录页
        case 403:
            alert('登录过期，请重新登录');
            localStorage.removeItem('token')
            setTimeout(() => {
                toLogin();
            }, 1000);
            break;
        // 404请求不存在
        case 404:
            // alert('请求的资源不存在'); 
            break;
        default:
            console.log(other);   
    }
}

export default instance

request/index.js

import api1 from './apimodule/api1.js'

export default {
    api1
}

request/apimodule/api1.js

import http from "../http";
// import qs from "qs"; // 引入qs模块，用来序列化post类型的数据

export default {
  getData_get(url, params) {
    return http.get(url, params);
  },
  
}

api 全局挂载（main.js）

import API from '@/request'

import { createApp } from 'vue'
import './style.css'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
import router from '@/router'
import API from '@/request'
// 引入 createPinia 函数
import { createPinia } from 'pinia'

const app = createApp(App);

// vue3的挂载方式（一个用于注册能够被应用内所有组件实例访问到的全局属性的对象。）
app.config.globalProperties.$API = API;

app.use(ElementPlus)   
.use(router)
.use(createPinia())
.mount('#app')

在页面使用

首先配置vite-server

vite.config.js

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import path from "path";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "src"),
    },
  },
  server: {
    host: "0.0.0.0",
    proxy: {
      "/api": {
        target: "http://localhost:5173/",
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, "/public/mock/"),
      },
    },
  },
});

在public目录下新建mock文件夹，并添加mock.json

 调用api1模块下的getData_get接口

import { onMounted, getCurrentInstance } from "vue";

onMounted(() => {
  const $API = getCurrentInstance().appContext.config.globalProperties.$API;
  $API.api1.getData_get('/mock.json', {}).then((res) => {
    console.log(res.data);
  });
});

请求成功，返回数据

 6. 打包优化

6.1请看博文

Vite 打包优化-CSDN博客https://blog.csdn.net/sinat_35607202/article/details/135528001

6.2 优化结果（1.17MB-168KB）

优化前

优化后

省略：第4步 图片自动导入；第5步 图片压缩；第6步文件压缩；