Vue入门到上手（3）—— VueJs 填坑日记之项目文件认识

Vue入门到上手（3）—— VueJs 填坑日记之项目文件认识

上一篇博文，我们搭建了一套基础的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.js
config  // 项目基本设置文件夹
    |-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 -D
cnpm 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

本文转载至博客园博主：王二麻子技术交流园地，侵删。

Vue相关文章：

• Vue入门到上手（1）—— VueJs 填坑日记之基础概念知识解释
  https://blog.csdn.net/weixin_44195856/article/details/107815578
• Vue入门到上手（2）—— VueJs 填坑日记之基础项目构建
  https://blog.csdn.net/weixin_44195856/article/details/107815860
• Vue入门到上手（3）—— VueJs 填坑日记之项目文件认识
  https://blog.csdn.net/weixin_44195856/article/details/107816999
• Vue入门到上手（4）—— VueJs 填坑日记之搭建Axios接口请求工具
  https://blog.csdn.net/weixin_44195856/article/details/107817367
• Vue入门到上手（5）—— VueJs 填坑日记之将接口用webpack代理到本地
  https://blog.csdn.net/weixin_44195856/article/details/107817615
• Vue入门到上手（6）—— VueJs 填坑日记之初识*.Vue文件
  https://blog.csdn.net/weixin_44195856/article/details/107818003
• Vue入门到上手（7）—— VueJs 填坑日记之渲染一个列表
  https://blog.csdn.net/weixin_44195856/article/details/107818297
• Vue入门到上手（8）—— VueJs 填坑日记之参数传递及内容页面的开发
  https://blog.csdn.net/weixin_44195856/article/details/107818481
• Vue入门到上手（9）—— VueJs 填坑日记之在项目中使用jQuery
  https://blog.csdn.net/weixin_44195856/article/details/107818658
• Vue入门到上手（10）—— VueJs 填坑日记之在项目中使用Amaze UI
  https://blog.csdn.net/weixin_44195856/article/details/107818787
• Vue入门到上手（11）—— VueJs 填坑日记之使用Amaze ui调整列表和内容页面
  https://blog.csdn.net/weixin_44195856/article/details/107819778
• Vue入门到上手（12）—— VueJs 填坑日记之项目打包发布
  https://blog.csdn.net/weixin_44195856/article/details/107819937

我是与其终，一个风起云涌的女孩子。
以下是我的公众号，主要写的是有关于前段后台数据库，面试技巧，学习方法，职场心得等，感兴趣的可以关注一下哦。

很高兴你能看到我的博客，希望能对你有所帮助。
qq群：可直接扫码进qq群，或者输入群号670983672。
微信群：可加下方博主微信，备注“进群”即可。