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

vue.js开发环境搭建

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

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开发环境搭建” 的相关文章

H-ui html命名规范

 default/index.html    首页   list.html             ...

CSS3移入图片放大效果

CSS3移入图片放大效果引言我们有时看到一些网站有的照片,当我们将鼠标移入的时候,会有个放大的动画效果,今天我就来讲讲这个效果是如何实现的。demo最终实现效果:点击进入涉及知识点transform : scale()transition如何实现1Ps : demo 以 Webkit 为例,其它浏览...

HTML5离线存储之Application Cache

HTML5离线存储之Application Cache

关于html5的离线存储,大致可分为:localStorage, sessionStorageindexedDBweb sqlapplication cache可以在chrome的debug工具/Resources下产看,下面来着重说明一下Application Cache。访问流程当我们...

Composer在windows下的安装使用

Composer是 PHP 用来管理依赖(dependency)关系的工具。你可以在自己的项目中声明所依赖的外部工具库(libraries),Composer 会帮你安装这些依赖的库文件。官网:https://getcomposer.org/中文相关网站:http://www.phpcomposer...

Cygwin国内比较快的镜像

 windows上装一个cygwin,只占很小的空间,windows就可以当unix用了。今天找到两个不错的国内镜像。  1)上海交大的FTP:ftp://ftp.sjtu.edu.cn/sites/cygwin.com/pub/cygwin/  2)163的镜像:ht...

webstorm 2016 激活破解

下载地址:链接: https://pan.baidu.com/s/1bEvT62 密码: id6v2016.2.2 版本的破解方式: 安装以后,打开软件会弹出一个对话框;选择“license server” 输入:http://114.215.133.70:410172016.2.3 版本...

发表评论

访客

看不清,换一张

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