UNPKG

4.82 kBMarkdownView Raw
1# Getting Started
2## 欢迎使用jdf。
3jdf是一个前端工程框架，通过提供若干命令行，jdf可以创建工程，编译，在线调试，输出压缩代码等。
4### 安装jdf
5```
6npm install -g jdfx
7```
8安装完成后运行`jdf -h`，查看jdf所有命令。
9
10#### 注意
11实际安装中，windows可能遇到第一次安装时，node-sass依赖安装不成功的问题，这个时候卸载jdfx，`npm remove -g jdfx`, 然后再重装`npm install -g jdfx`就ok了，再次安装的速度会比第一次安装快很多。
12
13### 新建工程
14* 使用`jdf init xxx`来创建一个符合jdf规范目录的工程，比如创建一个名为helloworld的工程：
15
16```
17jdf init helloworld
18```
19
20* `cd helloworld`进入工程根目录，在工程根目录下运行如下命令创建一个widget：
21
22```
23~/jd/web$ cd helloworld/
24~/jd/web/helloworld$ jdf widget --create myWidget
25```
26
27根据提示一直输入`y`，创建myWidget包含的文件，默认提供模板vm,脚本js,样式scss,数据json，这些都是可选的，更多关于widget的信息请参见[widget](core_widget.md).
28下面的命令在没有指明的情况下，都在helloworld目录下运行。
29* 创建widget后，得到的目录结构如下：
30```
31helloworld/
32├── config.json
33├── css
34│   └── i
35├── html
36│   └── index.html
37├── js
38└── widget
39 └── myWidget
40 ├── component.json
41 ├── myWidget.js
42 ├── myWidget.json
43 ├── myWidget.scss
44 └── myWidget.vm
45```
46
47这样，一个jdf工程的创建就完成了。
48
49### 进入开发阶段
50#### 引用widget到html页面
51* 新建html/myPage.html文件
52* 将myWidget引入myPage.html
53
54```
55<body>
56{%widget name="myWidget" %}
57</body>
58```
59
60利用`{%widget %}`标签引用widget，jdf在执行编译和输出命令时会将widget里的信息编译进来。当然，如果只需要引用widget的css和vm文件，那么可以加`type`属性：
61
62```
63{%widget name="myWidget" type="css, vm" %}
64```
65
66#### 编写widget内容
67* 在`myWidget.vm`中输入：
68
69```
70<p class="p1">welcome <span>FEer</span></p>
71<p class="p2">hope you enjoy jdf!</p>
72```
73
74* 在`myWidget.scss`中输入：
75
76```
77.p1 {
78 font-size: 18px;
79 span {
80 color: blue;
81 }
82}
83.p2 {
84 color: red;
85}
86```
87
88#### 启动开发调试模式
89欢迎进入欢快的开发阶段！
90
91* 运行`jdf build -o`，编译工程并自动打开浏览器，假设打开的网址为:
92`http://192.168.191.1:8080`，
93可以通过点击页面的文件路径一直跳转到:
94`http://192.168.191.1:8080/html/myPage.html`
95
96* myPage.html页面显示效果
97
98 ![myPage](http://img10.360buyimg.com/uba/jfs/t3859/296/484880740/2242/f0dafc20/58527f94N53cb0cbc.jpg)
99
100* 随意改动html,vm,js,scss文件，保存，可以在浏览器中看到改动同步刷新了。
101
102你的项目开发进度良好！
103
104
105#### 输出项目
106项目开发完以后，需要将编译后的文件放到线上服务器或者CDN，因此需要输出项目内容。
107
108执行`jdf output`，jdf默认会将项目输出到`build`目录中，如果在config.json配置了`projectPath`，那么就会输出到`build/projectPath`中，例如
109
110```
111projectPath: 'helloworld/1.0.0'
112```
113
114那么输出的目录结构为：
115
116```
117build/
118└── helloworld
119 └── 1.0.0
120 ├── html
121 │   └── index.html
122 │ └── myPage.html
123 └── widget
124 └── myWidget
125 ├── component.json
126 ├── myWidget.css // scss -> css
127 ├── myWidget.js
128 └── myWidget.json
129```
130
131恭喜你的项目开发完毕，让我们启动服务器试试输出的项目能不能工作吧！
132
133#### 启动服务器
134进入build/helloworld/1.0.0目录，运行`jdf server`命令，开启一个静态服务器来查看输出结果是否正确。
135
136```
137~/jd/web/helloworld/build/helloworld/1.0.0$ jdf server -o
138```
139
140由于`jdf output`会根据你在config.json文件中的配置定制输出，通过`jdf server`来查看这些配置是否会影响页面效果是很有必要的。
141
142检查完毕，页面和预期完全一致
143
144#### 上传到测试服务器测试
145代码开发完毕，后端和业务方需要查看效果，这个时候就可以把代码上传到测试服务器，让大家都能访问。
146
147jdf上传的测试服务器可以是基于HTTP、FTP、SFTP协议的服务器，在config.json中配置好服务器地址：
148
149```
150host: xx.xx.xx.93
151```
152
153然后执行：
154```
155jdf upload
156```
157
158这样就上传到测试服务器了，邀请团队的小伙伴来查看你的成果吧。
159
160## 结语
161通过上述操作，你已经掌握jdf的主要功能，可以进行完整的工程开发了。jdf还有很多特性，我们也提供了完善的说明文档，欢迎探索。
162