Chapter 2 project preparation

Chapter 2 project preparation

Including project needs analysis, preparation scaffolding initialization code, project presentation and catalog icon font, style and other public resources.

1, preparation of public resources

stylus folder

file name	description
variable.styl	Style file variable (defined as color specifications, text size specification)
reset.styl	Reset the default style file
base.styl	The basic style (body, html, this may be referenced variable.styl to use its variables)
icon.styl	Fonts icon
index.styl	Body style (introduced reset.styl, base.styl, icon.styl)

fonts folder

file name	description
music-icon.ttf	Font file

image Public Pictures

2, the initialization code scaffold

vue init webpack vue-music

• The need for routing y
• Whether eslint y
• Unit testing whether n
• Whether with e2e test n
  

cd vue-music
cnpm install
cnpm run dev

3, the establishment of the project file, making the project more clear structure

src directory	description
api	Data interaction
common	Public font style picture script files (font put fonts, image pictures, js plugins, stylus style)
components	Component files
router	Routing file
store	vuex centralized management of state

4, modify the configuration of the rules eslint (.eslintrc file)

After using the code beautification beauty, in general, the code will check compliance with the requirements of eslint. However, there is a space (space-before-function-paren) and files remain at the end of a blank line (eol-last) two rules prohibit function before the parentheses, no corresponding matching rules in the beauty. If these two requirements are not necessarily comply with, you can .eslintrc file, set it to 0

'eol-last': 0,
'space-before-function-paren': 0

Thus, when writing code, regardless of code format. When save, automatically landscaping, and meet the verification requirements of eslint

Spread

1. You can install the plug-in vscode eslint with vscode
   

2. Gear icon - Settings - enter autoFixOnSave- tick
   
   so it can automatically every time you save the formatting, but by default only supports javascript .js file

3. Gear icon - Settings - Input validate - tick to be automatically formatted file, the default is all checked
   
   so that once saved, then you can add your own code is automatically formatted to comply with the rules of the code oh eslint

5, install the plug

babel-runtime and babel-polyfill plugin allows some low version of browser support for es6

cnpm install --save babel-runtime
cnpm install --save-dev babel-polyfill
cnpm install --save fastclick

• polyfill-babel
  Babel default only convert new JavaScript syntax, without converting the new API. E.g., Iterator, Generator, Set, Maps , Proxy, Reflect, Symbol, Promise and other global object, and a number of methods defined in a global object (such Object.assign) will not be translated. If you want to use these new objects and methods, you need to provide a polyfill for the current environment
• Runtime-Babel
  Babel-Runtime order to reduce duplication of code is born.
  babel-polyfill Babel not solve the problem of transition to the new API, but directly inserted into helper functions in the code, can result in contamination of the global environment, and different code file contains duplicate code, compiled code size leads to large. (Example: the above help function _defineProperty likely will be inserted in a lot of code module file)
  Babel To solve this problem, a separate package babel-runtime function to provide tools to compile the module, enable the plug-babel-plugin after -transform-runtime, Babel tools will be used in babel-runtime function
  (refer to: the role of babel-runtime and babel-polyfill introduction and use )
• fastclick
  solution moving end 300ms delay

6, the use of plug-in scaffolding vue-cli

 import 'babel-polyfill'// 引入babel-polyfill
 import fastclick from 'fastclick'// 引入fastclick
 fastclick.attach(document.body)// 使用fastclick

7, the installation stylus stylus-loader

cnpm install stylus stylus-loader  --save-dev

8, the configuration file path

When we introduced files in common, we usually could write

import './common/stylus/index.styl'

Now we can webpack.base.conf.js, look resolve this function
__dirname the current directory build, ... (looking up) to the corresponding directory dir.

function resolve (dir) {
  return path.join(__dirname, '..', dir)
}

In webpack.base.conf.js configuration

 resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'common': resolve('src/common'),
      'components': resolve('src/components'),
      'base': resolve('src/base'),
      'api': resolve('src/api'),
    }
    },

So that we can directly write the

import 'common/stylus/index.styl'