Template -- Vue3

Vue3

版本

Node 21.6.0
Npm 10.2.4

项目

创建

npm init vite 项目名称

vue
js
npm i
npm run dev

依赖

npm i element-plus          # UI
npm i axios                 # 网络
npm i vue-router@4          # 路由
npm i vuex@next             # 状态管理npm i sass -D               # sass
npm i vite-plugin-html -D   # html

环境区分

package.json

"scripts": {"dev": "vite --mode test","dev1": "vite --mode production","build": "vite build --mode test","build1": "vite build --mode production"
}

package.json 同级
.env.test

NODE_ENV = "test"
VITE_APP_TITLE = "测试"
VITE_APP_BASE_API = "test"

.env.production

NODE_ENV = "production"
VITE_APP_TITLE = "生产"
VITE_APP_BASE_API = "production"

vite.config.js

import { defineConfig, loadEnv } from "vite";
import vue from "@vitejs/plugin-vue";
import { createHtmlPlugin } from "vite-plugin-html";
import { resolve } from "path";export default defineConfig(({ mode, command }) => {const env = loadEnv(mode, process.cwd(), ""); return {plugins: [vue(),createHtmlPlugin({inject: {data: {title: env.VITE_APP_TITLE,},},}),],resolve: {alias: {"@": resolve(__dirname, "src"), // 设置 `@` 指向 `src` 目录},},base: "./", // 设置打包路径server: {port: 4000, // 设置服务启动端口号open: true, // 设置服务启动时是否自动打开浏览器cors: true, // 允许跨域// 设置代理，根据我们项目实际情况配置// proxy: {//   '/api': {//     target: 'http://xxx.xxx.xxx.xxx:8000',//     changeOrigin: true,//     secure: false,//     rewrite: (path) => path.replace('/api/', '/')//   }// }},};
});

index.html

<title><%= title %></title>

axios

src/http/index.js

import axios from "axios";let service = axios.create({// baseURL: "https://cnodejs.org/api/v1", //相同绝对路径baseURL:import.meta.env.VITE_APP_BASE_API,timeout: 100000, //超过这么多时间，则请求终止headers: {//请求头携带数据的格式"Content-Type": "application/json;charset=UTF-8",// "Content-Type": "application/x-www-form-urlencoded;charset=utf-8",},
});
// 添加请求拦截器（Interceptors）
service.interceptors.request.use(function (config) {// 发送请求之前做写什么let token = localStorage.getItem("token");// 如果有if (token) {// 放在请求头（token跟后端沟通，他需要什么该成什么就可以了）config.headers.authorization = token;}return config;},function (error) {// 请求错误的时候做些什么return Promise.reject(error);}
);
// 添加响应拦截器
service.interceptors.response.use(function (response) {// 对响应数据做点什么return response.data;},function (error) {// 对响应错误做点什么return Promise.reject(error);}
);export default service;

src/http/api.js

import request from "./index";export async function Ceshi(params) {return request({url: "/topics",method: "GET",params,});}export async function Ceshi2(data) {return request({url: "/Storage/GetStorageLack",method: "POST",data,});}

使用

<script setup>
import {Ceshi} from '@/http/api.js'
var a = await Ceshi()
console.log(a);
</script>

store

src/store/index.js

import { createStore } from "vuex";const defaultState = {count: 0,
};// Create a new store instance.
export default createStore({state() {return defaultState;}
});

使用

import {useStore} from 'vuex'
console.log(useStore().state.count);

router

src/router/index.js

import { createRouter, createWebHashHistory } from "vue-router";const routes = [{path: "/",name: "Home",component: () => import("@/views/a.vue"), // 懒加载组件},
];const router = createRouter({history: createWebHashHistory(),routes,
});export default router;

使用

// suspense 配合异步使用
<suspense><router-view></router-view>
</suspense>

main.js

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import store from './store/index'
import router from './router/index'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'createApp(App).use(router).use(store).use(ElementPlus).mount('#app')