Vue.js 入门（项目结构的搭建）

1.src目录结构

通常项目的代码都是放在src目录中，为了便于管理维护代码，可以在这个目录下新建其他文件夹，放置不同的代码和文件
(1)pages：存放页面组件
(2)components：存放非页面组件
(3)router：存放路由模块
(4)store：存放vuex模块
(5)App.vue：App组件
(6)main.js：入口文件

2.编写组件

一个vue文件就是一个组件，它由三个部分组成：
template：html代码
script：js代码
style：css代码

<template>
    <div>
        <h1>我是App组件</h1>
    </div>
</template>

<script>
export default {
    
}
</script>

<style>

</style>

3.封装路由模块

(1)在router目录下新建index.js文件，写入相应的代码
(2)引入vue和vue-router，还有其他页面组件
(3)Vue.use(router)
(4)实例化路由，并传入相应的配置对象
(5)暴漏此模块

关于路由配置对象，他有以下几个属性：
(1)routes：值为数组，描述了路由的配置信息。每个路由都要指定对应的路径和对应的页面组件

{
    path:"/chatList",
    component:chatList
},

(2)linkActiveClass：（可选）路由激活时添加的css类，例如：

//被激活的<router-link>会添加一个css类  'active'
linkActiveClass: 'active'

import Vue from 'vue'
import Router from 'vue-router'

import chatList from '../pages/chatList/chatList.vue'
import mailList from '../pages/mailList/mailList.vue'
import find from '../pages/find/find.vue'
import aboutMe from '../pages/aboutMe/aboutMe.vue'

Vue.use(Router)

export default new Router({
    rouets:[
        {
            path:"/chatList",
            component:chatList
        },
        {
            path:"/mailList",
            component:mailList
        },
        {
            path:"/find",
            component:find
        },
        {
            path:"/aboutMe",
            component:aboutMe
        },
        {
            path:"/",
            redirect:"/chatList",
        }
    ],
    linkActiveClass:"active"
})

4.配置和编写入口文件

入口文件的路径在build文件夹下的webpack.base.conf.js中进行设置

module.exports = {
  entry: {
    app: './src/main.js'
  }
}

PS：其他加载器（url-loader,babel-loader,vue-loader）也是在这个文件中进行配置的

入口文件的编写：
(1)引入vue
(2)引入路由模块
(3)引入app组件
(4)实例化，传入配置项（router，el，components，template等）

import Vue from 'vue'
import router from './router/index.js'

import App from './App.vue'


//阻止启动生产消息
Vue.config.productionTip = false

//实例化
new Vue({
    el: '#app',
    components: { App },
    template: '<App/>',
    router
})