后台管理系统实战项目-01前台项目搭建

技术栈：Vue3+vite+ElementPlus+.NET6

1、创建项目

创建项目的时候，可以直接使用以下代码进行创建

pnpm create vite@latest tuwenbaodian.admin

2、初始化项目node_modules

pnpm install

3、尝试启动项目

pnpm dev 

4、安装sass

 安装Sass可以书写缩进式的css样式，使得页面的样式可读性更佳

pnpm i sass --save

安装之后可以写如下类型的样式

<style scoped lang="scss">
.main{
  .left{
    color: red;
  }
  .right{
    color: green;
  }
}
</style>

5、安装Element-Plus

pnpm install element-plus --save

在main.ts中引入文件

import { createApp } from 'vue'
import  ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

createApp(App)
.use(ElementPlus)
.mount('#app')

尝试使用Button 按钮 | Element Plus，在页面中新建一个按钮，可看到按钮正常出现

5、安装路由

安装路由可是在浏览器中输入网址进行切换页面

pnpm i  vue-router@next --save

安装路由之后可以新建页面，

之后新建路由设置

新建文件夹router、router下新建index.ts

import {createRouter,createWebHistory } from 'vue-router'

import LoginPage from '../views/index/LoginPage.vue'

const router = createRouter({
    history:createWebHistory(),
    routes:[
        {path:'/login',component:LoginPage},
    ]
})

export default router

在main.ts文件中引入路由文件，这时候的main.ts文件如下

import { createApp } from 'vue'
import  ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import router from './router'
import App from './App.vue'

createApp(App)
.use(ElementPlus)
.use(router)
.mount('#app')

这个时候启动项目，尝试在浏览器中尝试输入http://localhost:5173/login​​​​​ 时候是没有效果的，

因为还差很重要的一步：在App.vue文件中加上如下代码

<template>
 <router-view></router-view>
</template>

这时候再次进入浏览器既可查看到路由已经生效

6、新建页面