Vue+SpringBoot后台管理系统:Vue3+TypeScript项目搭建(一)

bash 复制代码
写在开始:一个搬砖程序员的随缘记录

文章目录

一、Node安装

查看Note版本

bash 复制代码
node -v

查看npm版本

bash 复制代码
npm -v

然后将npm升级至最新版本

bash 复制代码
npm -g install npm

将npm下载源换至http://registry.npm.taobao.org

bash 复制代码
npm config set registry http://registry.npm.taobao.org

可以在后续的npm下载提高下载速度

二、Vue CLI安装

安装vue cli

bash 复制代码
npm install -g vue-cli

三、相关的版本

node版本v18.16.1

vue-cli版本v5.0.8

四、创建Vue3+TypeScript项目

创建项目命令

bash 复制代码
vue create vue_typescript_elementplus_demo

vue_typescript_elementplus_demo是项目名,可以自定义

选择Manually select features ,进行自定义

然后选择TypeScript和Router,空格选择和不选,选好了回车确定进入下一步

这里选择3.x

下一步按图上进行选择

然后就等待项目创建结束,出现如下显示就创建成功了

现在启动项目

进入项目目录

bash 复制代码
cd vue_typescript_elementplus_demo

启动项目

bash 复制代码
npm run serve

浏览器访问:http://localhost:8080/

Vue+TypeScript项目就创建好了

五、Vue项目初始化

前端专业IDEA是vscode,可以自行下载配置,我是因为是工作主要以Java为主,所以我用的IntelliJ IDEA进行开发的

用项目结构

我们现在从零开始开发,去掉一些创建项目自带的一些演示的页面的资源

去掉assets下的所有文件

去掉components下的所有文件

去掉views下的所有文件

如果删除文件的时候提示:

这是是文件权限不够,进入项目文件的上面一个层级,执行下面的命令

bash 复制代码
sudo chmod -R 777 ./vue_typescript_elementplus_demo/

然后再进行删除

修改App.vue文件

bash 复制代码
<template>
  <div id="app">
    <router-view />
  </div>
</template>

<style>
html,
body,
#app {
  width: 100%;
  height: 100%;
}
</style>

在src/views下创建Login.vue

bash 复制代码
<template>
  <div>这是登录页面</div>
</template>

<script>
export default {
  name: 'Login'
}
</script>
<style scoped></style>

修改src/router下的index.ts

bash 复制代码
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'Login',
    component: () => import('../views/Login.vue')
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

六、项目启动

然后重启下项目,看下效果

这里一个简单的vue项目就搭建完成了。

后续章节会介绍使用element-plus美化页面和axios进行接口的请求

Over

相关推荐
摇滚侠2 小时前
Spring Boot 3零基础教程,WEB 开发 静态资源默认配置 笔记27
spring boot·笔记·后端
Y42582 小时前
本地多语言切换具体操作代码
前端·javascript·vue.js
wb043072013 小时前
性能优化实战:基于方法执行监控与AI调用链分析
java·人工智能·spring boot·语言模型·性能优化
不想上班只想要钱6 小时前
vue3+vite创建的项目,运行后没有 Network地址
前端·javascript·vue.js
Chen-Edward6 小时前
有了Spring为什么还有要Spring Boot?
java·spring boot·spring
magic334165636 小时前
Springboot整合MinIO文件服务(windows版本)
windows·spring boot·后端·minio·文件对象存储
岁月宁静6 小时前
在富文本编辑器中封装实用的 AI 写作助手功能
前端·vue.js·人工智能
小学鸡!7 小时前
Spring Boot实现日志链路追踪
java·spring boot·后端
番茄Salad7 小时前
Spring Boot临时解决循环依赖注入问题
java·spring boot·spring cloud
533_9 小时前
[vue] dayjs 显示实时时间
前端·javascript·vue.js