"Web Development" Webpack+vue build front-end development environment __vue

first, the preface.

1.1, the use of Vue development front-end, can be applied to the PC side and mobile end, because recently a project needs to be on the mobile end of the Web page, so the use of VUE this framework.

1.2, development mobile end, also need to pay attention to resource configuration and packaging, so intend to use webpack build tools, so the overall requirements become Vue + Webpack build project needs of the front-end development environment.

second, start to talk about environment settings.

2.1, refer to the following two links, learn first.

The basic usage of webpack webpack into the pit

In 2.2, a complete one-click environment is built.

2.2, the first affirmation, in accordance with the webpack into the pit of the environment, the first time to remove the "Node-sass": "^3.4.2", this installation is too troublesome, especially

Install on Windows, very troublesome, need to install VC + + compiled some of the underlying library, so, temporarily remove the CSS file compression packaging. (when there is time, then do a special study).

2.3, Phpstorm support vue file view.

"File"-> "Settings"-> "Plugins", in Plugins search vue, install vue.js plug-ins, restart Phpstorm, you can view the Vue file.

2.4, Phpstorm support to view ES6 files.

"File"-> "Settings"-> "Languages & Frameworks"-> "JavaScript", in JavaScript language version, select ECMAScript 6.

2.5, Phpstrom + webpack, modify the file, Webpack-dev-sever mode will not automatically refresh

Refer to this document to modify: Webstorm Modify the file, Webpack-dev-server does not automatically compile the refresh

The modification path in Phpstrom is "File"-> "Settings"-> "System Settings"-> "Syschronization"

Choose to remove the last item with the "Safe write" (save changes to a temporary-first) check option.

2.6, use Vuex to manage Vue project.

Reference Link: vuex.vuejs.org