Vue+VueRouter+Webpack+Axios+ElementUI---構建項目實戰(三)項目目錄解析

項目目錄解析:

配置 src 目錄:

page放的應該爲.vue的頁面文件，如果模塊比較多，可以再以模塊文件名劃分。

我的src文件夾下目錄如下:

NavTop.vue代碼如下:

<template>
    <div>
        <span>{{title}}</span>
        <div>
            <span @click="searchClick">搜索</span>
            <span @click="createClick">添加</span>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            title: '微信'
        }
    },
    methods: {
        searchClick() {
            console.log('點擊搜索')
        },
        
        createClick() {
            console.log('點擊添加')
        }
    },
}
</script>

NavFooter.vue代碼如下:

<template>
    <div>
        <ul>
            <li v-for="(tabs, tabsIndex) in listName"
                :key="tabsIndex"
                @click="tabClick(tabs.name)">
                <a href="javascript:void(0)">
                    <i></i>
                    <span>{{tabs.name}}</span>
                </a>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    data() {
        return {
            listName:[
                {
                    name:'微信'
                },
                {
                    name:'通訊錄'
                },
                {
                    name:'發現'
                },
                {
                    name:'我'
                }
            ]
        }
    },
    methods: {
        tabClick(val) {
            console.log(val)
        }
    },
}
</script>

Wx.vue的代碼如下:

<template>
    <div>
        <nav-top></nav-top>
        <div>{{name}}</div>
        <nav-footer></nav-footer>
    </div>
</template>

<script>
import NavTop from '@/components/base/NavTop'
import NavFooter from '@/components/base/NavFooter'
export default {
    components: {
        NavTop,
        NavFooter
    },
    data() {
        return {
            name: '微信主頁面'
        }
    },
}
</script>

App.vue代碼如下:

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

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

src下的router/index.js代碼如下:

import Vue from 'vue'
import Router from 'vue-router'
import Wx from '@/page/Wx'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Wx',
      component: Wx
    }
  ]
})

配置 static 目錄:

不帶後綴的都是文件夾，帶對應後綴就是對應文件了。

在package.json中在dev的後面加上 --open 例:

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --open",
},

命令行執行yarn run dev，自動打開瀏覽器http://localhost:8080/#/

頁面如下：

下一章就是引入sass進行樣式處理