还是以Blog项目来讲解,最近我本人利用闲暇时间,以博客作为参考学习一些新的技术并尝试之前没有尝试过的思路来玩玩。

技术看似枯燥,但是带有一个目的来学,你会发现还是蛮有趣的。

主要实践的就是前后端分离,本次只是浅尝辄止,不作深入,主要对项目目录文件详解

项目图,如下所示:

README.md 项目介绍

index.html 入口页面

build 构建脚本目录

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

  build.js 生产环境构建脚本

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

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

  utils.js 构建相关工具方法

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

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

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

config 项目配置

  dev.env.js 开发环境配置

  index.js 项目配置文件

  prod.env.js 生产环境变量

  test.env.js 测试环境变量

src 源码目录

  main.js 入口js文件

  App.vue 根组件

  components 公共组件目录

    HelloWord.vue和Post.vue

asserts 资源目录,这里的资源会被webpack构建

  routes 前端路由

    index.js

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

package.json 版本库依赖、开发者信息等等

其它像eslint之类的是一种语法检查

Vue.js项目详解的更多相关文章

  1. Vue.js用法详解(一)更新中~

      前  言 前段时间为了一个数据查询的项目自学了Vue,感觉这款框架还是很不错的,今天就整理整理这个框架如何使用,希望对正在学这个框架的小伙伴有所帮助~ 首先,我们先来了解一下Vue: Vue.js ...

  2. vue.js使用详解

    1.什么是vue.jsvue.js是一款数据驱动型的js框架.何为数据驱动型?html视图层定义模板,vue定义数据.html和vue数据,通过标签id关联. 2.vue.js引入<script ...

  3. Vue.js 插件开发详解

    前言 随着 Vue.js 越来越火,Vue.js 的相关插件也在不断的被贡献出来,数不胜数.比如官方推荐的 vue-router.vuex 等,都是非常优秀的插件.但是我们更多的人还只停留在使用的阶段 ...

  4. Vue.js路由详解

    有时候,我们在用vue的时候会有这样的需求,比如一个管理系统,点了左边的菜单栏,右边跳转到一个新的页面中,而且刷新的时候还会停留在原来打开的页面. 又或者,一个页面中几个不同的画面来回点击切换,这两种 ...

  5. main.js index.html与app.vue三者关系详解

    main.js index.html与app.vue三者关系详解 2019年01月23日 11:12:15 Pecodo 阅读数 186   main.js与index.html是nodejs的项目启 ...

  6. vue 文件目录结构详解

    vue 文件目录结构详解 本篇文章主要介绍了vue 文件目录结构详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧 项目简介 基于 vue.js 的前端开发环境,用于前后 ...

  7. vue 源码详解(一):原型对象和全局 `API`的设计

    vue 源码详解(一):原型对象和全局 API的设计 1. 从 new Vue() 开始 我们在实际的项目中使用 Vue 的时候 , 一般都是在 main.js 中通过 new Vue({el : ' ...

  8. Redis 配置文件 redis.conf 项目详解

    Redis.conf 配置文件详解 # [Redis](http://yijiebuyi.com/category/redis.html) 配置文件 # 当配置中需要配置内存大小时,可以使用 1k, ...

  9. vue 源码详解(二): 组件生命周期初始化、事件系统初始化

    vue 源码详解(二): 组件生命周期初始化.事件系统初始化 上一篇文章 生成 Vue 实例前的准备工作 讲解了实例化前的准备工作, 接下来我们继续看, 我们调用 new Vue() 的时候, 其内部 ...

随机推荐

  1. 2018-11-27 中文代码示例之Programming in Scala笔记第七八章

    续前文: 中文代码示例之Programming in Scala学习笔记第二三章 中文代码示例之Programming in Scala笔记第四五六章. 同样仅节选有意思的例程部分作演示之用. 源文档 ...

  2. redis cluster是如何做到集两家之长的

    站在读写分离的层次看redis的时候,redis和master和slave存在明显的主从关系,也就是说master处于管理状态,salve跟着大哥混,master给小弟slave发粮食[发送内存快照数 ...

  3. Python_json数据检索与定位之jsonPath类库

    json数据检索与定位之jsonPath类库   by:授客 QQ:1033553122 实践环境 win7 64 Python 3.4.0 jsonpath_ng-1.4.3-py2.py3-non ...

  4. SENDMESSAGE和POSTMESSAGE

    原文:http://www.cnblogs.com/wind-net/archive/2012/11/01/2750123.html SendMessage 和 PostMessage 的区别 1.首 ...

  5. Glide图片加载框架小bug

    如上一段加载图片的代码,本身是没问题的,后来测试发现有情况不显示url对应的图片,而一直显示加载超时的图片 修改如下: 将with()方法的上下文context改为图片的imageView.getCo ...

  6. 调用Android自带浏览器打开网页

    转载请注明出处: http://blog.csdn.net/lowprofile_coding/article/details/77928608 在Android中可以调用自带的浏览器,或者指定一个浏 ...

  7. mac 全角/半角标点符号切换

    快捷键:option+shift+H 背景是这样的,前段时间sublimeText新装了HTML/CSS/JS Prittify,JS代码格式化的快捷键是:command+shift+H. 记性有点差 ...

  8. selenium-获取一组数组进行操作(七)

    selenium-获取一组数组进行操作 以  纵横中文网  中获取24小时畅销榜的书单为例 此文仅做 selenium 在自动化测试中怎么获取一组数据进行说明,不做网络爬虫解释 当然,使用爬虫得到本文 ...

  9. HTML表单 CSS样式

    1.HTML表单 <body rightmargin="50" leftmargin="50" background="未标题-1.jpg&qu ...

  10. 爬虫入门实例:利用requests库爬取笔趣小说网

    w3cschool上的来练练手,爬取笔趣看小说http://www.biqukan.com/, 爬取<凡人修仙传仙界篇>的所有章节 1.利用requests访问目标网址,使用了get方法 ...