es6零基础学习之项目目录创建(一)

和大家分享一下在学习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的整个目录的创建和初始文件的创建,接下来就是我们正式的进行编码的过程,请继续关注我的后续博客的更新

 

posted on 2017-10-13 11:49  share水边  阅读(205)  评论(0编辑  收藏  举报

导航