vue手撸移动端后台（4）项目结构以及首页

回到我们的项目目录，

正式的项目肯定不能这么简单的划分，为了更好的维护项目，我们构建一下自己的目录结构，我全部构建完毕，加上注释。依据团队习惯吧

构建完了目录，对页面进行几个初始化:

• 错误页面404
• 首页修改
• 用户管理页面
• 文章管理页面
• 删除helloworld

1. 错误页面

在error目录下创建404.vue文件：

<template>
    <!-- eslint-disable -->
    <div>
    	<h1>404</h1>
    </div>
    <!-- eslint-enable -->
</template>
<script>
export default {}
</script>
<style scoped>
</style>

2. 首页清理

去掉helloworld相关的，全部删掉

<template>
    <div id="app">
    </div>
</template>
<script>
export default {
    name: 'app',
    components: {}
}
</script>
<style>
</style>

3. 用户管理，文章管理

在src/view目录下的对应模块新建Users.vue,Articles.vue文件注意大小写，我这里vue文件使用大写开头，内容简单【区分文章和用户即可】：

<template>
    <!-- eslint-disable -->
    <div>文章/用户</div>
    <!-- eslint-enable -->
</template>
<script>
export default {}
</script>
<style scoped>
</style>

4. 删除helloworld

直接删除多余文件HelloWorld.vue

ok，先做这么多