vueJs(2.x)+router+vuex简易博客系统<二>

上一遍文章主要是讲解基本的安装和配置，下面我们需要按照实际情况实现我们需要的配置
1. 分析下项目目录
2. 项目结构重新架构

先看看我们要做个什么项目
博客首页

博客详情页

项目属于小项目，但是多练习下也是一个熟悉的过程。

项目中SRC文件夹分析

入口文件 main.js文件

//引入vue
import Vue from 'vue'

//引入app模块
import App from './App'

//引入router文件
import router from './router'

//设置 Vue.config.productionTip = false 来关闭生产模式下给出的提示
Vue.config.productionTip = false

//把这行代码规则的校验跳过，通过eslint-disable。eslint的常用技巧之一
/* eslint-disable no-new */
new Vue({//生成vue实例
  el: '#app',//提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。
  router,//注册router
  template: '<App/>',//一个字符串模板作为 Vue 实例的标识使用。模板将会 替换 挂载的元素。挂载元素的内容都将被忽略.
  components: { App }//包含 Vue 实例可用组件的哈希表
})

vue组件：App.vue

每一个vue组件都包含3个部分：
1、template：HTML

注意：必须要一个div包含，不能有并列几个

如：
<div></div>
<div></div>
这样就会报错  

2、script：vue实例
3、style：样式

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

router/index.js文件
路由文件

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)
//以下则是配置路由的基础，之后会写一遍关于router的具体使用和配置的，先看看这个配置其实也非常好理解的
export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

项目目录结构重构

我们现在打算开始编写项目了，可是不能直接使用工程的目录结构吧，那么我们对它进行改造下吧，改造的目的只是一种规范以至于当项目逐渐增大的时候文件不至于很乱，并没有什么高深的意思。

图片上面已经把每个文件夹的职能标注出来了，当然你也可以按照自己的方式，只要能合理，一目了然就可以了，没有强制要求。

总结下本文：做了两件事
1. 分析了src文件夹下的每个文件的作用
2. 重构了文件夹

重要知识点总结：
1、/* eslint-disable no-new */ ：跳过eslint校验
2、vue文件中的template的元素必须要一个div包裹，不能几个div并列
3、vue文件中style 中添加scoped表示样式只在该组件中气作用