1. Document writing specification
1.1 Basic requirements
1) Attributes and values of page tags are enclosed in double quotes
2) All pages are encoded in utf-8
1.2 Writing Specifications
1) Document type declaration and encoding: unified as html5 declaration <!DOCTYPE html>; unified encoding as <meta charset="utf-8">
2) Avoid using <style></style> to introduce styles in the page. The styles of external links are written in <head></head> uniformly. Non-special js files. Unified at the bottom of the page.
3) The imported js library file
Compressed version format: jquery-1.8.2.min.js
Uncompressed: jquery-1.8.2.js
4) Class or id naming rules: class="right_nav".
Js file names use camel case rules. Such as: leftMenu.js.
5) For styles that contain only one statement, it is recommended to put the statement on the same line for readability and quick editing. For styles with multiple declarations, the declarations should still be split across multiple lines. Always use a new line for each selector and property declaration.
/* single line*/ .span1{width:60px;} .span2{width:140px;}
/* Multiline*/ .sprite {
display:inline-block;
width:16px;
height:15px;
background-image:url(../img/sprite.png); }
6) In general a page ID should not be applied to styles more than once, the only valid use of ID is to determine the location in a web page or an entire site.
7) Use 4 spaces instead of tabs or mix spaces+tabs for indentation.
8) js prohibits the global definition of variables.
2. Naming conventions
1) Page structure
Container: container Header: header Content: content/container
Page body: main Footer: footer Navigation: nav Sidebar: sidebar
Column: column The periphery of the page controls the overall layout width: wrapper
Left and right center: left right center
(2) Navigation
Navigation: nav Main Navigation: mainbav Subnav: subnav
Top nav: topnav Side nav: sidebar Left nav: leftsidebar
Right Navigation: rightsidebar Menu: menu Submenu: submenu
Title: title Abstract: summary
(3) Function
Logo: logo Advertising: banner Login: login Login bar: loginbar
Registration: regsiter Search: search Ribbon: shop Title: title
join: joinus status: status button: btn scroll: scroll
Tab page: tab Article list: list Prompt information: msg current: current
Tips: tips Icon: icon Notes: note Guide: guild
Service: service Hot: hot News: news Download: download
Vote: vote Partner: partner Links: link Copyright: copyright
3. Vue specification
(1) Instance definition specification
export default{
data(){
return {
//Instance parameter definition (in the component you need to use the time return parameter method definition *object type can only monitor and render its own child elements)
}
}，
methods:{
todosomething(){
//Definition of instance events (Note: When calling instance parameters in sub-events of instance events, you need to pay attention to the this pointer of the parameters)
}
}，
computed:{
computedData(){
// Calculated property definition (Note: each function must have a return value)
}
},
created(){
//Call the event when dom and el are ready to initialize
}，
mounted(){
//Call the event after dom and el are ready (recommended)
}
}
(2) Vue file introduction specification
<script>
import defines the name from the path (note that you need to use a relative path when packaging with webpack)
</script>
<style>
@import file name (Note: the reference path needs to use a relative path)
</style>
(3) vue-router configuration specification
vue-router asynchronous loading method
const App = r => require.ensure([], () => r(require('./App.vue')), 'app') //The call is made asynchronously
4. webpack configuration file specification
(1) Rewrite the export configuration according to the asynchronous loading of the routing configuration
output: {
path: path.resolve(__dirname, './dist'), //Configure the compressed path
publicPath: '/dist/', //Configure the compressed root path
filename: '[name].js', //Configure the compressed file name
chunkFilename: '[name].js?[hash]' //Configure the asynchronous loading name and hash value
}
(2) Configure the html file (in order to better configure the full automation of webpack, dynamically render index.html into the compressed file)
引入html-webpack-plugin npm install html-webpack-plugin --save-dev webpack.config.js:const HtmlWebpackPlugin = require('html-webpack-plugin');
plugins: [ //Configure plugins
new HtmlWebpackPlugin({
template:'./src/index.html'
})
]
(3) Package css or scss separately for better optimization
引入extract-text-webpack-plugin npm install extract-text-webpack-plugin --save-dev webpack.config.js :const ExtractTextPlugin=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"), //Configure plugin - export file configuration
]
1. Basic principles
1.1 、 Separation of structure, style and behavior
1.2 , unify the indentation of four spaces (the indentation can be unified), do not use Tab or Tab, space mix and match
1.3 . The code comments are uniformly written on the right part of the code to be annotated (if a long piece of code needs to be commented, a pair of comments can be added before and after: /*xxx start*/ and /*xxx end*/, single-line comments// comments for short codes content, inline)
1.4. Naming convention: use the semantic variable method to define variables, and use parent naming_child semantics to define variables when sub-variables are defined
2 , HTML (.vue)
2.1 . HTML attributes should appear in a specific order to ensure readability. Due to the use of the vue framework, the same vue instructions are placed behind the HTML attributes, such as id, class, name, vue-instructions and event triggers.
2.2 、 The letters of class and id are lowercase. When composed of multiple words, they are separated by underscore _
2.3 、 class should be named after the function or content, not the expression
2.4 . For the definition of attributes, use double quotation marks uniformly
3、 CSS
3.1 , Compile with scss
3.2 , code organization, organize code segments in units of components
3.3 . Develop consistent annotation specifications such as:
/*-----------------------chunk---------------------- -------*/
/*----------------------Subchunk one---------------------- --*/
code
/*----------------------Subchunk two ---------------------- --*/
code
4. The main technology of the platform
4.1、Use Axios ^0.15.3 for data request rendering
4.2 . Use the elment-ui ^1.0.5 framework to build SPA pages
4.3、Use VUE ^2.1.0 framework to build SPA application platform
4.4、Use webpack ^2.1.0-beta.25 build tool