简单搭建一个Vue3+Ts的管理后台(一)

本文介绍了如何使用Vue3、TypeScript等技术栈搭建前端项目,包括检查Vue版本、通过npm创建Vite项目、自定义项目配置和初始化,最后启动项目并集成UI库如Element-Plus。
摘要由CSDN通过智能技术生成

前端项目:

        项目配置:

                Vue3、TypeScript、VueRouter、Pinia、Element-Plus、Axios、Sass、JsCookie

        项目搭建:

                检查vue版本:

                        打开控制台执行: vue -V (V要大写)

Vue -V

        创建项目:

                选择/创建一个文件夹用于存放项目,并在控制台打开文件夹,执行:

npm create vite@latest

输入自己项目的名称,vue-admin-demo为例

选择Vue,因为我们要创建的项目是Vue项目

选择自定义,根据自己的需求去创建合适项目的内容

大概内容有这些.可以根据自己的需求去自定义

        初始化项目:

                对vite.config.ts做一个简单的配置,把端口,host那些设置一下就可以启动项目来,不配置也可以的

        启动项目:

                执行npm run dev,就可以把项目启动起来了,接下来就是给项目搞个UI库了

  • 6
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
搭建一个vue3 ts pinia element-plus后台管理系统框架,可以按照以下步骤进行: 1. 安装Node.js和Vue CLI Vue CLI是用于创建和管理Vue项目的官方工具,需要先安装Node.js和Vue CLI。 2. 创建基于Vue3和TypeScript的项目 使用Vue CLI创建一个基于Vue3和TypeScript的项目,输入以下命令: ``` vue create my-project --preset=@vue/cli-plugin-typescript ``` 3. 安装Pinia Pinia是一个Vue 3状态管理库,可以用于管理应用程序的状态。在项目中安装Pinia,输入以下命令: ``` npm install pinia ``` 4. 安装Element Plus Element Plus是一个基于Vue.js 3的UI库,可用于构建后台管理系统。在项目中安装Element Plus,输入以下命令: ``` npm install element-plus ``` 5. 创建页面和组件 根据项目需求,创建页面和组件。 6. 配置Pinia 在main.ts中引入Pinia,并在创建Vue实例时使用它。示例代码如下: ```typescript import { createApp } from 'vue' import App from './App.vue' import { createPinia } from 'pinia' const app = createApp(App) app.use(createPinia()) app.mount('#app') ``` 7. 配置Element Plus 在main.ts中引入Element Plus,并在创建Vue实例时使用它。示例代码如下: ```typescript import { createApp } from 'vue' import App from './App.vue' import ElementPlus from 'element-plus' import 'element-plus/lib/theme-chalk/index.css' const app = createApp(App) app.use(ElementPlus) app.mount('#app') ``` 8. 编写页面和组件 使用Vue3和TypeScript编写页面和组件。 9. 运行项目 运行项目,输入以下命令: ``` npm run serve ``` 以上就是搭建一个vue3 ts pinia element-plus后台管理系统框架的步骤。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值