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实现带省略号的分页
Apr 27 Javascript
JavaScript中return false的用法
Mar 12 Javascript
JS文件/图片从电脑里面拖拽到浏览器上传文件/图片
Mar 08 Javascript
canvas绘制一个常用的emoji表情
Mar 30 Javascript
详解AngularJS1.6版本中ui-router路由中/#!/的解决方法
May 22 Javascript
jquery拖动改变div大小
Jul 04 jQuery
快速理解 JavaScript 中的 LHS 和 RHS 查询的用法
Aug 24 Javascript
angularjs使用gulp-uglify压缩后执行报错的解决方法
Mar 07 Javascript
一步步教会你微信小程序的登录鉴权
Apr 09 Javascript
Vue实现用户自定义字段显示数据的方法
Aug 28 Javascript
详解如何在JS代码中消灭for循环
Dec 11 Javascript
JS函数参数的传递与同名参数实例分析
Mar 16 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在线生成ico文件的代码
2007/10/09 PHP
php读取csv文件并输出的方法
2015/03/14 PHP
PHP中类的继承和用法实例分析
2016/05/24 PHP
yii2中LinkPager增加总页数和总记录数的实例
2017/08/28 PHP
Laravel框架路由设置与使用示例
2018/06/12 PHP
Mootools 1.2教程 Tooltips
2009/09/15 Javascript
javascript textarea光标定位方法(兼容IE和FF)
2011/03/12 Javascript
JavaScript控制网页平滑滚动到指定元素位置的方法
2015/04/17 Javascript
jquery验证手机号是否正确实例讲解
2015/11/17 Javascript
Javascript模仿淘宝信用评价实例(附源码)
2015/11/26 Javascript
聊一聊JavaScript作用域和作用域链
2016/05/03 Javascript
JQuery获取鼠标进入和离开容器的方向
2016/12/29 Javascript
jQuery实现标签页效果实战(4)
2017/02/08 Javascript
jQuery插件zTree实现单独选中根节点中第一个节点示例
2017/03/08 Javascript
socket.io与pm2(cluster)集群搭配的解决方案
2017/06/02 Javascript
Angular如何引入第三方库的方法详解
2017/07/13 Javascript
详解webpack-dev-server 设置反向代理解决跨域问题
2018/04/18 Javascript
详解vue 项目白屏解决方案
2018/10/31 Javascript
javascript 构建模块化开发过程解析
2019/09/11 Javascript
JS实现京东商品分类侧边栏
2020/12/11 Javascript
Python入门篇之对象类型
2014/10/17 Python
python用来获得图片exif信息的库实例分析
2015/03/16 Python
Python多线程编程简单介绍
2015/04/13 Python
Python实现将Excel转换为json的方法示例
2017/08/05 Python
基于python实现在excel中读取与生成随机数写入excel中
2018/01/04 Python
Python3多线程操作简单示例
2018/05/22 Python
python石头剪刀布小游戏(三局两胜制)
2021/01/20 Python
python3的print()函数的用法图文讲解
2019/07/16 Python
Django 模型类(models.py)的定义详解
2019/07/19 Python
天游软件面试
2013/11/23 面试题
现金会计岗位职责
2013/12/05 职场文书
创业计划书的内容步骤和要领
2014/01/04 职场文书
项目建议书范文
2014/05/12 职场文书
学生党员批评与自我批评
2014/10/15 职场文书
思想道德自我评价2015
2015/03/09 职场文书
小学推普周活动总结
2015/05/07 职场文书