如何快速搭建vue项目，并自动在浏览器中打开预览

如何快速搭建vue项目，并自动在浏览器中打开预览

一、安装node环境
vue-cli是基于node.js，需要用到node的npm或者cnpm包管理器进行项目依赖、插件的安装、卸载及项目打包，所以安装vue-cli脚手架之前需要先下载安装node.js。

1、node下载地址：https://nodejs.org/en/

如图所示：推荐选择大部分用户使用的版本

2、下载成功后，找到下载的node所在的文件夹位置，双击安装。

3、安装完node也就安装了npm，检查node、npm是否安装成功。

Window+R键打开运行对话框，输入cmd打开命令行弹窗，输入node -v 、npm -v查看版本号


4、为了提高我们的开发效率，可以使用淘宝的镜像：http://npm.taobao.org/

输入：npm install -g cnpm –registry=https://registry.npm.taobao.org，即可安装cnpm镜像，以后再用到npm的地方直接用cnpm来代替就好了

二、搭建vue项目环境
1、使用vue脚手架开发vue项目，须全局安装vue-cli：npm install --global vue-cli

安装成功后，即可开始创建你的vue-cli工程项目了。

2、通过cd命令进入到你要放置项目的文件夹目录，初始化创建一个基于 webpack 模板的项目: vue init webpack 项目名

3、创建成功后：cd 项目名称 按回车键进入项目
因为初始化创建项目时已经安装了node_modules依赖，此时可直接启动项目：npm run dev

运行成功后，在浏览器中输入：http://localhost:8082即可显示HelloWorld 页面。

关于vue项目热启动问题：
如上所示，当我们npm run dev运行项目，命令行提示已经运行成功，但是浏览器没有自动打开。只能自己手动输入，解决办法如下：
1）打开config => index.js

2) 在module.exports配置中找到autoOpenBrowser，默认值为false；
3）将false改为true,在命令行中重启项目，此时可以自动打开浏览器，

虽然已经自动打开了浏览器，但并不是在我想要的浏览器中打开的，我希望每次运行后自动在谷歌浏览器中打开，只要将true改为chrome，重启项目即可在chrome浏览器中打开。

到此为止，一个简单的vue-cli项目就创建成功啦，比耶~