上一篇博文，我们搭建了一套基础的vuejs的环境，首先安装node.js，然后利用npm包管理器，安装vue-cli，设置淘宝镜像，初始化项目，安装依赖，运行。在这一篇，我们将认识vuejs项目里的各个目录结构。
基础项目目录
build// 编译配置文件，一般不用管 ???|-build.js ???|-check-versions.js ???|-logo.png ???|-utils.js ???|-vue-loader.conf.js ???|-webpack.base.conf.js ???|-webpack.dev.conf.js ???|-webpack.prod.conf.js ???|-webpack.test.conf.jsconfig// 项目基本设置文件夹 ???|-dev.env.js// 开发配置文件 ???|-index.js// 配置主文件 ???|-prod.env.js// 编译配置文件node_modules// 项目依赖包文件夹src// 我们的项目的源码编写文件 ???|-assets// 初始项目资源目录，回头删掉 ???|-components// 组件目录 ???|-HelloWorld.vue// 测试组件 ???|-router// 路由配置文件夹 ???|-index.js// 路由配置文件 ???|-App.vue// APP入口文件 ???|-main.js// 主配置文件static// 资源放置目录index.html// 项目入口文件package.json// 项目依赖包配置文件
上面就是vuejs项目初始化后的目录结构，我们一般情况下，只需要关注src和static资源目录就可以了，其它目录大多都是一些配置信息，不需要太费精力的关注。
配置SRC目录
src ???|-api// 接口调用工具文件夹 ???????|-index.js// 接口调用工具 ???|-components// 组件文件夹，目前为空 ???|-config// 项目配置文件夹 ???????|-index.js// 项目配置文件 ???|-frame// 子路由文件夹 ???????|-frame.vue// 默认子路由文件 ???|-pages// 我们的页面组件文件夹 ???????|-Index.vue ???????|-Content.vue ???|-router// 路由配置文件夹 ???????|-index.js// 路由配置文件 ???|-style// scss 样式存放目录 ???????|-base// 基础样式存放目录 ???????|-scss// 页面样式文件夹 ???????|-style.scss// 主样式文件 ???|-utils// 常用工具文件夹 ???|-App.vue// APP入口文件 ???|-main.js// 项目配置文件 ???????
将目录结构按上面的层级配置完成后，不要着急运行项目，这个时候由于删除了一些文件夹，项目是跑不起来的。
配置staitc资源目录
static ???|-css// 放一些第三方的样式文件 ???|-font// 放字体图标文件 ???|-images// 放图片文件，如果是复杂项目，可以在这里面再分门别类 ???|-js// 放一些第三方的JS文件，如 jquery
对于一些不经常修改变动的css和js咱们统一放到static目录里，因为在src里面的文件，将来每次打包时都会对其进行打包，而文件特别多的情况下，打包会变的特别慢。
调整App.vue
上面我们进行的是一些目录结构的设置，现在我们对文件进行修改配置，使项目重新运行起来。首先将App.vue调整成如下代码：
<template> ???<div id="app"> ???????<router-view></router-view> ???</div></template><script>export default { ???name: ‘app‘}</script><style lang="scss"> ???@import "./style/style";<!--在这里我们直接导入主样式文件--></style> ???注意上面使用了lang="scss"，这是因为我们使用了 scss 文件预编译，所以我们要安装scss的npm包。
cnpm install sass-loader -Dcnpm install node-sass -D
调整Index.vue和Content.vue
src/pages/Index.vue
<template> ???<div>index page</div></template>
src/pages/Content.vue
<template><div>content page</div></template>
暂时先写如上代码，后面会对上面代码进行讲解和丰富。
调整 router 路由文件
打开src/router/index.js，目前文件是这样的，也是默认的，我们并没有做过任何修改。
import Vue from ‘vue‘import Router from ‘vue-router‘import HelloWorld from ‘@/components/HelloWorld‘Vue.use(Router)export default new Router({ ???routes: [ ???????{ ???????????path: ‘/‘, ???????????name: ‘HelloWorld‘, ???????????component: HelloWorld ???????} ???]})调整为如下代码：
import Vue from ‘vue‘import Router from ‘vue-router‘import Index from ‘@/pages/Index‘import Content from ‘@/pages/Content‘Vue.use(Router)export default new Router({ routes: [ { path: ‘/‘, component: Index }, { path: ‘/Content/:id‘, component: Content } ]})上面的/就是默认的意思，这里默认显示我们的Index.vue，而大家可能会对Content/:id有疑问，因为咱们做的是一个列表，然后点击列表中具体的某一条，就进入到了内容页面。而:id就是vuejs路由的动态路由配置。我们用id来区分显示不同的内容。
上些工作做完， 我们的项目就基本配置好了，这个时候来启动我们的项目
cnpm run dev
当出现上图，则表示启动成功，如果有ERROR则表示失败，请仔细检查上面的各个文件的内容是否书写有错。启动成功我们打开浏览器，输入http://localhost:8080，如果看到以下界面，则说明和我的项目是一样的。
本篇文章大部分内容摘抄至FungLeo博客，忠心感谢FungLeo，是你们无私的奉献，才让我们有了学习的参考，以下是地址：
http://blog.csdn.net/FungLeo/article/details/77585205
三、VueJs 填坑日记之项目文件认识
原文地址：http://www.cnblogs.com/xinhudong/p/7843532.html