详解Vue使用命令行搭建单页面应用


Posted in Javascript onMay 24, 2017

使用命令行搭建单页面应用

我们来看一下最后完成的效果:

详解Vue使用命令行搭建单页面应用

大纲

1. 下载 node, git, npm

2. 使用命令行安装一个项目

一、 下载工具

node, git 的下载大家可以去官网自行下载就可以了。

下面说一说安装 npm,npm 是在以上两个都安装的情况下才可以的。

国内直接 git npm 非常慢,所以我们到 taobao 的 npm 镜像下面去下载安装 镜像地址>>

详解Vue使用命令行搭建单页面应用

打开安装好的 git bash

详解Vue使用命令行搭建单页面应用

1 . 在 Git Bash 输入镜像的地址:

详解Vue使用命令行搭建单页面应用

下载成功后,输入 cnpm -v 看看是否安装成功了

详解Vue使用命令行搭建单页面应用

2 . 安装好 npm 下面就好办了,我们回到 Vue 官方网站看使用命令行安装步骤: 猛戳回到官网>>

详解Vue使用命令行搭建单页面应用

按照上面的步骤进行安装:( 以上只要是 npm 的都要改成 cnpm )

1. 全局安装 vue-cli $ cnpm install -g vue-cli

详解Vue使用命令行搭建单页面应用

2. 创建一个基于 " webpack "的模板的项目 $ vue init webpack my-pro

详解Vue使用命令行搭建单页面应用

接下来会有一系列的问题:

详解Vue使用命令行搭建单页面应用

3. 安装依赖 $ cd my-pro 切换到刚才创建的 my-pro 目录下面

详解Vue使用命令行搭建单页面应用

4. 输入 $ cnpm install 下载依赖 node_module 模块 可以在目录下面看到 node 依赖模块已经下载好了。

详解Vue使用命令行搭建单页面应用

5. 到了最后一步了:输入 cnpm run dev

由于我一开始创建过一个项目,node 的 8080 端口被占用了,所以下面就报错了,如图:

详解Vue使用命令行搭建单页面应用

一个简单粗暴的方法就是关闭当前的 node 进程:

详解Vue使用命令行搭建单页面应用

最最最最最最最最最最最最最最最最最最最最最最最最最最最后一步:

详解Vue使用命令行搭建单页面应用

下面我们打开 http://localhost:8080 看看吧。终于成功了!!!

详解Vue使用命令行搭建单页面应用

PS: 记录一些命令

1. $ cnpm install --global vue-cli

2. $ vue init webpack-simple demo

3. $ cd demo/

4. $ cnpm install

5. $ npm run dev

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS中剪贴板兼容性、判断复制成功或失败
Mar 09 Javascript
彻底搞懂JS无缝滚动代码
Jan 03 Javascript
JS数学函数Exp使用说明
Aug 09 Javascript
javascript实现带下拉子菜单的导航菜单效果
May 14 Javascript
java中String类型变量的赋值问题介绍
Mar 23 Javascript
jQuery实现的浮动层div浏览器居中显示效果
Feb 03 Javascript
开发Vue树形组件的示例代码
Dec 21 Javascript
node 使用 async 控制并发的方法
May 07 Javascript
详解新手使用vue-router传参时注意事项
Jun 06 Javascript
es6中比较有用的7个技巧小结
Jul 12 Javascript
微信小程序npm引入vant-weapp的踩坑记录
Aug 01 Javascript
Vue 使用Props属性实现父子组件的动态传值详解
Nov 13 Javascript
详解Vue 非父子组件通信方法(非Vuex)
May 24 #Javascript
微信小程序 支付功能(前端)的实现
May 24 #Javascript
微信小程序 选项卡的简单实例
May 24 #Javascript
JS回调函数基本定义与用法实例分析
May 24 #Javascript
解决jQuery ajax动态新增节点无法触发点击事件的问题
May 24 #jQuery
详解前后端分离之VueJS前端
May 24 #Javascript
JQuery Ajax 异步操作之动态添加节点功能
May 24 #jQuery
You might like
PHP调用三种数据库的方法(2)
2006/10/09 PHP
PHP strncasecmp字符串比较的小技巧
2011/01/04 PHP
PHP异常处理定义与使用方法分析
2017/07/25 PHP
JQuery 学习笔记 选择器之五
2009/07/23 Javascript
图片无缝滚动代码(向左/向下/向上)
2013/04/10 Javascript
JS+css 图片自动缩放自适应大小
2013/08/08 Javascript
Jquery 数组操作大全个人总结
2013/11/13 Javascript
javascript屏蔽右键代码
2014/05/15 Javascript
JavaScript中的console.log()函数详细介绍
2014/12/29 Javascript
PHP 数组current和next用法分享
2015/03/05 Javascript
深入学习jQuery Validate表单验证(二)
2016/01/18 Javascript
使用jquery如何获取时间
2016/10/13 Javascript
JavaScript浏览器对象模型BOM(BrowserObjectModel)实例详解
2016/11/29 Javascript
JavaScript Ajax实现异步通信
2016/12/14 Javascript
JS中mouseup事件丢失的原因与解决办法
2017/06/14 Javascript
JavaScript指定断点操作实例教程
2018/09/18 Javascript
Vue-cli打包后部署到子目录下的路径问题说明
2020/09/02 Javascript
[02:47]DOTA2亚洲邀请赛 HR战队出场宣传片
2015/02/07 DOTA
[49:41]NB vs NAVI Supermajor小组赛A组 BO3 第一场 6.2
2018/06/03 DOTA
pandas or sql计算前后两行数据间的增值方法
2018/04/20 Python
python 读取目录下csv文件并绘制曲线v111的方法
2018/07/06 Python
python编辑用户登入界面的实现代码
2018/07/16 Python
python 实现对数据集的归一化的方法(0-1之间)
2018/07/17 Python
Python 获取 datax 执行结果保存到数据库的方法
2019/07/11 Python
如何利用Python模拟GitHub登录详解
2019/07/15 Python
Python使用Excel将数据写入多个sheet
2020/05/16 Python
Python是什么 Python的用处
2020/05/26 Python
怎么快速自学python
2020/06/22 Python
汉语言文学毕业生自荐信范文
2014/03/24 职场文书
爱情寄语大全
2014/04/09 职场文书
初中生评语大全
2014/04/24 职场文书
村委会换届选举方案
2014/05/03 职场文书
投标售后服务承诺书
2015/04/29 职场文书
本科毕业论文致谢词
2015/05/14 职场文书
Redis超详细讲解高可用主从复制基础与哨兵模式方案
2022/04/07 Redis
利用Python实时获取steam特惠游戏数据
2022/06/25 Python