【WEB开发】webpack+vue构建前端开发环境

一、前言。

1.1、使用vue开发前端，可以适用pc端加移动端，由于最近有个项目需要在移动端上开发网页，所以使用了vue这个框架。

1.2、开发移动端，还需要注意资源的配置和打包，所以打算使用webpack的构建工具，所以整体的需求变成了vue + webpack构建项目需要的前端开发环境。

二、开始讲述环境设置。

2.1、参考以下两个链接，先学习一遍。

webpack入坑之旅   Webpack基本用法

在2.2中，会给出完整的一键环境搭建。

2.2、首先申明，依照webpack入坑之旅（五）  搭建的环境中，先暂时去掉"node-sass": "^3.4.2",  这个安装太麻烦，尤其是

在windows上安装，很是麻烦，需要安装vc++编译的一些底层库，所以，先暂时去掉css文件的压缩打包。（等有时间后，再专门做下研究）。

2.3、phpstorm支持vue文件查看。

【File】->【Settings】->【Plugins】，在Plugins中搜索vue，安装vue.js插件后，重启PHPStorm，即可查看vue文件了。

2.4、PHPStorm支持查看ES6的文件。

【File】->【Settings】->【Languages & Frameworks】->【JavaScript】，在JavaScript language version 中选择 ECMAScript 6。

2.5、PHPStrom + webpack，修改文件时，webpack-dev-sever模式下不会自动刷新

参考这篇文档来修改：webstorm修改文件，webpack-dev-server不会自动编译刷新

在PHPStrom中的修改路径是【File】->【Settings】->【System Settings】->【Syschronization】

选择将最后一项 Use "safe write"(save changes to a temporary file first) 勾选项去掉即可。

2.6、使用vuex来管理vue项目。

参考链接：vuex.vuejs.org