Vue+VueRouter+Webpack+Axios+ElementUI---构建项目实战(三)项目目录解析

项目目录解析:

配置 src 目录:

page放的应该为.vue的页面文件，如果模块比较多，可以再以模块文件名划分。

我的src文件夹下目录如下:

NavTop.vue代码如下:

NavFooter.vue代码如下:

Wx.vue的代码如下:

App.vue代码如下:

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进行样式处理