详解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 相关文章推荐
jQuery中prepend()方法用法实例
Dec 25 Javascript
jQuery在线选座位插件seat-charts特效代码分享
Aug 27 Javascript
JS锚点的设置与使用方法
Sep 05 Javascript
微信小程序 swiper组件轮播图详解及实例
Nov 16 Javascript
Web前端开发之水印、图片验证码
Nov 27 Javascript
分享一道关于闭包、bind和this的面试题
Feb 20 Javascript
AngularJS实现单一页面内设置跳转路由的方法
Jun 28 Javascript
Vue列表页渲染优化详解
Jul 24 Javascript
如何让你的JS代码更好看易读
Dec 01 Javascript
vue和webpack项目构建过程常用的npm命令详解
Jun 15 Javascript
vue实现城市列表选择功能
Jul 16 Javascript
jQuery利用FormData上传文件实现批量上传
Dec 04 jQuery
详解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新手谈谈我的学习心得
2007/02/25 PHP
使用 MySQL Date/Time 类型
2008/03/26 PHP
php抽奖小程序的实现代码
2013/06/18 PHP
PHP写的资源下载防盗链类分享
2014/05/12 PHP
PHP return语句的另一个作用
2014/07/30 PHP
php比较两个字符串长度的方法
2015/07/13 PHP
PHP模拟post提交数据方法汇总
2016/02/16 PHP
php实现当前页面点击下载文件的实例代码
2016/11/16 PHP
List Installed Hot Fixes
2007/06/12 Javascript
js设置cookie过期当前时间减去一秒相当于立即过期
2014/09/04 Javascript
javascript制作的滑动图片菜单
2015/05/15 Javascript
jQuery自动添加表单项的方法
2015/07/13 Javascript
基于cookie实现zTree树刷新后展开状态不变
2017/02/28 Javascript
jQuery 实现双击编辑表格功能
2017/06/19 jQuery
Vue监听一个数组id是否与另一个数组id相同的方法
2018/09/26 Javascript
详解如何修改 node_modules 里的文件
2020/05/22 Javascript
vue webpack build资源相对路径的问题及解决方法
2020/06/04 Javascript
Python导出数据到Excel可读取的CSV文件的方法
2015/05/12 Python
Python使用gensim计算文档相似性
2016/04/10 Python
Python 中Pickle库的使用详解
2018/02/24 Python
python实现随机梯度下降法
2020/03/24 Python
Python with语句和过程抽取思想
2019/12/23 Python
解决flask接口返回的内容中文乱码的问题
2020/04/03 Python
解决jupyter notebook显示不全出现框框或者乱码问题
2020/04/09 Python
python 使用OpenCV进行简单的人像分割与合成
2021/02/02 Python
JSF界面控制层技术
2013/06/17 面试题
技术经理的自我评价范文
2013/12/03 职场文书
找工作最新求职信
2013/12/22 职场文书
竞聘副主任科员演讲稿
2014/01/11 职场文书
人力资源作业细则
2014/03/03 职场文书
给校长的一封建议书
2014/03/12 职场文书
行政人事岗位职责
2014/03/17 职场文书
转让协议书
2015/01/27 职场文书
爱心捐赠活动简讯
2015/07/20 职场文书
html中显示特殊符号(附带特殊字符对应表)
2021/06/21 HTML / CSS
Python爬虫 简单介绍一下Xpath及使用
2022/04/26 Python