vue.js之vue-cli脚手架的搭建详解


Posted in Javascript onMay 05, 2017

相比于主流的angular和react前端框架,vue在近年来也变得非常火热。他吸取了前两者的优点,同时学习曲线也更加平缓。所以本魔王准备入坑了~~

首先从vue的脚手架搭建开始吧。

这里不得不吐槽,window相对mac和linux确实在软件开发方面,非常不方便,代码打包,环境搭建等,简直爆炸~~..然而,嗯,本魔王就是在用win10,哎~

嘛,废话不多说,今天的任务就是把脚手架搭好,虽然流程不麻烦,但是npm这个东东,真的可以一不小心就磨掉一下午的时间。这里无论用命令行工具,还是Git Bash,或者WebStrom里的Terminal工具,都是可以的。

(1)检查node版本

在安装vue的环境之前,安装NodeJS环境是必须的。可以使用node -v指令检查,需要保证安装了4.0版本以上的nodeJS环境。

vue.js之vue-cli脚手架的搭建详解

当然,没有安装的话,去Node.js的官网下载一下,各种下一步,傻瓜式安装就好,非常方便。

tips:这里说一下我自己踩过的一个坑,我最开始,安装的是国外官网上最新的7.3.0的版本,然后再最后npm run dev的时候各种报错。最后的解决方式是把node的版本回退到了6.2.0。所以这里推介大家安装NodeJs 4~6之间的版本。

(2)安装vue-cli

接下来进入正题,先全局安装vue-cli。

使用指令

npm install -g vue-cli

接下来就是等等等~~毕竟npm真的很慢。如果发现在一个地方长期卡着不动,可以ctrl+c取消,然后再重新执行。

还有一种解决方式是使用淘宝的cnpm镜像。

最后做完以后,使用vue 指令检查一下是否安装成功,如果成功则结果如下:

vue.js之vue-cli脚手架的搭建详解

(3)初始化项目

先cd到自己想要创建新项目的文件夹下,然后使用vue init指令

vue init 模板类型 项目名称

 vue的模板类型,有很多种,可以使用vue list 指令查看

vue.js之vue-cli脚手架的搭建详解

我这里使用的是webpack模板,项目名叫sell,指令如下:

vue init webpack sell

然后可以一路回车下去,里边的选项可以多数是用来确认项目名称,作者,描述信息以及测试等内容,可以根据需求自己选择。(这里sell是我的项目名)

接下来进入sell文件夹,运行npm install。会发现项目中多了一个叫node_modules的文件夹,目录结构如下:

vue.js之vue-cli脚手架的搭建详解

(4)运行vue环境

接下来使用 npm run dev命令运行项目环境,效果如下:

vue.js之vue-cli脚手架的搭建详解

这里显示了已经监听了8080端口,接下来在浏览器访问http://localhost:8080/

会看到如下页面

vue.js之vue-cli脚手架的搭建详解

证明项目已启动,环境也是搭建成功啦~~

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

Javascript 相关文章推荐
JS控制图片等比例缩放的示例代码
Dec 24 Javascript
基于Jquery制作图片文字排版预览效果附源码下载
Nov 18 Javascript
学习JavaScript设计模式之装饰者模式
Jan 19 Javascript
js实现滚动条滚动到某个位置便自动定位某个tr
Jan 20 Javascript
JavaScript中的时间处理小结
Feb 24 Javascript
jstree创建无限分级树的方法【基于ajax动态创建子节点】
Oct 25 Javascript
JS通过调用微信API实现微信支付功能的方法示例
Jun 29 Javascript
Bootstrap Table快速完美搭建后台管理系统
Sep 20 Javascript
js判断传入时间和当前时间大小实例(超简单)
Jan 11 Javascript
vue动态添加路由addRoutes之不能将动态路由存入缓存的解决
Feb 19 Javascript
详解js中let与var声明变量的区别
Apr 05 Javascript
vue print.js打印支持Echarts图表操作
Nov 13 Javascript
Vue中使用vux的配置详解
May 05 #Javascript
Angular directive递归实现目录树结构代码实例
May 05 #Javascript
微信小程序开发图片拖拽实例详解
May 05 #Javascript
javascript 中关于array的常用方法详解
May 05 #Javascript
解决OneThink中无法异步提交kindeditor文本框中修改后的内容方法
May 05 #Javascript
Angular中实现树形结构视图实例代码
May 05 #Javascript
node.JS md5加密中文与php结果不一致的解决方法
May 05 #Javascript
You might like
PHP JS Ip地址及域名格式检测代码
2013/09/27 PHP
一个PHP二维数组排序的函数分享
2014/01/17 PHP
PHP中file_get_contents高?用法实例
2014/09/24 PHP
基于PHP制作验证码
2016/10/12 PHP
PHP利用超级全局变量$_GET来接收表单数据的实例
2016/11/05 PHP
ZendFramework框架实现连接两个或多个数据库的方法
2016/12/08 PHP
Yii框架弹出框功能示例
2017/01/07 PHP
Laravel实现通过blade模板引擎渲染视图
2019/10/25 PHP
PHP CURL实现模拟登陆并上传文件操作示例
2020/01/02 PHP
Laravel 框架路由原理与路由访问实例分析
2020/04/14 PHP
基于node.js的快速开发透明代理
2010/12/25 Javascript
Javascript 倒计时源代码.(时.分.秒) 详细注释版
2011/05/09 Javascript
javascript中[]和{}对象使用介绍
2013/03/20 Javascript
js播放wav文件(源码)
2013/04/22 Javascript
javascript实现下班倒计时效果的方法(可桌面通知)
2015/07/10 Javascript
js仿百度登录页实现拖动窗口效果
2016/03/11 Javascript
浅谈JS原生Ajax,GET和POST
2016/06/08 Javascript
详解能在多种前端框架下使用的表格控件
2017/01/11 Javascript
Nodejs 发送Post请求功能(发短信验证码例子)
2017/02/09 NodeJs
Vue.js中关于侦听器(watch)的高级用法示例
2018/05/02 Javascript
vue实现多个元素或多个组件之间动画效果
2018/09/25 Javascript
vue中组件的3种使用方式详解
2019/03/23 Javascript
vue项目引入ts步骤(小结)
2019/10/31 Javascript
如何使用webpack打包一个库library的方法步骤
2019/12/18 Javascript
使用pyecharts在jupyter notebook上绘图
2020/04/23 Python
Python实现字符串匹配的KMP算法
2019/04/04 Python
详解Python中namedtuple的使用
2020/04/27 Python
财务管理专业应届毕业生求职信
2013/09/22 职场文书
英语自荐信范文
2013/12/11 职场文书
运动会领导邀请函
2014/01/10 职场文书
大学自主招生自荐信范文
2014/02/26 职场文书
2014迎国庆演讲稿
2014/09/19 职场文书
领导党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
2014年行政人事工作总结
2014/12/09 职场文书
歼十出击观后感
2015/06/11 职场文书
清明节主题班会
2015/08/14 职场文书