还是以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. js 判断数组中是否有重复值

    function arrHasvalue(arr) { var nary = arr.sort(); for (var i = 0; i < arr.length; i++) { if (nar ...

  2. css优先级计算规则——权重

    一.css的优先级 当对同一个元素设置相同的多个声明时,会按照优先级的高低选择应用哪种声明. <style> #id{ color:red; } p{ color:blue; } < ...

  3. 入手FUJIFILM X100S

    有个朋友买了,用了说很好,于是在秋叶原的yodobashi体验了好几个星期天之后,终于下定决心出手了,购入了黑色限量版,还能用优惠券减免了200美元,最后全套1200美元.黑色限量版还包括了转接环,那 ...

  4. C++基础概述

    阅读Android源码需要对C++基础语法有一定的认识,借此对C++做一个简单的语法认知. 1.数据类型 类型 关键字 布尔型 bool 字符型 char 整型 int 浮点型 float 双浮点型 ...

  5. java后台打开浏览器代码

    import java.awt.Desktop; import java.io.IOException; import java.net.URI; import java.net.URISyntaxE ...

  6. javascript实现的浏览器下载文件

    function download(src) { var $a = document.createElement('a'); $a.setAttribute("href", src ...

  7. 最简单的java浏览器

    /** * Created by Admin on 2017/3/27. */ import java.awt.BorderLayout; import java.awt.Container; imp ...

  8. mssql sqlserver 可以存储二进制数据的字段类型详解

    转自: http://www.maomao365.com/?p=6738 摘要: 下文将从数据库的数据类型着手,剖析在sqlserver数据库中可以存储二进制数据的数据类型,如下所示: mssql s ...

  9. Essential pro angular and asp.net core 笔记

    1. dotnet ef相关命令 删除数据库(适合只有一个数据库的情形) dotnet ef database drop --force 更新数据库(适合只有一个数据库的情形) dotnet ef d ...

  10. web前端(10)—— 浮动,清除默认样式

    文档流 web页面和ps等设计软件有本质的区别,web 网页的制作,是个“流”,从上而下 ,像 “织毛衣”,就跟编程语言一样,都是由上而下 而设计软件 ,想往哪里画东西,就去哪里画 文档流带来的最明显 ...