• initialization

// Use NPM
npm init [email protected] vue3-ts-frontend --template vue-ts

// Use yarn
yarn create vite vue3-ts-frontend --template vue-ts

• Add dependence

npm install ant-design-vue -S
npm install vue-router -S
npm install vue-i18n -S
npm install pinia -S
npm install axios -S

• Configuration

1. Modificationtsconfig.json, new increasecompilerOptions.baseUrl、compilerOptions.paths

{
    
  "compilerOptions": {
    
    "target": "esnext",
    "useDefineForClassFields": true,
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "lib": ["esnext", "dom"],
    "skipLibCheck": true,
    "baseUrl": "./", // New increase
    "paths": {
     // new increase
      "@": ["./src"],
      "@/*": ["./src/*"],
    }
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{
     "path": "./tsconfig.node.json" }]
}

2. Modificationvite.config.ts, new increaseresolve.alias、server

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

// https://vitejs.dev/config/
export default defineConfig({
    
  plugins: [vue()],
  resolve: {
     // New
    // Set aliases
    alias: {
    
      '@': resolve(__dirname, './src'),
    },
  },
  server: {
     // New
    port: 8080, // Starting port
    hmr: {
    
      host: '127.0.0.1',
      port: 8080,
    },
    // Set https proxy
    proxy: {
    
      '/api': {
    
        target: 'http://localhost:3000', // Back -end API address
        changeOrigin: true,
        rewrite: (path: string) => path.replace(/^\/api/, ''),
      },
    },
  },
});

Introduced and used in main.ts

import {
     createApp } from 'vue';
import Antd from 'ant-design-vue';
import App from './App.vue';
import 'ant-design-vue/dist/antd.css';

const app = createApp(App);
app.use(Antd);
app.mount('#app');

1. Created under SRCrouter/index.tsfile

import {
     createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';

const routes: Array<RouteRecordRaw> = [
  {
    
    path: '/login',
    name: 'login',
    meta: {
    
      title: 'Login',
      keepAlive: true,
      requireAuth: false
    },
    component: () => import('@/pages/login/index.vue'),
  },
  {
    
    path: '/',
    name: 'home',
    meta: {
    
      title: 'Home,
      keepAlive: true,
      requireAuth: true
    },
    component: () => import('@/pages/home/index.vue'),
  },
];

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

2. Introduced and used in main.ts

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

const app = createApp(App);
app.use(router);
app.mount('#app');

3. Modify the app.vue

<template>
  <div id="app">
    <router-view />
  </div>
</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>

1. Created under SRClocales/index.ts、locales/zh-CN.ts、locales/en-US.tsfile

index.ts

import {
     createI18n } from 'vue-i18n/index';
import zh from './zh-CN';
import en from './en-US';

const defaultLanguage = 'zh-CN';
const i18n = createI18n({
    
  locale: defaultLanguage,
  silentTranslationWarn: true,
  messages: {
     zh, en },
});

export default i18n;

zh-CN.ts

export default {
    
  home: {
    
    title: 'Home,
    test: 'Test',
  },
};

en-US.ts

export default {
    
  home: {
    
    title: 'Home',
    test: 'Test',
  },
};

2. Introduced and used in main.ts

import {
     createApp } from 'vue';
import App from './App.vue';
import i18n from '@/locales';

const app = createApp(App);
app.use(i18n);
app.mount('#app');

3. Use in src/pages/home/index.vue

<template>
  <div>
    <h1 v-text="$t('home.title')" />
    <div v-text="test" />
  </div>
</template>

<script setup lang="ts">
import {
     ref } from 'vue';
import {
     useI18n } from 'vue-i18n';

const {
     t } = useI18n();

const test = ref(t('home.test'));
</script>

1. Created under SRCstore/index.ts、store/user.tsfile

index.ts

import {
     createPinia } from 'pinia';

const store = createPinia();
export default store;

user.ts

import {
     defineStore } from 'pinia';

export const useUserStore = defineStore({
    
  id: 'user', // must be filled and unique
  state: () => {
    
    return {
    
      name: 'TFBoys',
    };
  },
  actions: {
    
    updateName(name: string) {
    
      this.name = name;
    },
  },
});

2. Introduced and used in main.ts

import {
     createApp } from 'vue';
import App from './App.vue';
import store from './store';

const app = createApp(App);
app.use(store);
app.mount('#app');

3. Use in src/pages/home/index.vue

<template>
  <div>
    <div v-text="userStore.name" />
    <a-button v-text="$t('home.updateState')" @click="onUpdateName" />
  </div>
</template>

<script setup lang="ts">
import {
     useUserStore } from '@/store/user';

const userStore = useUserStore();
const onUpdateName = () => {
    
  // Modify State through Actions
  userStore.updateName('Yang Yang');
}
</script>

1. Created under SRCutils/request.tsfile

import axios, {
     AxiosResponse, AxiosRequestConfig } from 'axios';

const service = axios.create({
    
  // baseURL: 'http://localhost:3000',
  withCredentials: true,
});

// Request interceptors
service.interceptors.request.use(
   (config: AxiosRequestConfig) => {
    
    // do something
    return config;
   },
   (error: any) => {
    
    Promise.reject(error);
   }
);

// Response interceptors
service.interceptors.response.use(
  async (response: AxiosResponse) => {
    
    // do something
    return response.data;
   },
   (error: any) => {
    
    // do something
    return Promise.reject(error);
   }
);

export default service;

2. Created under SRCengine/index.ts、engine/Users.tsfile

index.ts

import Users from './Users';

export {
    
  Users,
};

Users.ts

import request from '@/utils/request';

export default class Users {
    
  static fetchAll = () => request.get(`/api/users/list`);
};

3. Use in src/pages/home/index.vue

<template>
  <div>
    <div v-for="user in userList" :key="user.id">
      {
    {
     user.username }}
    </div>
  </div>
</template>

<script setup lang="ts">
import {
     ref } from 'vue';
import {
     Users } from '@/engine';

const userList = ref([]);
const init = async() => {
    
  const {
     data } = await Users.fetchAll();
  userList.value = data;
};

init();
</script>

For the construction of the background
nodejs + Express to build a simple background service