三、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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端萌媛的成长之路

url、href和src区别

1.4K40
来自专栏Jerry的SAP技术分享

微信小程序开发系列四:微信小程序之控制器的初始化逻辑

这个教程的前两篇文章,介绍了如何用下图所示的微信开发者工具自动生成一个Hello World的微信小程序,并讲解了这个自动生成的微信小程序的视图开发原理。

14530
来自专栏崔庆才的专栏

腾讯云主机Python3环境安装PySpider爬虫框架过程

PhantomJS 是一个基于 WebKit 的服务器端 JavaScript API。它全面支持web而不需浏览器支持,其快速、原生支持各种Web标准:DOM...

1.4K10
来自专栏vue学习

4.vue-router之什么是嵌套路由

大家都知道选项卡,在选项卡中,顶部有数个导航栏,中间的主体显示的是内容;这个时候,整个页面是一个路由,然后点击选项卡切换不同的路由来展示不同的内容,这个时候就是...

11520
来自专栏DeveWork

WordPress 路径相关函数总结(一):站点路径相关函数

在开发WordPress 相关产品(主题、插件)的时候,常常需要通过某些函数获取路径,包括URL路径和服务器路径。比如说在主题或插件中引用js或css文件需要U...

25460
来自专栏云加头条

如何利用云对象存储 COS 免费托管静态网站

在此实践中,您可以在腾讯云对象存储(以下简称 COS)上托管静态网站,访客可以通过您的自定义域名(例如 www.example.com )访问托管的静态网站。

4.6K10
来自专栏V站

Speed丨如何快速给网站添加Pjax?

Pjax是一种很多网站( facebook,  twitter)都支持的浏览方式, 当你点击一个站内链接的时候, 不是做页面跳转, 而是只是站内页面刷新。设置后...

27340
来自专栏前端小叙

vue如何加入百度联盟广告

在百度联盟代码位管理中创建好对应的代码位之后,点击获取代码,会看到这样一段js ? 直接复制粘贴到自己网页中便可显示对应广告。 在vue中由于都是vue组件,不...

51780
来自专栏DeveWork

WordPress 路径相关函数总结(一):站点路径相关函数

在开发WordPress 相关产品(主题、插件)的时候,常常需要通过某些函数获取路径,包括URL路径和服务器路径。比如说在主题或插件中引用js或css文件需要U...

20980
来自专栏Jerry的SAP技术分享

为什么我的C4C Service Request没办法Release到ERP?

但是在UI Designer里是能看到这个按钮的。检查其Visible的属性,绑到了一个Calculated Rule上面:

13130

扫码关注云+社区

领取腾讯云代金券