VUE.js结构讲解

项目文件名详解:

README.md  ==>  项目介绍

index.js  ==> 入口页面  

build              构建脚本目录

build-server.js         运行本地构建服务器,可以访问构建后的页面

build.js            生产环境构建脚本

 dev-client.js          开发服务器热重载脚本,主要用来实现开发阶段的页面自动刷新

 dev-server.js          运行本地开发服务器

 utils.js            构建相关工具方法

 webpack.base.conf.js      wabpack基础配置

 webpack.dev.conf.js       wabpack开发环境配置

 webpack.prod.conf.js      wabpack生产环境配置

 config             项目配置

 dev.env.js           开发环境变量

 index.js            项目配置文件

 prod.env.js           生产环境变量

 test.env.js           测试环境变量

mock              mock数据目录

 hello.js

package.json          npm包配置文件,里面定义了项目的npm脚本,依赖包等信息

src               源码目录 

 main.js             入口js文件

 app.vue             根组件

components           公共组件目录

title.vue

 assets             资源目录,这里的资源会被wabpack构建

 images

 logo.png

routes             前端路由

index.js

 store              应用级数据(state)

 index.js

views              页面目录

 hello.vue

 notfound.vue

static             纯静态资源,不会被wabpack构建。

test              测试文件目录(unit&e2e)

   unit              单元测试

    index.js            入口脚本

    karma.conf.js          karma配置文件

     specs              单测case目录

      Hello.spec.js

src

存放 vue 项目的源代码。其文件夹下的各个文件(文件夹)分别为:

assets​:资源文件,比如存放 css,图片等资源。

component:组件文件夹,用来存放 vue 的公共组件(注册于全局,在整个项目中通过关键词便可直接输出)。

router​:用来存放 ​index.js​,这个 js 用来配置路由

tool​:用来存放工具类 js,将 js 代码封装好放入这个文件夹可以全局调用(比如常见的​ api.js​,​http.js​ 是对 http 方法和 api 方法的封装)。

views:用来放主体页面,虽然和组件文件夹都是 vue 文件,但 views 下的 vue 文件是可以用来充当路由 view 的。

main.js​:是项目的入口文件,作用是初始化 vue 实例,并引入所需要的插件。

app.vue​:是项目的主组件,所有页面都是在该组件下进行切换的

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值