和大家分享一下在学习es6的过程中所积累的东西,也希望更多的朋友能够互相学习

首先创建项目目录

打开你的命令行,什么文件下都可以,大家请随意,我自己用的git,输入 mkdir es6

  

创建一个完整的项目要有服务器,要有完成的借口提供我们数据,还要构建前端代码的编译和数据的刷新,所以我们要创建三个并行的模块

第一:创建app,放置前端代码        输入mkdir app

第二:创建服务器        输入mkdir server

第三:创建构建工具         输入mkdir tasks

创建好对应的目录,那么对应目录下的文件和文件夹也要一一创建好

aap目录下要包含css文件,js文件和模板目录放置html文件     要先进入app目录      输入cd app/

 输入mkdir css

输入mkdir js

输入mkdir views

es6的规则比较严谨,对类的把握比较严格,比如js下就要分为类进行,那么我们就要在相应的文件夹下继续创建

输入mkdir js/class

空的目录是没有任何作用的,接下来我们要初始化几个文件

首先:先创建一个空的类文件        输入touch js/class/test.js

其次:初始化一个入口文件        输入touch js/index.js

css目前暂时先不创建,因为这对我们的总体是不影响的

接下里我们要再创建两个模板文件(为啥是ejs而不是html,因为在通过接下来的实例中,我所用的数据信息,通过的服务器代码expess   node.js来做的,他的模板引擎就是ejs,为了方便大家也可以直接就理解为html)

第一:错误的模板   输入touch views/error.ejs

第二:入口的模板    输入touch views/index.ejs

直到此处app里面的创建算是基本完成,那么接下来我们要进入server目录来创建         输入cd ../server/

server目录

在创建server文件时我们要借用express脚手架,而使用这个脚手架的前提下要先安装node.js,这个应该都难不倒大家(安装好的,我们进行下一步)

直接运行express脚手架     输入express -e .(含义:express 启动脚手架 -e就是使用ejs这个模板引擎 . 表示在当前目录执行)

输入npm install,安装好后,接下来回到我们的构建工具目录  输入 cd../tasks/

tasks构建工具目录 

这个目录下我们要创建很多文件的js,文件的合并,脚本的编译和模板的自动更新等等   其中有一个是需要输入命令行参数的,我们输入命令行工具,他要对其做解析,那我们就先来创建

创建一个util,放置一些常见的脚本        输入 mkdir util

初始化文件一个文件        输入touch util/args.js

到此我们的目录基本创建了一些和一些初始文件,那么在我们根目录文件下我们还要创建哪些文件才算是将我们呢的es6的目录创建完成呢?我们先回到我们的根目录下

输入 cd../

第一:项目要安装依赖包,必须要有一个package.json     我们可以自动创建    输入npm init    会出现让你输入项目的名称,点回车,项目的版本号(可以自己输入的),剩下的不想写就不用写的,            直接一路回车就可以了,最后输入y,同意。这就已经创建好了package.json,有了这个文件,我们就可以通过npm install创建我们想要的npm依赖包

第二:设置babel编译工具的配置文件  输入touch .babelrc(这里要注意了,这个文件时不能随便起名字的,babel编译时会自动去找这个文件,如果找不到,他就没法找到配置,所以名称是固定           的)

第三:gulp配置文件(我们整个项目的构建工具是使用的gulp工具做编译的)输入 touch gulpfile.babel.js(官网上回要求我们创建一个gulpfile.js,而我们接下来的项目是运行在es6环境之下,如            果不加babel,那么在运行的时候会报错,这个名称是固定的)

总结:这就是我们整个项目的es6的整个目录的创建和初始文件的创建,接下来就是我们正式的进行编码的过程,请继续关注我的后续博客的更新

es6零基础学习之项目目录创建(一)的更多相关文章

  1. vue零基础学习--搭建项目

    一.script引入(联系使用,小型项目) 直接下载并用 <script> 标签引入,Vue 会被注册为一个全局变量. <script src="https://cdn.j ...

  2. es6零基础学习之构建脚本(二)

    编译器打开你的es6项目 首先:创建我们的第一个脚本,tasks/util/args.js      在文件里面要先引入一个包,处理命令行参数 import yargs from 'yargs'; / ...

  3. MongoDB实战开发 【零基础学习,附完整Asp.net示例】

    MongoDB实战开发 [零基础学习,附完整Asp.net示例] 阅读目录 开始 下载MongoDB,并启动它 在C#使用MongoDB 重构(简化)代码 使用MongoDB的客户端查看数据 使用Mo ...

  4. 零基础学习hadoop到上手工作线路指导(编程篇)

    问题导读: 1.hadoop编程需要哪些基础? 2.hadoop编程需要注意哪些问题? 3.如何创建mapreduce程序及其包含几部分? 4.如何远程连接eclipse,可能会遇到什么问题? 5.如 ...

  5. 零基础学习openstack【完整中级篇】及openstack资源汇总

    1.你是如何学习openstack的?2.你对openstack的组件了解多少?3.你认为openstack该如何学习? 一直想写关于openstack的方面的内容,今天终于整理完成.算是完成一桩心事 ...

  6. 如何从零基础学习VR

    转载请声明转载地址:http://www.cnblogs.com/Rodolfo/,违者必究. 近期很多搞技术的朋友问我,如何步入VR的圈子?如何从零基础系统性的学习VR技术? 本人将于2017年1月 ...

  7. Yaf零基础学习总结5-Yaf类的自动加载

    Yaf零基础学习总结5-Yaf类的自动加载 框架的一个重要功能就是类的自动加载了,在第一个demo的时候我们就约定自己的项目的目录结构,框架就基于这个目录结构来自动加载需要的类文件. Yaf在自启动的 ...

  8. Yaf零基础学习总结4-Yaf的配置文件

    在上一节的hello yaf当中我们已经接触过了yaf的配置文件了, Yaf和用户共用一个配置空间, 也就是在Yaf_Application初始化时刻给出的配置文件中的配置. 作为区别, Yaf的配置 ...

  9. [iOS]关于零基础学习iOS开发的学习方法总结

    关于零基础学习iOS开发的学习方法总结 最近很多零基础来参加蓝鸥培训的学生经常会问到一些学习方法的问题,就如下我自己见过的好的学习方法一起讨论一下. 蓝鸥iOS开发技术的学习路线图 程序员的主要工作是 ...

随机推荐

  1. 【C++小白成长撸】--(续)双偶数N阶魔阵

    原理: 把双偶数N阶魔阵均分为(N/4)^2个4阶魔阵(4*4) 每个魔阵的对角线都标为"-1",其余位置标为"0" 从第一个位置(a[0][0])从左到右,从 ...

  2. JS中的运算符和JS中的分支结构

    JS中的运算符 1.算术运算(单目运算符) + .-.*. /. %取余.++自增 .--自减 +:两种作用,链接字符串/加法运算.当+两边全为数字时,进行加法运算:当+两边有任意一边为字符串时,起链 ...

  3. 201521123003《Java程序设计》第5周学习总结

    1. 本章学习总结 1.1 尝试使用思维导图总结有关多态与接口的知识点. 参考资料: 百度脑图 XMind 2. 书面作业 Q1.代码阅读:Child压缩包内源代码 1.1 com.parent包中C ...

  4. #黑客社会工程学攻防演练#[Chapter 1]

    1.1 什么是社会工程学 社会工程学(Social Engineering)是关于建立理论通过自然的.社会的和制度上的途径并特别强调根据现实的双向计划和设计经验来一步一步地解决各种社会问题.社会工程学 ...

  5. 201521123004 《Java程序设计》第10周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常与多线程相关内容. 答: 异常的概念上周的思维导图大致体现,这周就归纳一下错误调试 由于多线程的内容比较散,我就直接用文字总结 ...

  6. 201521123106 《Java程序设计》第13周学习总结

    1. 本周学习总结 以你喜欢的方式(思维导图.OneNote或其他)归纳总结多网络相关内容. 2. 书面作业 1. 网络基础 1.1 比较ping www.baidu.com与ping cec.jmu ...

  7. Vue.js项目模板搭建

    前言 从今年(2017年)年初起,我们团队开始引入「Vue.js」开发移动端的产品.作为团队的领头人,我的首要任务就是设计 整体的架构 .一个良好的架构必定是具备丰富的开发经验后才能搭建出来的.虽然我 ...

  8. JSP知识点大纲图

    这是我整理出来的JSP知识点大纲图,具体的内容都可以在我的博文中找到-.

  9. Java数据库连接泄漏应对办法-基于Weblogic服务器

    临时解决连接泄漏方案 当连接泄漏真的发生了,无可避免时,我们采取以下方案,可临时解决连接问题,以争取修改代码的时间. 步骤1:选择待分析的JNDI数据源 步骤2(可选):可配置最大数据连接数量 步骤3 ...

  10. 云计算之阿里仓库停止openstack mitaka源报错“No package centos-release-openstack-mitaka available.”

    之前学习了一个月的openstack的mitaka版本,写完脚本放置一段时间,最近准备正式部署突然发现 No package centos-release-openstack-mitaka avail ...