手把手教你实现一个vue3+ts+nodeJS后台管理系统（一）

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第1天，点击查看活动详情

前言

本系列将通过前端vue + ts加后端nodeJS的技术框架从零实现一个后台管理系统，作者主业是web前端开发小白，刚刚学完vue3与nodeJS技术不久，因此本系统算是一个练手项目，参考了一些项目的写法，可能有一些做的不够好的地方，欢迎讨论！

技术栈

前端

• 语言：typeScript

• 前端框架：vue 3
• 脚手架：vite
• 路由：vue-router 4
• 状态管理：vuex 4
• CSS 预编译处理：sass
• 网络请求工具：axios
• 前端 UI 框架：element-plus 2

后端

• 语言：javaScript
• 运行环境：node.js 14
• 后端开发框架：express 4
• 数据库：mysql
• 缓存数据库：redis
• 数据库映射模块（ORM）：sequelize 5

前端项目构建

先附上本人的node及npm版本

前端项目

安装，选择vue、typeScript

npm create vite@latest
cd vue_ts-app
npm install
npm run dev

运行项目

npm run dev

输入网址出现这个页面说明创建成功

用vscode打开查看目录结构

项目就创建完成了，在vscode打开并在终端运行命令npm run dev

此时不会自动在浏览器打开，若需要得在package.json文件script字段的dev属性值后添加–open

安装系统所需依赖

1.将@作为src文件夹的别名

安装所需ts类型

npm install @types/node --save-dev

在vite.config.ts下添加如下配置

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { resolve } from 'path';
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src') // 路径别名
    },
    extensions: ['.js', '.json', '.ts', '.vue'] // 使用路径别名时想要省略的后缀名，可以自己 增减
  }
});

在tsconfig.json的compilerOptions配置项下添加如下配置属性

"baseUrl": ".",
// 用于设置解析非相对模块名称的基本目录，相对模块不会受到baseUrl的影响
"paths": {
  // 用于设置模块名到基于baseUrl的路径映射
  "@/*": ["src/*"]
}

2.安装所需依赖

• 一. vuex

• 1.安装

  npm install vuex@4.0.2
  

  2.创建store文件夹及配置文件index.ts，并导入以下配置

  import { createStore } from 'vuex';
  export default createStore({
    state: {
      count: 0
    },
    mutations: {
      SET_COUNT: (state, count) => {
        count += 1;
        state.count = count;
      }
    },
    actions: {},
    getters: {}
  });
  

  3.在main.ts中引入

  import { createApp } from 'vue';
  import './style.css';
  import store from '@/store/index';
  import App from '@/App.vue';
  ​
  const app = createApp(App);
  app.use(store).mount('#app');
  

  4.创建测试页面并测试（test.vue）

  <template>
    <div>
      count:{{ count }}
      <button @click="addCount">count++</button>
    </div>
  </template>
  ​
  <script setup lang="ts">
  import { ref } from 'vue';
  import { useStore } from 'vuex';
  // 导入store
  const store = useStore()
  // 将count赋值
  const count = ref(store.state.count)
  // count增加方法
  function addCount() {
    count.value++
    store.commit('SET_COUNT', count.value)
  }
  </script>
  ​
  <style scoped>
  ​
  </style>
  

  App.vue

  <template>
    <Test />
  </template>
  <script setup lang="ts">
  import Test from './components/test.vue';
  ​
  </script>
  ​
  <style scoped>
  ​
  </style>
  

  可以看到功能没问题

• 二. vue-router

• 1.安装

  npm install vue-router@4
  

  2.创建router文件夹添加配置文件

  import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router';
  ​
  const routes: RouteRecordRaw[] = [
    {
      path: '/',
      name: 'Test',
      component: () => import('@/components/test.vue') // 注意这里要带上 文件后缀.vue
    }
  ];
  ​
  const router = createRouter({
    history: createWebHashHistory(),
    routes
  });
  ​
  export default router;
  

  3.在main.ts文件中导入

  import router from '@/router/index'
  // 在app后添加
  app.use(router)
  

  4.将App.vue修改为路由视图

  <template>
    <router-view></router-view>
  </template>
  <script setup lang="ts">
  ​
  </script>
  ​
  <style scoped>
  ​
  </style>
  ​
  

  5.测试发现url改变

• 三. element-plus

• 1.安装

  npm install element-plus@2 --save
  npm install -D unplugin-vue-components unplugin-auto-import
  

  2.在vite.config.ts添加如下配置

  // vite.config.ts
  import { defineConfig } from 'vite'
  import vue from '@vitejs/plugin-vue';
  import { resolve } from 'path';
  import AutoImport from 'unplugin-auto-import/vite'
  import Components from 'unplugin-vue-components/vite'
  import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
  ​
  export default defineConfig({
    // ...
    plugins: [
      // ...
      AutoImport({
        resolvers: [ElementPlusResolver()],
      }),
      Components({
        resolvers: [ElementPlusResolver()],
      }),
    ],
    // ...
  })
  

  3.volor支持

  如果你使用volar，可在tsconfig.json 中通过 compilerOptions.type 指定全局组件类型

  // tsconfig.json
  {
    "compilerOptions": {
      // ...
      "types": ["element-plus/global"]
    }
  }
  

  4.测试

  将test.vue的button修改

  <ElButton @click="addCount">count++</ElButton>
  

• 四.axios封装

• 1.安装

  npm install axios
  

  2.添加utils文件夹并添加http.ts配置文件

  import Axios, { AxiosError, AxiosRequestConfig, AxiosResponse } from 'axios';
  ​
  const BASE_URL = ''; //请求接口url 如果不配置 则默认访问链接地址
  const TIME_OUT = 20000; // 接口超时时间
  ​
  const instance = Axios.create({
    baseURL: BASE_URL,
    timeout: TIME_OUT
  });
  ​
  // 添加请求拦截器
  instance.interceptors.request.use(
    (config: AxiosRequestConfig) => {
      return config;
    },
    (error) => {
      return Promise.reject(error);
    }
  );
  ​
  // 添加响应拦截器
  instance.interceptors.response.use(
    (response: AxiosResponse) => {
      console.log(response);
      return response.data;
    },
    (error: AxiosError) => {
      return Promise.reject(error);
    }
  );
  ​
  export default instance;
  

  3.在utils文件夹下创建api文件夹备用

前端项目的初始化到这里就结束了

参考

一个基于vite构建的vue3+pinia+ts+elementUI plus的初始化开箱即用的项目模版