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

相关推荐
小蒜学长29 分钟前
vue家教预约平台设计与实现(代码+数据库+LW)
java·数据库·vue.js·spring boot·后端
Java水解1 小时前
【springboot 技术代码】集成mongodb 详细步骤
spring boot·后端
阿虎儿2 小时前
TypeScript 内置工具类型完全指南
前端·javascript·typescript
chxii3 小时前
6.3Element UI 的表单
javascript·vue.js·elementui
张努力3 小时前
从零开始的开发一个vite插件:一个程序员的"意外"之旅 🚀
前端·vue.js
深兰科技3 小时前
深兰科技:搬迁公告,我们搬家了
javascript·人工智能·python·科技·typescript·laravel·深兰科技
chxii3 小时前
6.4 Element UI 中的 <el-table> 表格组件
vue.js·ui·elementui
十八旬4 小时前
苍穹外卖项目实战(日记十)-记录实战教程及问题的解决方法-(day3-2)新增菜品功能完整版
java·开发语言·spring boot·mysql·idea·苍穹外卖
叫我阿柒啊5 小时前
Java全栈开发实战:从Spring Boot到Vue3的项目实践
java·spring boot·微服务·性能优化·vue3·全栈开发
Adler_hu5 小时前
cli项目页面白屏时间优化
vue.js·webpack