转自:

搭建项目之前,请先安装好node,和git工具。可以在官网上下载。安装完毕后,可以在命令行输入 node -v 查看是否安装完成

(node安装同时也会帮你把npm安装好),可以使用 npm -v 查看。


搭建之前,给大家看一下整体目录结构。

node16用哪个版本eslint_css



下面我们开始创建项目。


、可以使用Git工具也可以自己手动创建文件夹,在这里我直接使用Git命令创建文件。

首先在我的f盘上创建一个项目,名为es6Test.


、进入es6test,创建三个文件夹,分别是app,server,tasks.

:用来放置前端代码,包括css,js,views等。

:创建服务器代码

:构建整个前端代码编译,服务器的定时刷新等功能。


node16用哪个版本eslint_服务器_02



、目前我们只创建了对应的文件夹,我们还要放具体的内容。所以下面我们开始创建文件。

进入app目录,创建css,js,views文件夹。

 

在js里创建一个class目录用来放置类文件。

 

在class中创建一个类文件test.js

 

在js中在初始化一个入口文件index.js

 

初始化两个模板文件error.ejs和index.ejs(在views中创建)

node16用哪个版本eslint_服务器_03



、回到server目录,我们输入一个express命令表示要使用ejs模板引擎。

 (我们可以看到server目录下出现了如下所示的文件以及文件夹)

 


node16用哪个版本eslint_服务器_03


接下来输入

npm install  命令安装服务器代码。


node16用哪个版本eslint_es6_05


、回到构建目录即task目录。我们要创建很多目录的js,比如脚板的编译,模板的自动更新。创建一个util目录放置常见脚本。


node16用哪个版本eslint_node16用哪个版本eslint_06



目前目录差不多创建完毕,接下来回到根目录,还要一个package.json,它的作用是安装文件依赖包必须要用到这个文件。使用如下命令。


node16用哪个版本eslint_css_07



有了这个文件,我们就可用使用npm命令安装依赖包。

下面我们还要创建一个babelrc文件。(必须是写成这样,babel编译文件上要用)

还要创建gulp文件。名为gulpfile.babel.js.

node16用哪个版本eslint_服务器_08



目录大概就是这样。