当前位置:首页 > 开发素材 > 正文内容

vue.js开发环境搭建

admin9年前 (2017-02-20)开发素材2050

1.安装node.js(http://www.runoob.com/nodejs/nodejs-install-setup.html)

2.基于node.js,利用淘宝npm镜像安装相关依赖

 在cmd里直接输入:npm install -g cnpm –registry=https://registry.npm.taobao.org,回车,等待安装...

3.安装全局vue-cli脚手架,用于帮助搭建所需的模板框架

在cmd里 1)输入:cnpm install -g vue-cli,回车,等待安装...

            2).输入:vue,回车,若出现vue信息说明表示成功

4.创建项目

在cmd里输入:vue init webpack vue_test(项目文件夹名),回车,等待一小会儿,依次出现‘git’下的项,可按下图操作

5.安装依赖

在cmd里  1).输入:cd vue_test(项目名),回车,进入到具体项目文件夹

             2).输入:cnmp install,回车,等待一小会儿

回到项目文件夹,会发现项目结构里,多了一个node_modules文件夹(该文件里的内容就是之前安装的依赖)

基于脚手架创建的默认项目结构如下图所示:

6.测试环境是否搭建成功

方法1:在cmd里输入:cnpm run dev

方法2:在浏览里输入:localhost:8080(默认端口为8080)

运行起来后的效果如下图所示:


分享到:

扫描二维码推送至手机访问。

版权声明:本文由云河空间发布,如需转载请注明出处。

本文链接:https://yuyunhe.cn/index.php/post/228.html

分享给朋友:

“vue.js开发环境搭建” 的相关文章

精选12个时尚的 CSS3 效果【附源码】

精选12个时尚的 CSS3 效果【附源码】

这里是精选的12个很炫的 CSS3 效果。CSS3 是对 CSS 规范的一个很大的改善和增强,它使得 Web 开发人员可以很容易的在网站中加入时尚的效果。以前很多需要编写复杂的 JavaScript 代码才能实现的效果,如今只需要简单的写几句 CSS3 代码就能实现。超炫的 CSS3 页面切换动画效...

H-ui 文件夹命名规范

admin     后台管理   app       应用   article   资讯  &...

ThinkPHP二级联动开发demo下载

ThinkPHP二级联动开发demo下载

ThinkPHP二级联动.zip...

10个顶级的CSS UI开源框架

10个顶级的CSS UI开源框架

随着CSS3和HTML5的流行,我们的WEB页面不仅需要更人性化的设计理念,而且需要更酷的页面特效和用户体验。作为开发者,我们需要了解一些宝贵的CSS UI开源框架资源,它们可以帮助我们更快更好地实现一些现代化的界面,包括一些移动设备的网页界面风格设计。本文分享了10个顶级的CSS UI开源框架,有...

多行文本溢出显示省略号(...)的方法

现在的浏览器都支持text-overflow:ellipsis属性,用来实现单行文本的溢出显示省略号,但是这个属性并不支持多行文本。那么有没有方法在多行文本上实现同样的效果呢?-webkit-line-clampWebkit支持一个名为-webkit-line-clamp的属性,他其实是一个WebK...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。