前端开发文档（开发之前个人的准备）

编程语言 2019-06-25 06:03:16 阅读次数: 0

前言： 前端开发文档，目前自己正在开发的项目之前的个人准备，按照自己的开发习惯来编写，有问题或者不足的地方还望指出，谢谢~ 如有侵权，实属无意，请立即联系，立删。

环境搭建
需要准备的软件
a. Node.js + npm （可以去node官网下载最新的版本）
https://nodejs.org/zh-cn/
在这里插入图片描述
如上图：点击即可下载，下载成功后安装就可以了

安装成功后。启用cmd，使用node -v ,出现对应的版本信息，说明安装成功，而且node会自动将路径添加到环境变量中去，且安装node的同时，也会自动安装成功npm，可同样通过npm -v，显示版本号就代表成功。
在这里插入图片描述

也可以通过镜像cnpm 来安装后续项目需要的依赖，这个安装速度会比npm 快速很多
步骤：
打开cmd 输入命令行:
npm install -g cnpm --registry=https://registry.npm.taobao.org
即可
在这里插入图片描述

b． 编码软件 比如：（sublime notepad++ webstorm等等 ）
根据个人习惯选择使用， 我比较习惯使用sublime ,里面有自己安装的很多小插件，比较方便。

c. photoshop
切图软件，方便使用UI给的psd 自己动手切需要的图片，来写页面。

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, 结构表现行为分离, 兼容性优良. 页面性能方面, 代码要求简洁明了有序, 尽可能的减小服务器负载, 保证最快的解析速度
总规范

  1. 忽略（Omit）协议：如 background: url(http://www.google.com/images/example); 应该写background: url(//www.google.com/images/example);以方便http与https协议切换，除非必须使用某个协议
  2. 书写时利用IDE实现层次分明的缩进。tab键用四个空格代替。
  3. 标签属性使用小写
  4. 尾部不要留有空格，以防diff
  5. 使用 UTF-8 (no BOM)，文档中也加入
  6. 文件命名统一使用小写”.js”，同时推荐”-”而不是”_”
  7. TODO(contact) 以及TODO: action item，不要使用@@
    HTML 细化规范
  8. 使用html5的规范
  9. 标签默认缺省格式：缺省时文字 避免出现src="" 问题
  10. 标签缺省格式：xxx</> 注：target="_blank" 根据需求决定
  11. 标签预留链接占位符使用###，参见：a标签占位符问题
  12. 书写链接地址时, 必须避免重定向，例如：href=”http://taobao.com/”, 即须在URL地址后面加上“/”
  13. 所有标签需要符合XHTML标准闭合
  14. 一律统一标签结尾斜杠的书写形式：
    注意之间空格
  15. 避免使用已过时标签，如： 而用 等代替
  16. 使用data-xxx来添加自定义数据，如：
  17. 避免使用style="xxx:xxx;"的内联样式表
  18. 必须为含有描述性表单元素(input, textarea)添加label, 如

姓名:

须写成:

CSS 细化规范 1. 每个样式属性后加 ";" 方便压缩工具"断句"。 2. Class命名，采用” - “[减号连接符] 对class中的字母分隔： 用"-"隔开比使用驼峰是更加清晰。 产品线-产品-模块-子模块，命名的时候也可以使用这种方式 ID: 小驼峰式命名法 如： firstName topBoxList footerCopyright

  1. 空格的使用，以下规则执行：
    .hotel-content {
    font-weight: bold;
    }
    选择器与 { 之前要有空格
    属性名的 : 后要有空格
    属性名的 : 前（禁止）加空格

  2. 属性的书写顺序, 举个例子:
    /* 定位 /
    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等这些占用空间的属性，其他的属性都是在这个固定的区域内渲染的，差不多就是这个意思吧~

  3. 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

默认按钮 主要按钮 成功按钮 警告按钮 默认按钮 默认按钮
级联选择（el-cascader） //组件

TimePicker 时间选择器
picker-options是一个对象。
这个对象的属性有start、step、end、selectableRange等。
当设置selectableRange属性时，它提供了一个时间选择的点。
<el-time-select
v-model=“value1”
:picker-options="{
start:‘08:30’,
step:‘00:15’,
end:‘18:30’
}"
placeholder=“选择时间”

日期选择器
日期选择器的type属性，决定选择的类型，这个type可以是date、week、month、year。

<el-date-picker
type=‘week’
v-model=‘value’
placeholder=‘选择周’

Table 表格
el-table：element-ui的表格。
el-table-column：element-ui的表格所对应的列。
table属性中：stripe属性可以创建带斑马纹的表格。
table属性中：border属性可以创建带斑马纹的表格。
table属性中：height属性可实现固定表头的表格。
<el-table
:data=“tableData”
style=“width: 100%”
height=“200”



Carousel 走马灯
其实就相当于一个轮播
type属性：可以让轮播卡片化
interval属性：定义轮播切换的周期


{{ item }}


Collapse 折叠面板
折叠面板的el-collapse-item需要title属性。

与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；
在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。
el-menu el-menu：表示导航菜单的盒子。 el-submenu：表示导航菜单的子盒子选项。 el-menu-item：表示导航菜单的每一项。 其中submenu和munuitem都是用于属性index。

Tree 树形控件
data属性：代表着树形组件的渲染。
<el-tree :data=“data” :props=“defaultProps” @node-click=“handleNodeClick”>

使用示范

在这里插入图片描述
要求： 完成上图的效果，能在页面正确显示

a. 先在项目中的view文件夹中，新建一个vue文件，如下，

页面初始化结构如下：
在这里插入图片描述
在这里插入图片描述
在template 中添加html代码，在script添加当前页面需要的js代码，例如，判断，计算，接口请求等，style中添加当前页面需要的css,或者也可以新建css文件，进行全局引用也可以，目前项目推荐引用新建css文件夹的方式。如下：
然后在index.css中写入需要的样式，在common.css中import进入样式表就可以了。
在这里插入图片描述
在这里插入图片描述
最后图片是也是放在assets 文件下面，其中有一个images 的文件夹，因为后期，项目模块很多，所以建议根据模块来分图片文件夹，在其中放入对应的图片即可，如下：

最后需要配置页面路径，这样方便在页面直接访问，或者根据链接进行页面间的跳转。
在这里插入图片描述
配置成功后，地址端口号后面直接加配置的path就可以进入对应的页面。如：
http://localhost:8080/#/
注：路径path配置为 ‘/ ‘, 即代表首页。

简单的初始化操作完成，现在是在index.vue 中写入对应的html结构就可以了。

因为是导航栏，有logo 图片，右边是链接导航，所以需要div嵌套，布局如下：
在这里插入图片描述

Css写法如下：
在这里插入图片描述
使用npm run dev 运行命令，运行项目后，

出现这样代表编译完成，且成功，没有问题。

此时页面就可以出现设计稿中的效果了。
在这里插入图片描述

以上就是简略的前端开发文档。有不足的可以随时补充。

猜你喜欢

转载自blog.csdn.net/jyy5806/article/details/93467832
今日推荐
周排行
Leetcode简单题61~80
解决zookeeper磁盘IO高的问题
多线程相关方法详解
Maven-setting.xml文件详解
Maven 项目的 classpath 理解
渊亭科技大数据笔试题
配置JVM内存分配
计算机网络个人学习笔记 （三）网络层 ：第三部分 连载
js中两个等号(==)和三个等号(===)的区别
用C程序自动打开电脑上的程序
每日归档
更多
2024-09-18(0)
2024-09-17(0)
2024-09-16(0)
2024-09-15(0)
2024-09-14(0)
2024-09-13(0)
2024-09-12(0)
2024-09-11(0)
2024-09-10(0)
2024-09-09(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022