Vue.js项目详解
还是以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项目详解的更多相关文章
- Vue.js用法详解(一)更新中~
前 言 前段时间为了一个数据查询的项目自学了Vue,感觉这款框架还是很不错的,今天就整理整理这个框架如何使用,希望对正在学这个框架的小伙伴有所帮助~ 首先,我们先来了解一下Vue: Vue.js ...
- vue.js使用详解
1.什么是vue.jsvue.js是一款数据驱动型的js框架.何为数据驱动型?html视图层定义模板,vue定义数据.html和vue数据,通过标签id关联. 2.vue.js引入<script ...
- Vue.js 插件开发详解
前言 随着 Vue.js 越来越火,Vue.js 的相关插件也在不断的被贡献出来,数不胜数.比如官方推荐的 vue-router.vuex 等,都是非常优秀的插件.但是我们更多的人还只停留在使用的阶段 ...
- Vue.js路由详解
有时候,我们在用vue的时候会有这样的需求,比如一个管理系统,点了左边的菜单栏,右边跳转到一个新的页面中,而且刷新的时候还会停留在原来打开的页面. 又或者,一个页面中几个不同的画面来回点击切换,这两种 ...
- 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的项目启 ...
- vue 文件目录结构详解
vue 文件目录结构详解 本篇文章主要介绍了vue 文件目录结构详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧 项目简介 基于 vue.js 的前端开发环境,用于前后 ...
- vue 源码详解(一):原型对象和全局 `API`的设计
vue 源码详解(一):原型对象和全局 API的设计 1. 从 new Vue() 开始 我们在实际的项目中使用 Vue 的时候 , 一般都是在 main.js 中通过 new Vue({el : ' ...
- Redis 配置文件 redis.conf 项目详解
Redis.conf 配置文件详解 # [Redis](http://yijiebuyi.com/category/redis.html) 配置文件 # 当配置中需要配置内存大小时,可以使用 1k, ...
- vue 源码详解(二): 组件生命周期初始化、事件系统初始化
vue 源码详解(二): 组件生命周期初始化.事件系统初始化 上一篇文章 生成 Vue 实例前的准备工作 讲解了实例化前的准备工作, 接下来我们继续看, 我们调用 new Vue() 的时候, 其内部 ...
随机推荐
- react-conponent-secondesElapsed
<!DOCTYPE html> <html> <head> <script src="../../build/react.js">& ...
- JS apply的巧妙用法以及扩展到Object.defineProperty的使用
Math.max 实现得到数组中最大的一项 var array = [1,2,3,4,5]; var max = Math.max.apply(null, array); console.log(ma ...
- 自动排版工具——XML自动排版生成工具
——支持全球化/多语言/符合W3C标准的XML自动排版工具 Boxth XML/XSL Formatter是专为XML数据或其他结构化数据源自动输出排版文件(如: PDF等)而设计的集数据格式化.版式 ...
- HashMap 与 ConcrrentHashMap 使用以及源码原理分析
前奏一:HashMap面试中常见问题汇总 HashMap的工作原理是近年来常见的Java面试题,几乎每个Java程序员都知道HashMap,都知道哪里要用HashMap,知道HashTable和Has ...
- 图说Oracle基础知识(一)
本文主要对Oralce数据库操作的基础知识进行一下梳理,以便进行归纳总结.适用于未使用过Oracle数据库的读者,或需要学习Oracle数据库方面的基础知识.如有不足之处,还请指正. 关于SQL介绍的 ...
- 添加/删除/修改Windows 7右键的“打开方式”
右键菜单添加/删除"打开方式" 此"打开方式"非系统的"打开方式",二者可以并存. 右键菜单添加"打开方式" 在HKEY ...
- LeetCode题解之Squares of a Sorted Array
1.题目描述 2.问题分析 使用过两个计数器. 3.代码 class Solution { public: vector<int> sortedSquares(vector<int& ...
- Linux重命名网卡名称
1.查看当前网卡: nmcli connection show 可以看到我有两个网卡,其中一个为中文名称,我想将配置 2 修改为net-DHCP 2.cd到/etc/sysconfig/network ...
- Python lambda介绍
转自:http://www.cnblogs.com/evening/archive/2010/03/29/2423554.html Python lambda 介绍 在学习python的过程中,l ...
- [20190101]块内重整.txt
[20190101]块内重整.txt --//我不知道用什么术语表达这样的情况,我仅仅一次开会对方这么讲,我现在也照用这个术语.--//当dml插入数据到数据块时,预留一定的空间(pctfree的百分 ...