vue+Node打造个人博客（一）——前端项目结构

这篇博客我将用vue+elementUI+Node.js搭建个人博客项目，项目已经上传到github。这个项目我打算采用前后端分离，博客界面采用bootstrap做一个响应式的，后台管理系统用element，然后用webpack打包。后端的话就采用Node.js，主要还是用Express框架。如果博客或者项目有什么写的不对的地方，还请各位大佬指出，小子感激不尽。

我们先创建前端项目结构，vue项目创建结构的话还是选择Vue-cli。至于Vue-cli的使用，可以参照我之前的文章，这里的细节知识我就不解释。

创建方式的话就用vue ui，可视化界面还是比黑窗口好一些。

这为了方便，我直接用预设

项目创建好后，我们cd到项目目录下，yarn serve运行项目，然后在浏览器输入localhost:8080就可以看到项目已经创建好了。

image.png

主要的项目结构如下

项目结构

• 新增API文件夹，用于发送请求，请求库用的还是axios
• assets用来存放图片、样式、字体等文件
• components存放组件
• views页面文件
• main.js页面主要逻辑
• router.js定义页面路由跳转规则
• stores.jsvuex状态管理

接下来就安装elementUI

yarn add element-ui -S

在main.js中引入组件

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App.vue'

Vue.use(ElementUI)

在elementUI中找到导航菜单，复制到页面查看组件引入成功没

<el-menu
      :default-active="activeIndex2"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
    >
      <el-menu-item index="1">处理中心</el-menu-item>
      <el-submenu index="2">
        <template slot="title">我的工作台</template>
        <el-menu-item index="2-1">选项1</el-menu-item>
        <el-menu-item index="2-2">选项2</el-menu-item>
        <el-menu-item index="2-3">选项3</el-menu-item>
      </el-submenu>
      <el-menu-item index="3">
        <a href="https://www.ele.me" target="_blank">订单管理</a>
      </el-menu-item>
    </el-menu>

<script>
  export default {
    data() {
      return {
        activeIndex: '1',
        activeIndex2: '1'
      };
    },
    methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      }
    }
  }
</script>

可以看到组件引入成功

引入组件