三、VueJs 填坑日记之项目文件认识 - VueJs 填坑日记

上一篇博文，我们搭建了一套基础的vuejs的环境，首先安装node.js，然后利用npm包管理器，安装vue-cli，设置淘宝镜像，初始化项目，安装依赖，运行。在这一篇，我们将认识vuejs项目里的各个目录结构。

基础项目目录

 1build    // 编译配置文件，一般不用管
 2    |-build.js
 3    |-check-versions.js
 4    |-logo.png
 5    |-utils.js
 6    |-vue-loader.conf.js
 7    |-webpack.base.conf.js
 8    |-webpack.dev.conf.js
 9    |-webpack.prod.conf.js
10    |-webpack.test.conf.js
11config    // 项目基本设置文件夹
12    |-dev.env.js    // 开发配置文件
13    |-index.js    // 配置主文件
14    |-prod.env.js    // 编译配置文件
15node_modules    // 项目依赖包文件夹
16src    // 我们的项目的源码编写文件
17    |-assets    // 初始项目资源目录，回头删掉
18    |-components    // 组件目录
19    |-HelloWorld.vue    // 测试组件
20    |-router    // 路由配置文件夹
21    |-index.js    // 路由配置文件
22    |-App.vue    // APP入口文件
23    |-main.js    // 主配置文件
24static    // 资源放置目录
25index.html    // 项目入口文件
26package.json    // 项目依赖包配置文件

上面就是vuejs项目初始化后的目录结构，我们一般情况下，只需要关注src和static资源目录就可以了，其它目录大多都是一些配置信息，不需要太费精力的关注。

配置SRC目录

 1src
 2    |-api    // 接口调用工具文件夹
 3        |-index.js    // 接口调用工具
 4    |-components    // 组件文件夹，目前为空
 5    |-config    // 项目配置文件夹
 6        |-index.js    // 项目配置文件
 7    |-frame    // 子路由文件夹
 8        |-frame.vue    // 默认子路由文件
 9    |-pages    // 我们的页面组件文件夹
10        |-Index.vue
11        |-Content.vue    
12    |-router    // 路由配置文件夹
13        |-index.js    // 路由配置文件
14    |-style    // scss 样式存放目录
15        |-base    // 基础样式存放目录
16        |-scss    // 页面样式文件夹
17        |-style.scss    // 主样式文件
18    |-utils    // 常用工具文件夹
19    |-App.vue    // APP入口文件
20    |-main.js    // 项目配置文件

将目录结构按上面的层级配置完成后，不要着急运行项目，这个时候由于删除了一些文件夹，项目是跑不起来的。

配置staitc资源目录

1static
2    |-css    // 放一些第三方的样式文件
3    |-font    // 放字体图标文件
4    |-images    // 放图片文件，如果是复杂项目，可以在这里面再分门别类
5    |-js    // 放一些第三方的JS文件，如 jquery

对于一些不经常修改变动的css和js咱们统一放到static目录里，因为在src里面的文件，将来每次打包时都会对其进行打包，而文件特别多的情况下，打包会变的特别慢。

调整App.vue

上面我们进行的是一些目录结构的设置，现在我们对文件进行修改配置，使项目重新运行起来。首先将App.vue调整成如下代码：

 1<template>
 2    <div id="app">
 3        <router-view></router-view>
 4    </div>
 5</template>
 6
 7<script>
 8export default {
 9    name: 'app'
10}
11</script>
12
13<style lang="scss">
14    @import "./style/style";    <!--在这里我们直接导入主样式文件-->
15</style>  
16

注意上面使用了lang="scss"，这是因为我们使用了 scss 文件预编译，所以我们要安装scss的npm包。

1cnpm install sass-loader -D
2cnpm install node-sass -D

调整Index.vue和Content.vue

src/pages/Index.vue

 1<template>
 2    <div>index page</div>
 3</template>
 4
 5
 6src/pages/Content.vue
 7
 8<template>
 9<div>content page</div>
10</template>
11

暂时先写如上代码，后面会对上面代码进行讲解和丰富。

调整 router 路由文件

打开src/router/index.js，目前文件是这样的，也是默认的，我们并没有做过任何修改。

 1import Vue from 'vue'
 2import Router from 'vue-router'
 3import HelloWorld from '@/components/HelloWorld'
 4
 5Vue.use(Router)
 6
 7export default new Router({
 8    routes: [
 9        {
10            path: '/',
11            name: 'HelloWorld',
12            component: HelloWorld
13        }
14    ]
15})

调整为如下代码：

 1import Vue from 'vue'
 2import Router from 'vue-router'
 3import Index from '@/pages/Index'
 4import Content from '@/pages/Content'
 5
 6Vue.use(Router)
 7
 8export default new Router({
 9　　routes: [
10　　　　{
11　　　　　　path: '/',
12　　　　　　component: Index
13　　　　},
14　　　　{
15　　　　　　path: '/Content/:id',
16　　　　　　component: Content
17　　　　}
18　　]
19})