【前端框架】vue2.5+ts+elementui后台管理系统搭建全流程，保姆级教学！（一）项目搭建，布局

已于 2022-10-12 09:32:49 修改
阅读量2.2k 收藏 5
点赞数
分类专栏： 前端 vue.js elementui 文章标签： elementui vue.js 前端
于 2022-08-21 19:50:45 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41852789/article/details/126439387
版权
前端 同时被 3 个专栏收录
22 篇文章 1 订阅
订阅专栏
vue.js
10 篇文章 0 订阅
订阅专栏
elementui
4 篇文章 0 订阅
订阅专栏

本教学文章分三部分：

  • 第一篇：项目搭建、布局
  • 第二篇：用户登录、身份认证、用户权限
  • 第三篇：权限管理、商品管理、广告管理

一、使用vue-cli创建项目

$ vue create project-name

？ Please pick a preset:  					// 选择预设
	> Manually select features 				// 手动选择功能特性

？Check the features needed for your project:
	◯ Choose 								// Vue version 默认vue2 选择后可选vue3
	◉ Babel 								// 使用babel es6、ts转换
	◉ TypeScript
	◯ Progressive Web App (PWA) Support
 	◉ Router								// vue-router 管理路由
   	◉ Vuex									// vuex 管理共享数据容器
 	◉ CSS Pre-processors					// css预处理器
 	◉ Linter / Formatter					// 代码格式校验
	◯ Unit Testing							// 测试相关
 	◯ E2E Testing							// 测试相关

? Use class-style component syntax? (Y/n) y // 若使用ts,是否使用class风格的组件语法
? Use Babel alongside TypeScript(Y/n) y 	// 是否让babel和ts结合起来编译,使ts只负责转换类型相关的功能特性
? Use history mode for router?(Y/n) n 		// 是否使用history路由模式 history路由模式兼容不太好所以不选择,默认hash模式

? Pick a CSS pre-processor： 				// 选择对应的css预处理器
  > Sass/SCSS (with dart-sass) 				// 此次选择
  Sass/SCSS (with node-sass)   				//老版scss
  Less 
  Stylus 

？ Pick a linter / formatter config: 		 // 选择代码的格式校验
	ESLint with error prevention only 
 	ESLint + Airbnb config 
 	> ESLint + Standard config 				// 此次选择
 	ESLint + Prettier 
 	TSLint (deprecated) 

 ? Pick additional lint features:			 // 代码格式校验触发时机 
	◉ Lint on save							 // 保存文件时
	◉ Lint and fix on commit				 // 执行git commit提交时

											
？ Where do you prefer placing config for Babel, ESLint, etc.?
											 // Babel, ESLint等工具生成的配置信息如何存放
	> In dedicated config files				 // 存放到单独的配置文件中 此次选择
	In package.json							 // 全都写在package.json

？Save this as a preset for future projects? (y/N)  n
											 // 是否把刚才的配置选项保存起来

二、目录结构：

在这里插入图片描述

三、ts相关配置

1. typescript相关依赖

dependencies 依赖:
	vue-class-component 				// 提供使用 Class 语法写 Vue 组件
	vue-property-decorator		 		// 在 Class 语法基础之上提供了一些辅助装饰器

devDependencies 依赖:
	@typescript-eslint/eslint-plugin 	// 使用 ESLint 校验 TypeScript 代码
	@typescript-eslint/parser 			// 将 TypeScript 转为 AST 供 ESLint 校验使用
	@vue/cli-plugin-typescript 			// 使用 TypeScript + ts-loader + fork-ts-checker-webpack-plugin进行更快的类型检查.
	@vue/eslint-config-typescript 		// 兼容 ESLint 的 TypeScript 校验规则
	typescript 							// TypeScript编译器,提供类型校验和转换 JavaScript 功能

2. typescript配置文件

tsconfig.json

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

shims-tsx.d.ts

// 为 jsx 组件模板补充类型声明
import Vue, { VNode } from 'vue'

declare global {
  namespace JSX {
    // tslint:disable no-empty-interface
    interface Element extends VNode {}
    // tslint:disable no-empty-interface
    interface ElementClass extends Vue {}
    interface IntrinsicElements {
      [elem: string]: any
    }
  }
}

shims-vue.d.ts

// 主要用于 Typescrip 识别 .vue 文件模块
// Typescript 默认不支持导入.vue 模块,这个文件告诉 Typescript 导入.vue 文件模块都按 Vueconstructor<vue>类型识别处理
declare module '*.vue' {
  import Vue from 'vue'
  export default Vue
}

3. eslint配置

.eslintrc.js配置文件

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/essential',
    '@vue/standard',
    '@vue/typescript/recommended'
  ],
  parserOptions: {
    ecmaVersion: 2020
  },
  // 自定义校验规则
  rules: {
  	// 查阅eslint文档进行自己项目代码规则配置
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
  }
}

4. elementUI组件库

安装 element-ui

$ npm i element-ui -S

// 完整引入 
// mian.js文件中加入
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

5. 样式处理

src/styles
├── index.scss # 全局样式（在入口模块被加载生效）
├── mixin.scss # 公共mixin混入（可以把重复的样式封装为mixin混入到复用的地方）
├── reset.scss # 重置基础样式
└── variables.scss # 公共样式变量

index.scss

@import './variables.scss';

html {
  font-family: $font-family;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  // better Font Rendering
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  background-color: $body-bg;
}

/* custom element theme */
$--color-primary: $primary-color;
$--color-success: $success-color;
$--color-warning: $warning-color;
$--color-danger: $danger-color;
$--color-info: $info-color;
/* change font path, required */
$--font-path: '~element-ui/lib/theme-chalk/fonts';
/* import element default theme */
@import '~element-ui/packages/theme-chalk/src/index';

.el-pagination {
  color: #868e96;
}

.status {
  display: inline-block;
  cursor: pointer;
  width: .875rem;
  height: .875rem;
  vertical-align: middle;
  border-radius: 50%;

  &-primary {
    background: $--color-primary;
  }

  &-success {
    background: $--color-success;
  }

  &-warning {
    background: $--color-warning;
  }

  &-danger {
    background: $--color-danger;
  }

  &-info {
    background: $--color-info;
  }
}

variables.scss

$primary-color: #40586F;
$success-color: #51cf66;
$warning-color: #fcc419;
$danger-color: #ff6b6b;
$info-color: #868e96; // #22b8cf;

$body-bg: #E9EEF3; // #f5f5f9;

$sidebar-bg: #F8F9FB;
$navbar-bg: #F8F9FB;

$font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;


// 在vue.config.js中配置共享全局样式变量文件
scss: {
	additionalData: `@import "~@/variables.scss"`
}

6. 配置后端代理

常用跨域方法：CORS（需服务端配合）、proxy代理（此次使用）

// vue.config.js
module.exports = {
	devServer: {
		proxy: {
			'/api': {
				target: '', //转发地址
				changeOrigin: true // 把请求头中的host配置为targte
			}
		}
	}
}

6. 初始化路由组件

在views中创建项目相关页面
在这里插入图片描述

页面基本内容,首页为例

<template>
  <div class="home">
    首页
  </div>
</template>
<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  name: 'HomeIndex',
  data () {
    return {
      username: ''
    }
  },
  methods: {
  }
})
</script>
<style lang="scss" scoped>
</style>

src/router/index.ts

import Vue from 'vue'
import VueRouter, { RouteConfig } from 'vue-router'
import Layout from '@/layout/index.vue'
import store from '@/store'

Vue.use(VueRouter)

// 路由配置规则
const routes: Array<RouteConfig> = [
  {
    path: '/login',
    name: 'login',
    component: () => import(/* webpackChunkName: 'login' */ '@/views/login/index.vue')
  },
  {
    path: '/register',
    name: 'register',
    component: () => import(/* webpackChunkName: 'register' */ '@/views/login/register.vue')
  },
 {
    path: '', // 默认子路由
    name: 'home',
    component: () => import(/* webpackChunkName: 'home' */ '@/views/home/index.vue')
  },
  {
    path: '/role',
    name: 'role',
    component: () => import(/* webpackChunkName: 'login' */ '@/views/role/index.vue')
  },
  {
    path: '/menu',
    name: 'menu',
    component: () => import(/* webpackChunkName: 'menu' */ '@/views/menu/index.vue')
  },
  {
    path: '/resource',
    name: 'resource',
    component: () => import(/* webpackChunkName: 'resource' */ '@/views/resource/index.vue')
  },
  {
    path: '/product',
    name: 'product',
    component: () => import(/* webpackChunkName: 'course' */ '@/views/product/index.vue')
  },
  {
    path: '/user',
    name: 'user',
    component: () => import(/* webpackChunkName: 'user' */ '@/views/user/index.vue')
  },
  {
    path: '/advert',
    name: 'advert',
    component: () => import(/* webpackChunkName: 'advert' */ '@/views/advert/index.vue')
  },
  {
    path: '/advert-space',
    name: 'advert-space',
    component: () => import(/* webpackChunkName: 'advert-space' */ '@/views/advert-space/index.vue')
  },
  {
    path: '/menu/create',
    name: 'menu-create',
    component: () => import(/* webpackChunkName: 'menu-create' */ '@/views//menu/create.vue')
  }
  {
    path: '*',
    name: '404',
    component: () => import(/* webpackChunkName: '404' */ '@/views/error-page/404.vue')
  }
]

const router = new VueRouter({
  routes
})

export default router

7. layout，嵌套路由

后台管理系统一般大多页面都有很多公共部分，例如头部、侧边栏…，因此我们需要创建一个layout模版组件，使用嵌套路由，只切换页面内容部分

src/layout/compontens/app-header.vue

<template>
  <div class="header">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>活动管理</el-breadcrumb-item>
      <el-breadcrumb-item>活动列表</el-breadcrumb-item>
      <el-breadcrumb-item>活动详情</el-breadcrumb-item>
    </el-breadcrumb>
    <el-dropdown>
      <span class="el-dropdown-link">
        <el-avatar shape="square" :size="30" :src="@/assets/portrait.png"></el-avatar>
        <i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item>xxxx</el-dropdown-item>
        <el-dropdown-item divided>退出</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>
<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  name: 'AppHeader',
})
</script>
<style lang="scss" scoped>
.header {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .el-dropdown-link {
    display: flex;
    align-items: center
  }
}
</style>

src/layout/compontens/app-aside.vue

<template>
  <div class="aside">
    <div>
      <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      background-color="rgb(48, 65, 86)"
      text-color="#fff"
      active-text-color="#ffd04b"
      router
    >
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>权限管理</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="/role">
             <i class="el-icon-menu"></i>
             <span slot="title">角色管理</span>
          </el-menu-item>
           <el-menu-item index="/menu">
             <i class="el-icon-menu"></i>
             <span slot="title">菜单管理</span>
          </el-menu-item>
           <el-menu-item index="/resource">
             <i class="el-icon-menu"></i>
             <span slot="title">资源管理</span>
          </el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <el-menu-item index="/product">
        <i class="el-icon-menu"></i>
        <span slot="title">商品管理</span>
      </el-menu-item>
      <el-menu-item index="/user">
        <i class="el-icon-document"></i>
        <span slot="title">用户管理</span>
      </el-menu-item>
      <el-submenu index="4">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>广告管理</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="/advert">
             <i class="el-icon-menu"></i>
             <span slot="title">广告列表</span>
          </el-menu-item>
           <el-menu-item index="/advert-space">
             <i class="el-icon-menu"></i>
             <span slot="title">广告位列表</span>
          </el-menu-item>
        </el-menu-item-group>
      </el-submenu>
    </el-menu>
    </div>
  </div>
</template>
<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  name: 'AppAside',
  methods: {
    handleOpen (key: string, keyPath: string): void {
      console.log(key, keyPath)
    },
    handleClose (key: string, keyPath: string): void {
      console.log(key, keyPath)
    }
  }
})
</script>
<style lang="scss">
.aside {
  width: 201px;
}
.el-submenu__title:hover{
  background-color: #263445 !important;
}
.el-menu-item:hover {
  background: #001528!important;
}
</style>

src/layout/index.vue

<template>
  <el-container>
    <div class="page-left">
      <h1 class="logo">
        boat管理系统
      </h1>
      <el-aside>
        <app-aside/>
      </el-aside>
    </div>
    <el-container>
      <el-header>
        <app-header />
      </el-header>
      <el-main>
        <!-- 子路由出口 -->
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>

<script lang="ts">
import Vue from 'vue'
import appAside from './components/app-aside.vue'
import appHeader from './components/app-header.vue'

export default Vue.extend({
  name: 'layoutIndex',
  components: {
    appAside,
    appHeader
  }
})
</script>

<style lang="scss" scoped>
.el-container {
  max-height: 100vh;
  min-width: 980px;
}
.logo {
  padding: 20px 0;
  text-align: center;
  margin: 0;
  color: #fff;
  background: rgb(48, 65, 86);
  box-sizing: border-box;
}
.el-aside {
  flex: 1;
  background: rgb(48, 65, 86);
}
.el-header {
  background: #fff;
}
.el-main {
  background: #e9eef3;
}
.page-left {
  width: 200px;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
</style>

修改src/router/index.ts

import Vue from 'vue'
import VueRouter, { RouteConfig } from 'vue-router'
import Layout from '@/layout/index.vue'
import store from '@/store'

Vue.use(VueRouter)

// 路由配置规则
const routes: Array<RouteConfig> = [
  {
    path: '/login',
    name: 'login',
    component: () => import(/* webpackChunkName: 'login' */ '@/views/login/index.vue')
  },
  {
    path: '/register',
    name: 'register',
    component: () => import(/* webpackChunkName: 'register' */ '@/views/login/register.vue')
  },
  {
    path: '/',
    component: Layout,
    meta: {
      requiresAuth: true // 自定义数据
    },
    children: [
      {
        path: '', // 默认子路由
        name: 'home',
        component: () => import(/* webpackChunkName: 'home' */ '@/views/home/index.vue')
      },
      {
        path: '/role',
        name: 'role',
        component: () => import(/* webpackChunkName: 'login' */ '@/views/role/index.vue')
      },
      {
        path: '/menu',
        name: 'menu',
        component: () => import(/* webpackChunkName: 'menu' */ '@/views/menu/index.vue')
      },
      {
        path: '/resource',
        name: 'resource',
        component: () => import(/* webpackChunkName: 'resource' */ '@/views/resource/index.vue')
      },
      {
        path: '/product',
        name: 'product',
        component: () => import(/* webpackChunkName: 'course' */ '@/views/product/index.vue')
      },
      {
        path: '/user',
        name: 'user',
        component: () => import(/* webpackChunkName: 'user' */ '@/views/user/index.vue')
      },
      {
        path: '/advert',
        name: 'advert',
        component: () => import(/* webpackChunkName: 'advert' */ '@/views/advert/index.vue')
      },
      {
        path: '/advert-space',
        name: 'advert-space',
        component: () => import(/* webpackChunkName: 'advert-space' */ '@/views/advert-space/index.vue')
      },
      {
        path: '/menu/create',
        name: 'menu-create',
        component: () => import(/* webpackChunkName: 'menu-create' */ '@/views//menu/create.vue')
      }
    ]
  },
  {
    path: '*',
    name: '404',
    component: () => import(/* webpackChunkName: '404' */ '@/views/error-page/404.vue')
  }
]

const router = new VueRouter({
  routes
})

export default router

8、登录页面

登录页：src/views/login/index.vue

<template>
  <div class="login">
    <div class="login-main">
      <div class="login-left">
        <h1>boat管理系统</h1>
      </div>
      <el-form
        class="login-form"
        label-position="top"
        ref="form"
        :model="formData"
        label-width="80px"
        :rules="formRule"
      >
        <h2>登录</h2>
        <el-form-item label="手机号" prop="userName">
          <el-input v-model="formData.userName"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="pwd">
          <el-input v-model="formData.pwd" type="password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            class="login-btn"
            :loading="isLoginLoading"
            type="primary"
            @click="onSubmit"
          >
            登录
          </el-button>
        </el-form-item>
        <div class="login-link">
          <el-link class="login-link-item" @click="linkHandle('0')">立即注册</el-link>
          <el-link class="login-link-item"  @click="linkHandle('1')">忘记密码？</el-link>
        </div>
      </el-form>
      </div>
  </div>
</template>
<script lang="ts">
import Vue from 'vue'
import { Form } from 'element-ui'

export default Vue.extend({
  name: 'LoginIndex',
  data () {
    return {
      isLoginLoading: false,
      formData: {
        userName: '',
        pwd: ''
      },
      formRule: {
        userName: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { pattern: /^1\d{10}$/, message: '请输入正确的手机号', trigger: 'blur' }
        ],
        pwd: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 18, message: '长度在 6 到 18 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    linkHandle (target: string): void {
      if (target === '0') { // 注册
        this.$router.push({
          name: 'register'
        })
      } else { // 忘记密码

      }
    },
    async onSubmit () {
      try {
        // 1. 表单验证
        await (this.$refs.form as Form).validate()
        // 登录按钮 loading
        this.isLoginLoading = true

        // 2. 验证通过 -> 提交表单
        interface User {
          userName: string,
          pwd: string
        }
        const params:User = this.formData
        const { data } = await login(params)
        console.log(data)
        if (data.status !== 200) {
          this.$message.error(data.msg)
        } else {
        .	// 登录成功
        }
      } catch (err) {
        this.$message.error('登录失败')
        console.log(err)
      }
      this.isLoginLoading = false
    }
  }
})
</script>
<style lang="scss" scoped>
.login {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  padding: 100px 500px;
  .login-main {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    overflow: hidden;
    .login-left {
      align-items: center;
      padding: 170px 20px;
      width: 380px;
      height: 600px;
      background: url(../../assets/login.png);
      background-size: 100% 100%;
      color: #fff;
      box-sizing: border-box;
    }
    .login-form {
      flex:1;
      height: 600px;
      background: #fff;
      padding: 100px;
      border-radius: 5px;
      box-sizing: border-box;
    }
    .login-btn {
      width: 100%;
    }
    .login-link {
      display: flex;
      justify-content: flex-end;
      .login-link-item:nth-child(1) {
        margin-right: 10px;
      }
    }
  }
}
</style>

注册页：src/views/login/register.vue

<template>
  <div class="register">
     <h1>boat 管理系统</h1>
    <el-form
      class="register-form"
      label-position="top"
      ref="form"
      :model="formData"
      label-width="80px"
      :rules="formRule"
    >
      <h2>注册</h2>
      <el-form-item label="手机号" prop="userName">
        <el-input v-model="formData.userName"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="pwd">
        <el-input v-model="formData.pwd"></el-input>
      </el-form-item>
      <el-form-item>
         <el-button
          class="register-btn"
          :loading="isLoginLoading"
          type="primary"
          @click="onSubmit"
        >
          注册
        </el-button>
      </el-form-item>
      <div>
        <el-link @click="goLogin">&lt; 返回登陆</el-link>
      </div>
    </el-form>
  </div>
</template>
<script lang="ts">
import Vue from 'vue'
import { register } from '@/services/user'
import { Form } from 'element-ui'

export default Vue.extend({
  name: 'Register',
  data () {
    return {
      isLoginLoading: false,
      formData: {
        userName: '',
        pwd: ''
      },
      formRule: {
        userName: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { pattern: /^1\d{10}$/, message: '请输入正确的手机号', trigger: 'blur' }
        ],
        pwd: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 18, message: '长度在 6 到 18 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    goLogin () {
      this.$router.go(-1)
    },
    async onSubmit () {
      try {
        // 1. 表单验证
        await (this.$refs.form as Form).validate()
        // 登录按钮 loading
        this.isLoginLoading = true

        // 2. 验证通过 -> 提交表单
        const { data } = await register(this.formData)

        if (data !== 200) {
          this.$message.error(data.msg)
        } else {
          //    成功：跳转回原来页面或首页
          this.$router.push(this.$route.query.redirect as string || '/')
          this.$message.success('登录成功')
        }
      } catch (err) {
        this.$message.error('登录失败')
        console.log(err)
      }
      this.isLoginLoading = false
    }
  }
})
</script>
<style lang="scss" scoped>
.register {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .register-form {
    width: 300px;
    background: #fff;
    padding: 20px;
    border-radius: 5px;
  }
  .register-btn {
    width: 100%;
  }
}
</style>

最终效果图：
在这里插入图片描述

在这里插入图片描述

结尾

这篇内容主要是详细讲述如何从0搭建、完善vue项目结构，引入ui，完成了公共样式，路由，以及登录页面的简单功能开发。下一篇的内容会有，登录时身份认证、如何根据不同的用户权限，显示不同的菜单、功能。（可以看我之前的文章，试着自己用nodejs和mysql写数据接口，最终所有代码最后一篇会公开让大家参考）

如有问题或建议欢迎留言或私信我一起讨论👏

聪聪大聪明er
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于java数据实时推荐系统 前端：Vue + TypeScript + ElementUI，后端 Spring + Spark
06-29
基于java数据实时推荐系统。前端：Vue + TypeScript + ElementUI，后端 Spring + Spark
Vue + element-ui + TS封装全局搜索组件
三拾的博客
07-03 1399
通过以上步骤，我们成功地封装了一个全局搜索组件，并在Vue项目中使用了它。使用TypeScript可以使我们的代码更加健壮和易于维护。
vue3+element ui +ts 封装周范围选择器
最新发布
weixin_42418196的博客
06-19 473
封装element的周范围选择器
后台系统权限流程
qq_61233877的博客
12-19 1206
后台系统权限控制流程
web前端框架配置：vite+vue3+ts
invisibleI的博客
10-17 3016
vite+ts+vue3创建项目（不定时更新）
前端（六）——TypeScript在前端中的重要性与应用
杜永康的博客
07-13 2245
TypeScript 是一种开源的编程语言，它是 JavaScript 的一个超集。由于 TypeScript 扩展了 JavaScript，并添加了静态类型系统和其他特性，因此它可以被视为 JavaScript 的增强版。TypeScript 被设计用来解决 JavaScript 在大型应用开发方面的一些困难和限制。它通过引入静态类型、类、接口、模块化等特性，提供了更强大的工具和功能，有助于构建可维护、可扩展的应用程序。⭐⭐⭐TS的特点包括：静态类型检查。
VUE3+ELEMENTUI+TS开发步骤
qq_20110981的博客
03-06 523
1.打开vscode，使用终端命令。
基于vue3+TS构建的商城后台管理系统
02-23
综上所述，"基于vue3+TS构建的商城后台管理系统"涉及了现代前端开发的多个重要知识点，包括Vue3的新特性、TypeScript的安全性、Vuex的状态管理、路由控制、UI组件库的使用以及测试和部署策略。这些技术的综合运用，...
基于vite+vue3+pinia+element-plus+ts后台管理系统源码+项目说明.zip
04-12
基于vite+vue3+pinia+element-plus+ts后台管理系统源码+项目说明.zip 基于vite+vue3+pinia+element-plus+ts后台管理系统源码+项目说明.zip 基于vite+vue3+pinia+element-plus+ts后台管理系统源码+项目说明.zip 基于...
thinkphp6_vue+elementUi后台基础管理框架.zip
11-14
基础路由前后一起存储，用户登录后从后端获取菜单权限，再由前段生产路由。这样前端不用编写路由。缺点是添加菜单需要注意使用...运行vue前端运行出现echarts报错，请安装对应版本即可。我也是刚遇到。解决方法网上有。
Vue3 + Ts + ElementPlus + Vite2 从零搭建后台管理系统.zip
05-13
Vue3 + Ts + ElementPlus + Vite2 从零搭建后台管理系统 Vue3 + Ts + ElementPlus + Vite2 从零搭建后台管理系统 Vue3 + Ts + ElementPlus + Vite2 从零搭建后台管理系统 Vue3 + ...
vue3+ts+ElementUI后台管理
08-04
Vue3+TypeScript实战项目，用 ElementUI 搭建页面，完成登录、商品列表、用户列表、角色列表、退出登录。通过页面展示、搜索、分页、编辑等功能的实现练习怎么在vue3中使用TypeScript。 原博客地址：...
【小5聊】ElementUI-Vue3-TS项目简单创建
小5聊的博客
12-27 1030
vue2升级到vue3，不管任何框架，升级总有它改进的地方和原因，否则升级就毫无意义，技术变化日新月异，必须保持与时俱进，否则就很容易在技术的浪潮中被淘汰！ vue3相比以前版本，最大一个变化就是配置文件更加简洁
前端vue3+ts架构
yanby921005的博客
08-27 709
修改husky中pre-commit文件，npm test为npm run lint。.editorconfig文件如下，无论什么编辑器都按这个格式执行。package.json中配置一键执行全部文件代码格式化。一路enter，选择eslist+prettier。.prettierignore文件如下，忽略某些效验。.prettierrc文件如下，保存代码格式化。使用prettier格式化设置。继续enter，等待安装。vscode右键格式化文档。按步骤操作，项目启动成功。
【前端vue升级】vue2+js+elementUI升级为vue3+ts+elementUI plus
想想挺好啊
08-21 5367
vue2+js+elementUI升级为vue3+ts+elementUI plus
vue+element-ui通用后台管理系统（适合新手）
qq_43427354的博客
07-18 7847
使用vue2+element-ui+axios+js-cookie+less+echarts实现的一个简易的通用后台管理系统，具有很强的可扩展性，修改简单，只要有点前端基础就能看懂；
vue3 + vite + ts + element-ui搭建后台管理框架
学全栈、大前端方向，就找前端早间课
03-30 5004
前端路上 | 所知甚少，唯善学。各位小伙伴有什么疑问，欢迎留言探讨。— 关注我：前端路上不迷路 —
基于elementUI + TS实现多值输入框（类似邮件收件人输入框）
weixin_45737202的博客
10-19 2037
【代码】基于elementUI + TS实现多值输入框（类似邮件收件人输入框）
Ts声明ElementUI控件
编程菜鸟
12-25 628
初用Ts，有时候想获取三方控件不太会声明类型，记录一下使用InstanceType导入类型。
怎么搭建一个vue3+ts+pinia+element-plus后台管理系统框架
04-04
要搭建一个vue3 ts pinia element-plus后台管理系统框架，可以按照以下步骤进行： 1. 安装Node.js和Vue CLI Vue CLI是用于创建和管理Vue项目的官方工具，需要先安装Node.js和Vue CLI。 2. 创建基于Vue3和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值