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

vue.js开发环境搭建

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

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

php探针

php探针

 程序名称: ITlearner PHP探针 程序版本: v1.0下载地址:phpcheck-v1.0.zip 演示地址: http://www.9enjoy.com/phpcheck/phpcheck.php 功能描述: 服务器主要参数: &nbs...

H-ui html命名规范

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

ThinkPHP二级联动开发demo下载

ThinkPHP二级联动开发demo下载

ThinkPHP二级联动.zip...

Eclipse的Aptana studio插件安装

Eclipse安装Aptana插件【在线安装】1. 在线安装:Help->Install New Software...->Add...->Name: "Aptana", Location: http:...

php生成二维码的几种方式整理及使用实例

php生成二维码的几种方式整理及使用实例

本文整理了一些php生成二维码的方式:1.google开放api;2.php类库PHP QR Code;3.libqrencode;4.QRcode Perl CGI & PHP scripts感兴趣的朋友可以参考下哈1.google开放api 复制代码代码如下:$urlToEnc...

50个网址助你发现高质量图标

50个网址助你发现高质量图标

高品质的图标总能让网页设计项目事半功倍,网页设计师也可以将注意力集中到更重要的地方。今天我们整合了50个免费的的高素质图标站点,让你再也不用为没有图标用而烦恼,不论是设计网页、应用还是制作信息图,图标信手拈来!当然,小图标本身的应用范畴远不止于此。社交图片、名片设计、幻灯片设计、横幅标语、海报设计,...

发表评论

访客

看不清,换一张

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