许久未曾更新文章，虽然不是程序员但还是忘怀不了撸码的觉悟.

1.VUE环境搭建

1. 安装node.js (项目开发前准备) Node.js官网：https://nodejs.org/en/ 进入Node.js官网，选择下载并安装Node.js。安装过程只需要点击“下一步”即可，非常简单。 node.js安装完成后： 验证Node.js是否安装好，在windows下，win+r召唤出运行窗口，输入cmd打开命令行窗口。(任意路径的cmd下)输入node -v即可得到对应的Node.js版本。 npm包管理器是集成在Node.js中了，所以在安装Node.js的时候就已经自带了npm。

npm -g install npm复制代码

npm install -g cnpm -registry=https://registry.npm.taobao.org复制代码

 cnpm install -g vue-cli 复制代码

vue init webpack my-vue-project复制代码

 cnpm install 复制代码

npm run build复制代码

npm run dev复制代码

localhost:8080复制代码

2.VUE调试工具vue-devtools的安装与使用

1. 配置nginx：前后端分离项目一般都要解决跨域问题，配好nginx安装目录/conf/nginx.conf的server模块
   
2. 配置项目主机地址：前端项目里需要有个config文件夹，里面要有host.js或者config.js文件，定义nginx转域后的主机地址+端口号（也就是nginx.conf里面server模块的server_name值+listen的端口号）。git项目拉下来没有的话自己加一个，文件内容范例下面用${}表示nginx.conf里面server模块对应的字段值

   const host = 'http://${server_name}:${listen}/server/';
   export {host};复制代码

3. 配置windows的HOSTS：由于是在本机上启用前端项目，需要将127.0.0.1和nginx代理后的域名做对应。找到系统的HOSTS文件（win7系统下在C:\Windows\System32\drivers\etc里面），增加一条“127.0.0.1 ${server_name}”。否则本地启动前端项目后浏览器访问nginx代理后的域名会发生dns错误。
   
4. 第一次配置好后，以后启动只用两步：

   启动nginx 
   进入前端项目根目录，cmd运行npm run dev复制代码

config/：定义代理的域名dist
dist/: 整个前端项目用webpack打包后的目标存放文件夹，里面一般有bundle.js文件
lib/: 开发时引用的一些依赖文件，最经典的就是jquery
node_modules/：上面介绍的用npm对项目依赖组件进行安装时就放在这个文件夹里。
src/：自己写的源代码
index.html：主页入口文件
package.json和webpack.config.js：这两个文件应该是组件依赖关系和管理打包的配置文件？
不太懂，反正没有是不能cnpm install、cnpm run build、cnpm run dev的。复制代码

4.开发环境

运行

npm run dev复制代码

 webpack配置文件为：

webpack.dev.conf.js复制代码

 浏览器自动刷新：

将webpack.dev.conf.js中的 hot设置为 false复制代码