手把手教你实现一个vue3+ts+nodeJS后台管理系统
前言
本系列将通过前端vue + ts加后端nodeJS的技术框架从零实现一个后台管理系统，作者主业是web前端开发小白，刚刚学完vue3与nodeJS技术不久，因此本系统算是一个练手项目，参考了一些项目的写法，可能有一些做的不够好的地方，欢迎讨论！
技术栈
前端
语言：
typeScript
前端框架：
vue 3脚手架：
vite路由：
vue-router 4状态管理：
vuex 4CSS 预编译处理：
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文件夹备用
前端项目的初始化到这里就结束了
作者：龙二不2
链接：https://juejin.cn/post/7168757187597041672