Vue+DRF搭建博客之前端篇（二）

一、为项目新建多个文件夹

为了项目各个部分能够安排得更加有条理，这里先像Vue视频老师那样创建各个必要的文件夹。
即

1. common（封装一些公共的工具类）
2. network（封装网络请求库）
3. router（关于路由跳转的内容）
4. store（Vuex相关）
5. views（tab的各个子页面）
6. components
   1. common（公共组件，只封装好后以后的项目可以直接拿来用到的）
   2. content（针对当前项目，难以复用的组件）
      

二、为使用ElementUI进行初始化

ElementUI安装教程

使用npm命令安装

npm install element-plus --save

引入UI库

在main.js中照做即可：

试用

将HelloWorld组件删除，并将App.vue中的内容删除，换为Hello World和UI库的按钮：

运行结果：

说明UI库已经配置成功。

三、编写网站的导航栏

先创建NavBar.vue，放置在如图所示的文件夹中：

然后将ElementUI官网的“NavMenu 导航菜单”部分的代码选择需要的部分cv到组件的template
中。

最后在App.vue中引入组件：

预览效果：

暂时导航栏还用不到很多功能，暂时先保留“主页”和“博客中心”两个tab：

四、编写路由（vue-router）

按照暂时的需求，至少需要两个网站的页面：首页和博客页，因此需要路由来进行两个view的跳转。

下载和初始化

下载：
使用如下命令（在Vue3需要下载@next版本）：

npm install vue-router@next --save

在Vue（main.js）中配置

具体需求

页面	URL
首页	home/
博客页	blog/

创建需要跳转的页面

即Blog.vue和Home.vue

创建并导出Router

先在router/下创建index.js文件

index.js内的代码（基本都是套路，没什么可说的）：

import { createRouter,createWebHistory} from "vue-router";

const Home = ()=>import('@/views/home/Home')
const Blog = ()=>import('@/views/blog/Blog')

const routes = [
  {
    path: '',
    redirect: '/home'
  },
  {
    path: '/home',
    component: Home
  },
  {
    path: '/blog',
    component: Blog
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

在main.js中引入router 并挂载

import router from '@/router'
app.use(router)

至此，router已经配好

默认为首页：

输入blog/后跳转到博客页：

五、设置导航栏按钮点击跳转页面

先设计如下图所示的数据存储结构（这种数据以后完善了应该是由后端来提供的）：

  data(){
    return {
      activeIndex: 1,
      tabs:[
        {
          name:'首页',
          path:'/home'
        },
        {
          name: '博客中心',
          path: '/blog'
        }
      ]
    }
  },

然后通过v-for将各个值取出来渲染到导航栏上：

<el-menu-item v-for="(tab, i) in tabs" :key="i" :index="String(i)" @click="tabClick(i)">
  {{ tab.name }}
el-menu-item>

点击事件函数（单击后跳转到对应index的对象的path，即tabs[index].path）：

methods:{
  tabClick(tabIndex){
    this.$router.push(this.tabs[tabIndex].path);
  }
}

到此，我们已经完整实现了点击tab跳转子页面的需求。
最后将代码push到仓库。

上一步：Vue+DRF搭建博客之前端篇（一）
下一步：Vue+DRF搭建博客之前端篇（三）