Web Front end Development specification

1. Document Writing Specification

1.1 Basic requirements

1) The properties and values of the page label are enclosed in double quotation marks

2) All pages are encoded using Utf-8

1.2 Writing specifications

1) Document type declaration and coding: Unified for HTML5 Declaration <! DOCTYPE html>; encoding Unified for <meta charset= "Utf-8" >

2) Avoid the introduction of styles in the page <style></style> this way. The style of the chain is uniformly written in

3) Introduction of JS library file

Compressed Edition format: jquery-1.8.2.min.js

Non-compressed: jquery-1.8.2.js

4) class or ID naming rules: class= "Right_nav".

JS file name with hump rules. such as: Leftmenu.js.

5) for a style that contains only one declaration, it is recommended to put the statement on the same line for readability and for quick editing. For styles with multiple declarations, you should also divide the declaration into multiple lines. Each selector and attribute declaration always uses a new row.

/* Single line *  /. Span1 {  width:  60px;  }. span2  {  width:  140px;  }

/* Multiple lines */. Sprite  {

Display:  inline-block;

Width:  16px;

Height:  15px;

Background-image:  url (... /img/sprite.png); }

6) In general, a page ID should not be applied more than once to the style, and the only valid use of ID is to determine the location of the page or the entire site.

7) Use 4 spaces instead of tab or mix space +tab as indentation.

8) JS prohibits global definition of variables.

2. Naming conventions

1) Page structure

Container: Container Header: Header content: Content/container

Page body: Main footer: Footer nav: Nav Sidebar: Sidebar

Column: Column page perimeter control overall layout width: Wrapper

Middle: Left Right center

(2) Navigation

Navigation: Nav Main navigation: Mainbav sub-nav: Subnav

Top navigation: Topnav side navigation: Sidebar left navigation: Leftsidebar

Right navigation: Rightsidebar: Menu submenu: Submenu

Title: Title Abstract: summary

(3) function

Logo: Logo ads: Banner login: Login Login: Loginbar

Registration: Regsiter Search: Searching Ribbon: Shop title: Title

Join: Joinus State: Status button: BTN scroll: Scroll

Tabs: Tab Article list: Listing hint information: Msg current: Present

Tips: Tips Icon: Icon notes: Note Guide: Guild

Services: Service hotspot: Hot Press: News Download: Download

Vote: Vote partners: Partner Links: Link Copyright: Copyrights

3. Vue Specification

(1) Example definition specification

Export default{

Data () {

return {

Instance parameter definition (a method that requires the time return parameter in the component to define the *object type can only listen and render its own child elements)

}

}，

methods:{

Todosomething () {

Instance Event definition (note: Invoking an instance parameter in a child event of an instance event requires attention to this point of the parameter)

}

}，

computed:{

Computeddata () {

computed attribute definitions (Note: Each function must have a return value)

}

},

Created () {

Invoke event when Dom and El are ready to initialize

}，

Mounted () {

Invoke event after Dom and El ready to complete (recommended)

}

}

(2) Vue file Introduction specification

<script>

Import definition name from path (note that you need to use a relative path when packaging with Webpack)

</script>

<style>

@import file name (Note: Reference path needs to use relative path)

</style>

(3) Vue-router configuration specification

Vue-router Asynchronous Load Mode

Const APP = r + = Require.ensure ([], () = R (Require ('./app.vue ')), ' App ')//call in asynchronous invocation

4.webpack configuration file specification

(1) Overwrite the egress configuration based on the asynchronous loading of the routing configuration

Output: {

Path:path.resolve (__dirname, './dist '),//Configure compression path
Publicpath: '/dist/',//configure compressed root path
FileName: ' [name].js ',//configure compressed file name
Chunkfilename: ' [name].js? [Hash] '//configure asynchronous load name and hash value
}

(2) To configure the HTML file (in order to better configure the Webpack full automation, the index.html dynamic rendering into the compressed file)

Introduced html-webpack-plugin npm install html-webpack-plugin--save-dev webpack.config.js:const htmlwebpackplugin = req Uire (' Html-webpack-plugin ');

Plugins: [//config Plugin

New Htmlwebpackplugin ({
Template: './src/index.html '
})
]

(3) individually package CSS or scss for better optimization

Introducing Extract-text-webpack-plugin npm Install Extract-text-webpack-plugin--save-dev webpack.config.js:const Extrac Ttextplugin=require (' Extract-text-webpack-plugin ');

{

Test:/\.css$/,//write CSS/SCSS packaging rules
Use:ExtractTextPlugin.extract ({
Fallback: "Style-loader",
Use: "Css-loader"
})
}

Plugins: [

New Extracttextplugin ("Styles.css"),//Configuration plugin-Export file configuration
]

Vue Development Specification

1. Basic Principles

1.1 , structure, style, behavior separation

1.2 , unify four spaces indent (indent unified), do not use tab or tab, Space mix

1.3 , code comments are written uniformly on the right side of the code you want to comment on (if a long code requires comments you can add a pair of comments before and after:/*xxx start*/and/*xxx end*/, short code uses a single-line comment//comment content, placed in the row)

1.4. Naming specification: Use semantic variables to define variables, and define variables with parent-named _ sub-semantics when sub-variables are defined

2 , HTML (. Vue)

2.1 , HTML attributes should appear in a specific order to ensure legibility. Because the Vue framework is used, the same will place the VUE directive behind the HTML attribute, such as the id,class,name,vue-instruction and event triggering.

2.2,class and ID word letter lowercase, when multiple words are composed, use underscore _ to separate

2.3 ,class should be named after function or content, not in the form of expression

2.4 , the definition of attributes, using double quotation marks uniformly

3 , CSS

3.1 , compiling with SCSS

3.2 , Code organization, organization of code snippets in component units

3.3 , develop consistent annotation specifications such as:

/*------------------------block-----------------------------*/

/*----------------------Child block One------------------------*/

Code

/*----------------------Subgroup block two------------------------*/

Code

4 , Main technology of the platform

4.1, using Axios ^0.15.3 to make data request rendering

4.2, use Elment-ui ^1.0.5 frame to build Spa page

4.3, using the Vue ^2.1.0 framework to build a SPA application platform

4.4, using webpack ^2.1.0-beta.25 build tool

Web Front end Development specification