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

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

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

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

vue 浏览器 编辑java代码 vue项目如何在浏览器打开_html5


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

vue 浏览器 编辑java代码 vue项目如何在浏览器打开_vue 浏览器 编辑java代码_02


3、安装完node也就安装了npm,检查node、npm是否安装成功。Window+R键打开运行对话框,输入cmd打开命令行弹窗,输入node -v 、npm -v查看版本号

vue 浏览器 编辑java代码 vue项目如何在浏览器打开_css_03


vue 浏览器 编辑java代码 vue项目如何在浏览器打开_css_04


4、为了提高我们的开发效率,可以使用淘宝的镜像:http://npm.taobao.org/输入:npm install -g cnpm –registry=https://registry.npm.taobao.org,即可安装cnpm镜像,以后再用到npm的地方直接用cnpm来代替就好了

vue 浏览器 编辑java代码 vue项目如何在浏览器打开_css_05


二、搭建vue项目环境

1、使用vue脚手架开发vue项目,须全局安装vue-cli:npm install --global vue-cli

vue 浏览器 编辑java代码 vue项目如何在浏览器打开_html5_06


安装成功后,即可开始创建你的vue-cli工程项目了。2、通过cd命令进入到你要放置项目的文件夹目录,初始化创建一个基于 webpack 模板的项目: vue init webpack 项目名

vue 浏览器 编辑java代码 vue项目如何在浏览器打开_vue 浏览器 编辑java代码_07


3、创建成功后:cd 项目名称 按回车键进入项目

因为初始化创建项目时已经安装了node_modules依赖,此时可直接启动项目:npm run dev

vue 浏览器 编辑java代码 vue项目如何在浏览器打开_css_08


运行成功后,在浏览器中输入:http://localhost:8082即可显示HelloWorld 页面。关于vue项目热启动问题:

如上所示,当我们npm run dev运行项目,命令行提示已经运行成功,但是浏览器没有自动打开。只能自己手动输入,解决办法如下:

1)打开config => index.js

vue 浏览器 编辑java代码 vue项目如何在浏览器打开_html5_09


2) 在module.exports配置中找到autoOpenBrowser,默认值为false;

vue 浏览器 编辑java代码 vue项目如何在浏览器打开_css_10


3)将false改为true,在命令行中重启项目,此时可以自动打开浏览器,

vue 浏览器 编辑java代码 vue项目如何在浏览器打开_vue.js_11


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

vue 浏览器 编辑java代码 vue项目如何在浏览器打开_html5_12


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