下面详细给大家介绍电子+ vue的使用,具体内容如下所示:
。现如今前端框架数不胜数,尤其是角,vue吸引一大批前端开发者,在这个高新技术快速崛起的时代,自然少不了各种框架的结合使用。接下来是介绍电子+ vue的结合使用。
<强> 2.电子是什么? ?
对于我来说电子相当于一个浏览器的外壳,可以把网页程序嵌入到壳里面,可以运行在桌面上的一个程序,可以把网页打包成一个在桌面运行的程序,通俗来说就是软件,比如像QQ,优酷,网易音乐等等。功能的强大超出你的想象,可以构建跨平台桌面程序,本身支持node . js,可以使用node . js的一些模块。想要深入了解可以查看官网的详细介绍。
电子官网:https://electronjs.org/
<强> 3.电子+ vue的联合使用
有vue基础跟nodejs基础的开发人员使用电子那就更顺风顺水了,没有节点基础的,有vue或者角基础的也可以学习,学起来可能会吃力些,不过也没关系,很多东西有大神已经封装好了,直接使用就行。
接下来教你手把手搭建一个电子+ vue的开发环境。
第一步:安装nodejs
windows下的NodeJS安装是比较方便的(v0.6.0版本之后,支持windows本地),只需要登陆官网(http://nodejs.org/),便可以看到下载页面。
2,下载完成后双击运行进行安装,安装过程基本直接“下一个”就可以了(全部采用默认方式安装)。(windows的安装msi文件在过程中会直接添加路径的系统变量,变量值是你的安装路径,例如“C: \ Program Files \ nodejs”)。
3,安装完成后可以使用cmd (win + r然后输入cmd进入)测试下是否安装成功。方法:在cmd下输入节点- v,出现下图版本提示就是完成了NodeJS的安装。
4, npm的安装。由于新版的NodeJS已经集成了npm,所以之前npm也一并安装好了。同样可以使用cmd命令行输入“<代码> npm - v”来测试是否成功安装。如下图,出现版本提示便好了。
5,常规NodeJS的搭建到现在为止已经完成了,急不及待的话你可以在“cmd”输入“节点”进入节点开发模式下,输入你的NodeJS第一句:“hello world”——输入:控制台。日志(“hello world”)。
第二步:搭建vue开发环境
1。安装淘宝npm镜像
由于在国内使用npm是非常慢的,所以在这里我们推荐使用淘宝npm镜像,使用
淘宝的cnpm命令管理工具可以代替默认的npm管理工具:<代码>美元npm install-g cnpm——注册表=https://registry.npm.taobao.org;
淘宝镜像安装成功之后,我们就可以全局vue-cli脚手架,输入命令:<代码> cnpm安装——globalvue-cli>
第三步:搭建vue项目
使用命令创建项目,一步步选择之后开始等等项目创建完成
完成后如下:
成功之后修改启动项,打开demo> config> index.js,具体修改如下:
执行命令,出现如下效果说明项目已经运行成功:
