Windows platform Web front-end environment building

Background

With the rise of different terminals (Pad, Mobile, PC), the requirements for developers are increasing, the purely browser-based response has not been able to meet the high requirements of the user experience, we often need to develop customized versions for different terminals. In order to improve the development efficiency, the demand of front-end separation is more and more valued, the backend is responsible for business, data interface, front-end responsible for presentation, interactive logic, the same data interface, we can customize the development of multiple versions.

Environment construction

Nodejs Installation

1. Download: https://nodejs.org/en/download/(the installation MSI file for Windows will add the system variable of path directly in the process, and the variable value is your installation path.) ）

2, after the installation is completed using the CMD test whether the installation is successful, method: Under the cmd input node-v.

3, the new version of node has integrated NPM, when installing node, NPM also installed, authentication method: Npm-v.

Webpack Installation

1. NPM Install webpack-g (-G = global installation)

2. Verification Method: Webpack-v

Sass Installation

1, Sass relies on the ruby environment, Ruby:http://rubyinstaller.org/downloads

2, in the installation, please tick add Ruby executables to your path this option, add environment variables.

3. After installing Ruby, in the Start menu, locate the ruby that we just installed, open start Command Prompt with Ruby.

4, enter directly on the command line: Gem install sass; update the installed Sass:gem update sass; Verify SASS Installation: Sass-v

Vue Installation

1. VUE-CLI installation command: NPM install-g vue-cli

git installation

1, Git:https://git-scm.com/downloads

Webstorm Installation

1. Software: http://www.jetbrains.com/webstorm/download/#section =windows-version

2, configuration Sass Compile: Open configuration (tools-file watchers) can see, click on the "+" sign can create a new monitoring configuration. After you create a new sass, scss, less file, Webstorm will intelligently prompt you to create a new watcher task.

3. Configure Webpack Packaging

Reference links

1, sass:https://www.w3cplus.com/sassguide/install.html

2, webpack:http://www.ferecord.com/webpack-summary.html

3, front-end separation: http://frontenddev.org/link/full-stack-development-with-nodejs-1.html

4, git:http://jingyan.baidu.com/article/020278117cbe921bcc9ce51c.html

Windows platform Web front-end environment building