脚本宝典收集整理的这篇文章主要介绍了Vue2+VueRouter2+webpack 构建项目实战（二）：目录以及文件结构，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

通过上一篇博文《Vue2+VueRouter2+webpack 构建项目实战（一）：准备工作》,我们已经新建好了一个基于vue+webpack的项目。本篇文章详细介绍下项目的结构。

项目目录以及文件结构

如图所示：

如上图所示，自动构建的vue项目的结构就是这样。

src文件夹

如上图所示，这是src文件夹下面的初始情况，里面有一些示例代码之类的。比如，它吧LOGo放在assets文件夹里面。

commponents目录里面放了一个演示的组件文件。
router文件放路由配置文件；
App.vue是项目入口文件。
main.js这是项目的核心文件，全局的配置都在这个文件里面配置

其中App.vue项目入口代码如下：

核心文件main.js代码如下：

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

这个配核心配置文件，就是引入vue，导入入口vue以及引入路由，最后new了一个Vue实例对象，来加载数据。

router文件夹下的index.js

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

Vue.use(Router)

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

在这个index.js中引入了Hello.vue组件模块，配置路由信息。

整理目录

上面只是让大家了解一下具体是什么情况，下面，我们开始动手，把不想管的干掉，然后把src变成这个样子:

如上图所示，把文件夹和文件都新建好，后面的博文我会详细给出每个文件的代码的。

vue支持每一个模板里面写css，这样可以做到随用随取。但是，我个人不太喜欢这样，我还是喜欢吧css给单独放出来，因为这样便于整理，另外，使用scss的朋友都知道，我们会预设大量的变量，代码片供我们在写css的时候使用，如果每个模板文件里面都需要引用一次那是及其操蛋的。

参考

参考地址：http://blog.csdn.net/fungleo/...

脚本宝典总结

以上是脚本宝典为你收集整理的Vue2+VueRouter2+webpack 构建项目实战（二）：目录以及文件结构全部内容，希望文章能够帮你解决Vue2+VueRouter2+webpack 构建项目实战（二）：目录以及文件结构所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。