Preface: front-end development document, the current personal preparation before their own projects under development, according to their own habits to develop writing, there is a problem or shortage of places also hope to point out, thank you - if infringement, it is not, please contact us immediately, Li delete.
Built environment
need to prepare software
. A Node.js + npm (node can go to the official website to download the latest version)
https://nodejs.org/zh-cn/
pictured above: click to download, the download is successfully installed on it
After a successful installation. Enable cmd, use node -v, corresponding version information appears, the installation is successful, and node will automatically add the path to the environment variable to go, and the installation node while also automatically npm successful installation, can likewise by npm -v , displays the version number on behalf of success.
May also be dependent on the subsequent installation program required by mirroring cnpm, the installation speed quickly than many npm
steps:
Open cmd enter the command line:
npm CNPM --registry the install -g = HTTPS: //registry.npm.taobao.org
i.e. can
b. Encoding software such as: (sublime notepad ++ webstorm etc.)
according to personal habits choose to use, I am more accustomed to using the sublime, there are many small plug-in installed their own, more convenient.
c. photoshop
cut-mapping software, easy to use UI to cut pictures of yourself psd need to write a page.
d. git （代码管理工具）
下载地址：https://git-scm.com/downloads
直接下载即可，下载成功直接安装，一直next，然后安装成功后，安装完成后，在开始菜单里找到“Git”->“Git Bash”，蹦出一个类似命令行窗口的东西，就说明Git安装成功！
安装完成后，还需要最后一步设置，在命令行输入：
$ git config --global user.name “Your Name”
$ git config --global user.email "[email protected]"
最后下载一些需要的浏览器，谷歌，火狐，360 等等就可以了。方便调试wap可以使用谷歌，方便调试pc可以使用火狐。
代码规范
基本准则
符合web标准, 语义化html, 结构表现行为分离, 兼容性优良. 页面性能方面, 代码要求简洁明了有序, 尽可能的减小服务器负载, 保证最快的解析速度
总规范
- 忽略（Omit）协议：如 background: url(http://www.google.com/images/example); 应该写background: url(//www.google.com/images/example);以方便http与https协议切换，除非必须使用某个协议
- 书写时利用IDE实现层次分明的缩进。tab键用四个空格代替。
- 标签属性使用小写
- 尾部不要留有空格，以防diff
- Use UTF-8 (no BOM), the document also joined
- Unified file naming using the lower case ".js", also recommended "-" instead of "_"
- TODO (contact) and TODO: action item, do not use @@
HTML specification refinement - Use of html5
Label default default format:
avoid src = "" problem- Tags default format: XXX </> Note: target = "_ blank" determined according to the requirements
- Label reserve link placeholder ###, see: a tag placeholder problem
- When writing the link address, you must avoid redirection, for example: href = " http://taobao.com/" , shall be to the URL address with "/"
- All labels need to comply with XHTML standards closure
- Shall be written in the form of a unified label trailing slash:
Note the space between - Avoid the use of obsolete tags, such as: the use in place of the like
- Using the data-xxx to add custom data, such as:
- Avoid using style = "xxx: xxx;" inline style sheet
- Must add a descriptive label containing form elements (input, textarea), such as
Name:
It should be written as: 1. Each CSS style attribute specification refinement after adding ";" easy compression tool "punctuation." 2. Class name, a "-" [minus connectors] The class letters separated: The "-" character is clearer than the hump. Product Line - Products - Module - submodule, when naming may also be used in this manner ID: small camel nomenclature as: firstName topBoxList footerCopyright-
空格的使用，以下规则执行：
.hotel-content {
font-weight: bold;
}
选择器与 { 之前要有空格
属性名的 : 后要有空格
属性名的 : 前（禁止）加空格 -
属性的书写顺序, 举个例子:
/* 定位 /
display: block;
position: absolute;
left: 0;
top: 0;
/ 盒模型 */
width: 50px;
height: 50px;
margin: 10px;
border: 1px solid black;
/ 其他 /
color: #efefef;
定位相关, 常见的有：display position left top float 等
盒模型相关, 常见的有：width height margin padding border 等
其他属性
按照这样的顺序书写可见提升浏览器渲染dom的性能
简单举个例子，网页中的图片，如果没有设置width和height，在图片载入之前，他所占的空间为0，但是当他加载完毕之后，那块为0的空间突然被撑开了，这样会导致，他下面的元素重新排列和渲染，造成重绘（repaint）和回流（reflow）。 我们在写css的时候，把元素的定位放在前头，首先让浏览器知道该元素是在文本流内还是外，具体在页面的哪个部位，接着让浏览器知道他们的宽度和高度，border等这些占用空间的属性，其他的属性都是在这个固定的区域内渲染的，差不多就是这个意思吧~ -
CSS注释用“/* */”表示，单行注释时，被注释对象与前后注释符各保留一个空格，且单独占一行；多行注释时，开始注释符和结束注释符各占一行。例如：
// 注释CSS
table {
border-collapse: collapse;
}
js细化规范
1.换行
每行代码应少于120个字符，多于这个数量时，可以考虑换行，“.”或“+”这类操作符应放在行尾，换行后的代码必须在换行前多一层缩进。
如果函数或方法中的参数较长，要进行适当的划分。
禁止在return关键字及要返回的表达式之间换行。例如：
function test() {
return 1;
}
2.代码行
禁止把多个短语句写在一行中，即一行只写一条语句。
if、for、do、while、switch、case、default、break、continue等语句自占一行。
if、for、do、while等所有的循环体和判断体的执行语句部分都需要用"{}"括起来，禁止省略花括号。例如：
if (i < 5) i += 1;
// 正确的
if (i < 5) {
i += 1
}
3.对齐
代码块的分界符{}，“{”跟随在上一行，并且前边有一空格隔开，“}”应独占一行并且位于同一列，同时与引用它们的语句左对齐。
在函数体的开始、类的定义以及if、for、do、while、switch、case语句中的程序都要采用如上的缩进方式。
4.空格
关键字之后必须有空格，以突出关键字。
函数名、方法名与左括号“(”之间不能保留空格，例如：
// 错误的
function getInfo () {
// code
}
// 正确的
function getInfo() {
// code
}
在声明函数表达式时，function与左括号“(”之间不能保留空格，例如：
// 错误的
var user = function () {
// code
}
// 正确的
var user = function() {
// code
}
逗号后面加空格。
赋值操作符、比较操作符、算术操作符、逻辑操作符、位域操作符，如“=”、“+=” “>=”、“<=”、“+”、“*”、“%”、“&&”、“||”等二元操作符的前后应当加空格。
“!”、"~"、"++"、"–"、"&"（地址运算符）等单目操作符前后不加空格。
“.”、"[]"前后不加空格。
5.空行
在每个类声明之后、每个函数定义结束之后都要加空行。
在一个函数体内，逻揖上密切相关的语句之间不加空行，其它地方应加空行分隔。
6.使用严格的条件判断符。用=代替，用!==代替!=
7.避免额外的逗号。如：var arr = [1,2,3,]
8.语句必须都有分号结尾，除了for，function，if，switch，try，while。
9.左花括号置于行末，右花括号置于行首。
10.下面类型的对象不建议用new构造：new Number，new String，new Boolean，new Object(用{}代替)，new Array(用[]代替)。
11.数组成员间的“,”后面需要保留一个空格。
12.禁止在js/json中使用javascript保留关键字词命名，在IE中容易造成错误。关键字（break、case、catch、continue、default、delete、do、else、finally、for、function、if、in、instanceof、new、return、switch、this、throw、try、typeof、var、void、while、with），关键词（abstract、boolean、byte、char、class、const、debugger、double、enum、export、extends、fimal、float、goto、implements、import、int、interface、long、mative、package、private、protected、public、short、static、super、synchronized、throws、transient、volatile）。
13.建议使用“+”作为换行连接符，而不是使用“\”。
14.提示信息禁止使用概括笼统的语言描述，应该简洁明了，看到信息立即能定位到错误，如提示用户信息报错用“该用户不存在”，而不是用“后台返回数据有误”、“网络超时”。
注释规范
1.html注释
注释格式： <!– 这儿是注释 –> , “-” 只能在注释的始末位置，不可置入注释文字区域
2. css注释
注释格式： /* ---- 这儿是注释 ----/
3.javascript 注释
单行注释使用 C++风格： //这儿是单行注释
多行注释使用C风格: / 这儿有多行注释 */
框架选择 （vue.js + element UI）
a. vue.js 介绍
vue.js是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据所有 Vue.js的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。
在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。
项目目录介绍
build 项目构建(webpack)相关代码
config 配置目录，包括端口号等。我们初学可以使用默认的。
node_modules npm 加载的项目依赖模块
Src 这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：
assets: 放置一些图片，如logo等。
components: 目录里面放了一个组件文件，可以不用。
App.vue: 项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录。
main.js: 项目的核心文件。
static 静态资源目录，如图片、字体等。
.xxxx文件 这些是一些配置文件，包括语法配置，git配置等。
index.html 首页入口文件，你可以添加一些 meta 信息或统计代码啥的。
package.json 项目配置文件。
README.md 项目的说明文档，markdown 格式
使用方式
举见的简单数据绑定：
Message: {{ msg }}
由于vue是单页面应用，所有的html, css, js 都放置在同一个页面。 如下
data 用于定义属性，
methods 用于定义的函数，可以通过 return 来返回函数值。
{{ }} 用于输出对象属性和函数返回值。
查看运行的页面效果。在项目的文件夹按住shift后鼠标右击出现弹窗， 点击 “在此处打开命令窗口”，就直接出现命令窗口，然后输入运行命令， npm run dev 稍等几秒钟即可出现如下，则代表运行成功
然后打开浏览器，输入http://localhost:8080/#/ 就能看到页面对应的效果。
打包方式
同样是在项目的文件夹按住shift后鼠标右击出现弹窗， 点击 “在此处打开命令窗口”，就直接出现命令窗口，然后输入运行命令，npm run build，就会将项目中所有文件压缩到指定的文件目录下，一般是在dist目录下。
然后将压缩的文件夹上传到服务器中即可。
Element UI
a. 使用方法
element-ui是一个ui库，它不依赖于vue。但是却是当前和vue配合做项目开发的一个比较好的ui框架。
Layout布局（el-row、el-col）
element-ui借用了bootstrap框架的思想，使用了栅格布局。它把单一的分栏分为24列。基本的使用方式如下
span属性：表示col所要占领的栅格占比个数。
offset属性：表示col相对偏移的个数。
Container布局容器
这些布局容器，一般充当div来使用。
el-container：外层容器。当子元素中包含 el-header 或 el-footer 时，全部子元素会垂直上下排列，否则会水平左右排列。
el-header：顶栏容器
el-footer：底部栏容器
el-aside：侧边栏容器
el-main：页面主视图
icons的使用
在element-ui 中，图标是用class就可以搞定的。
比如一个编辑的图标就可以如下表示：
按钮（el-button）
按钮是el-button来表示的
按钮是分类的，每一种类型就对应不同的button。
按钮的类型type可取值：’primary’、’success’、’warning’、’info’、’danger’
plain：决定了按钮是否使用素色系列。
round：决定了按钮是不是圆角展示。
各种button
默认按钮 主要按钮 成功按钮 警告按钮 默认按钮 默认按钮TimePicker time picker
picker-options is an object.
The properties of the object has a start, step, end, selectableRange and so on.
When setting selectableRange property, which provides a selected time points.
<Time-SELECT EL-
V-Model = "VALUE1"
: Picker-Options = "{
Start: '08: 30 ',
STEP: '00: 15',
End: '18: 30 '
}"
placeholder = "selection time "
Date picker
date picker type attribute, decided to choose the type of this type can be a date, week, month, year.
<el-date-picker
type=‘week’
v-model=‘value’
placeholder=‘选择周’
Table Table
el-table: element-ui form.
el-table-column: element- ui corresponding table columns.
table attributes: stripe attribute table can be created with a zebra.
attribute table: border attribute table can be created with a zebra.
attribute table: height attribute table may be implemented in the fixed header.
<Table-EL
: Data = "TableData"
style = "width: 100%"
height = "200 is"
Carousel revolving door
in fact equivalent to a carousel
type attribute: You can make a card carousel of
interval attributes: Define switching cycle carousel
{{ item }}
Collapse folded panels
folded panel el-collapse-item title attribute needs.
Tree tree control
data attributes: the tree represents the rendering component.
<el-tree: data = " data": props = "defaultProps" @ node-click = "handleNodeClick">
Use Demonstration
Requirements: Completion of an effect on the map can be displayed correctly in page
a. to view files in the project folder, create a new file vue, as follows,
Initial page structure is as follows:
Add the template in the html code added js code the current page need in Script, e.g., determining, calculating, interface request and the like, style added css current page required, or may be new css file, globally reference may also be present project references the new css folder recommended way. As follows:
Then write in the style required in index.css in common.css the import into the style sheet on it.
The last picture is also on the assets file below, where there is a folder of images, because the latter, many project module, it is proposed to divide the picture folder based on the module in which to put the corresponding picture, as follows:
Finally, you need to configure Page path, so convenient and direct access to the page, or to jump between pages according to link.
After successful configuration, directly following the address port number plus path configuration can enter the corresponding page. Such as:
HTTP: // localhost: 8080 / # /
Note: The path path configured to '/', which represents home.
Simple initialization operation is completed, is now written into the corresponding html structure index.vue on it.
Because it is the navigation bar, there are logo image, the right is the navigation link, it is necessary div nested layout is as follows:
Css worded as follows:
using npm run dev Run command, run the project,
Appeared on behalf of such compilation, and successful, there is no problem.
The page on the effect of the draft design may appear.
These are the simple front-end development documentation. There are deficiencies can be supplemented at any time.