个人博客——搭建前端项目

使用vite搭建一个vue3项目

在vscode中打开项目要保存的文件夹，“ctrl+j”打开终端，然后按下列步骤创建项目

1. npm create vite@latest 项目名 – --template vue
2. 选“y”、选框架、选语言 //这里选了vue 和 ts
3. 构建完毕后cd 到项目所在文件夹
4. npm install
5. npm run dev

创建时 注意看npm的版本
npm7以上的用 npm create vite@latest 项目名 – --template vue
npm7以下的用 npm create vite@latest 项目名 --template vue
可用 npm -v 查看npm版本

运行后打开的界面如图所示

项目初始结构如下

![在这里插入图片描述](https://img-blog.csdnimg.cn/c2d457566a62474da8fa71333302ed45.png
删掉一些不需要的东西后开始添加基本页面

添加基本页面

在src文件夹下添加views文件夹，用于存放页面。views下又添加backend、onstage两个文件夹，分别用于存放后台相关页面和前台相关页面，views下添加Login.vue和Registered.vue分别表示登录页和注册页。如图所示

安装Volar插件，可以通过输入”vbase“快速生成vue基本页面

Volar插件
快速生成vue基本页面

安装配置路由，实现页面间的跳转

1. 通过 npm install vue-router@4 安装vue-router
   
2. 在src文件夹下添加router文件夹，router文件夹下创建index.ts文件，index.ts文件添加路由的相关配置。index.ts如下所示

//引入创建路由的方法和路由模式配置方法
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
//引入需要跳转的视图，懒加载，访问到该路由才加载该视图
//登录注册 
const Login =()=> import('../views/Login.vue')
const Registered =()=> import('../views/Registered.vue')
// //前台
const OnstageHome =()=> import('../views/onstage/OnstageHome.vue')
// //后台
const BackendHome =()=> import('../views/backend/BackendHome.vue')

//路由和视图的映射
//路由和视图的映射
const routes: Array<RouteRecordRaw> = [
  {
  //路由初始指向
    path: '/',
    name: 'OnstageHome',
    component:OnstageHome,
  },
  {
    path: '/toLogin',
    name: 'Login',
    component:Login,
  },

 
]

//创建路由
const router = createRouter({
    history:createWebHistory(),
    routes:routes
})
//导出路由
export default router

3. 在main.ts中引入并使用路由

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
//引入
import router from './router'
               //使用 
createApp(App).use(router).mount('#app')

4. 在App.vue中添加<router-view></router-view>标签，App.vue文件如下所示

<script setup>

</script>

<template>
<!-- 当路由发生变化时，视图在这里展示 -->
  <router-view></router-view>

</template>

<style scoped>

</style>

5. 在OnstageHome.vue中添加去登录页的跳转

<template>
    <div> 
        前台首页
        <p>
            <router-link to="/toLogin">去登录页</router-link>
        </p>
    </div>
</template>

因为在router/index.js中配置了，当访问根路径“/”时映射到前台首页，所以项目运行后就来到前台首页，点击“去登录页”就会跳转到登录页

其他页面的跳转也同上
目前设置的页面跳转如下所示

到此，路由配置和页面之间的跳转配置完成，接下来就是用户注册登录功能的实现辣，加油！