详解vue.js 开发环境搭建最简单攻略


Posted in Javascript onJune 12, 2017

做为一名学习路上的小白,起初就对 vue.js 有着莫名的好感,知道 vue.js 也能实现 angular.js 的双向绑定等一些功能后,妥妥的先把 angular.js 和 node.js 丢到后面再去学, 看了看 vue 文档,首先要搭建一个开发环境,因为自己太小白,看了一些搭建开发环境的博客,表示专业术语太多依然还是一脸懵逼。

具体流程大概如下:

详解vue.js 开发环境搭建最简单攻略 

很难理解?没关系,我也没理解,跟着操作就行了,我是window系统。

1.安装node.js

起初是很不理解的,我学 vue.js 还要掌握 node.js吗?这是没有关联的,NPM是NodeJS下的一个包管理工具,它可以很方便的帮你管理(可以简单理解为下载)各类前端的框架或插件,类似于PHP的composer,Twitter 的 Bower 一样。使用Vue不需要安装NodeJS,这里下载NodeJS只是为了使用其内置的NPM工具,所以不需要你有任何的NodeJS基础,只需要运行 npm install vue 命令,即可把 Vue 的最新版本下载至 node_modules 文件夹。如果你只是想手动引入 Vue ,只需要在「https://vuejs.org/js/vue.js」进行下载,或者通过CDN进行引入 。

2.安装淘宝镜像

在这里,有一个问题,使用 npm 会导致网速很慢,对于大陆用户,建议将 npm 的注册表源设置为国内的镜像,可以大幅提升安装速度。

打开命令行,输入以下命令

npm install -g cnpm --registry= https://registry.npm.taobao.org

详解vue.js 开发环境搭建最简单攻略 

直接复制上去就好,下面会出现一串代码,表示在安装,无需理会。

3. 全局安装 vue-cli 脚手架

继续在命令行输出以下命令:

cnpm install webpack -g

详解vue.js 开发环境搭建最简单攻略 

-g 表示全局,输出上面的指令之后,下面又会有一串代码,表示安装无需理会,安装完成之后可以检测一下,输出 vue ,会显示这样的情况,表示安装成功。

详解vue.js 开发环境搭建最简单攻略

4.安装 webpack

继续在命令行输入以下命令:

vue init webpack my-first-vue-project

创建一个基于 webpack 模板的新项目,后面的 my-first-vue-project 指的是这个项目的名称,你也可以换成其它的。

详解vue.js 开发环境搭建最简单攻略 

然后会下载安装这套模板,命令行会出现几个问题,你跟着下面的步骤回答就可以了。

?Project name
?Project description 
?Author 
?Use ESLint to lint your code?(y/n)
?Setup unit test with Karma + Mocha?(y/n)
?Setup e2e tests with Nightwatch?(y/n)

第一行问你项目名称,输入 my-first-vue-project
第二行问你项目描述,输入 this is my vue
第三行问作者的名字,输入 你自己的名字就好
第四、五、六行都直接在后面输入 NO 。

这个项目就初始化完成了,你可以在电脑上查看,在当前目录下就会多一个文件夹叫做 my-first-vue-project,里面会有些文件。

详解vue.js 开发环境搭建最简单攻略

5. 用CD命令行查找进入到工程目录

详解vue.js 开发环境搭建最简单攻略

6.安装依赖

在当前工程目录下输入命令行:

cnpm install

详解vue.js 开发环境搭建最简单攻略

安装完成之后,在电脑上回到 my-first-vue-project 这个文件夹,里面会多一个 node_modules 文件夹。

详解vue.js 开发环境搭建最简单攻略

7. 启动项目
接下来继续输入以下命令行:

npm run dev

详解vue.js 开发环境搭建最简单攻略 

服务器启动成功之后,下面就会给出一串指令告诉你:

Listening at http://localhost:8080

然后到浏览器进入这个页面可以看见这样的页面:
详解vue.js 开发环境搭建最简单攻略

这样就表示开发环境搭建结束啦。

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

Javascript 相关文章推荐
javascript YUI 读码日记之 YAHOO.util.Dom - Part.4
Mar 22 Javascript
基于jquery & json的省市区联动代码
Jun 26 Javascript
利用javascript实现禁用网页上所有文本框,下拉菜单,多行文本域
Dec 14 Javascript
jQuery级联操作绑定事件实例
Sep 02 Javascript
百度UEditor编辑器如何关闭抓取远程图片功能
Mar 03 Javascript
深入学习jQuery Validate表单验证
Jan 18 Javascript
基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭)
Sep 02 Javascript
Node.js利用js-xlsx处理Excel文件的方法详解
Jul 05 Javascript
使用Vue-Router 2实现路由功能实例详解
Nov 14 Javascript
vue-cli常用设置总结
Feb 24 Javascript
使用淘宝镜像cnpm安装Vue.js的图文教程
May 17 Javascript
微信小程序清空输入框信息与实现屏幕往上滚动的示例代码
Jun 23 Javascript
Ionic + Angular.js实现验证码倒计时功能的方法
Jun 12 #Javascript
微信小程序 实现点击添加移除class
Jun 12 #Javascript
JavaScript该如何学习 怎样轻松学习JavaScript
Jun 12 #Javascript
微信小程序实现缓存根据不同的id来进行设置和读取缓存
Jun 12 #Javascript
利用Jasmine对Angular进行单元测试的方法详解
Jun 12 #Javascript
原JS实现banner图的常用功能
Jun 12 #Javascript
手把手搭建安装基于windows的Vue.js运行环境
Jun 12 #Javascript
You might like
php继承中方法重载(覆盖)的应用场合
2015/02/09 PHP
ubutu 16.04环境下,PHP与mysql数据库,网页登录验证实例讲解
2017/07/20 PHP
laravel框架模型、视图与控制器简单操作示例
2019/10/10 PHP
Javascript里使用Dom操作Xml
2006/09/20 Javascript
javascript按位非运算符的使用方法
2013/11/14 Javascript
如何将网页表格内容导入excel
2014/02/18 Javascript
js不能获取隐藏的div的宽度只能先显示后获取
2014/09/04 Javascript
node.js中的fs.renameSync方法使用说明
2014/12/16 Javascript
PHP守护进程实例
2015/03/06 Javascript
简述Jquery与DOM对象
2015/07/10 Javascript
原生JS实现匀速图片轮播动画
2016/10/18 Javascript
AngularJS出现$http异步后台无法获取请求参数问题的解决方法
2016/11/03 Javascript
关于JS Lodop打印插件打印Bootstrap样式错乱问题的解决方案
2016/12/23 Javascript
jQuery Validation Engine验证控件调用外部函数验证的方法
2017/01/18 Javascript
canvas实现图像放大镜
2017/02/06 Javascript
jQuery滑动到底部加载下一页数据的实例代码
2017/05/22 jQuery
vue实现某元素吸顶或固定位置显示(监听滚动事件)
2017/12/13 Javascript
Javascript 编码约定(编码规范)
2018/03/11 Javascript
JS实现字符串翻转的方法分析
2018/08/31 Javascript
javascript随机变色实例代码
2019/10/15 Javascript
Vue中rem与postcss-pxtorem的应用详解
2019/11/20 Javascript
ES6函数和数组用法实例分析
2020/05/23 Javascript
nodejs处理tcp连接的核心流程
2021/02/26 NodeJs
Python函数的周期性执行实现方法
2016/08/13 Python
Python3多线程版TCP端口扫描器
2019/08/31 Python
python实现淘宝购物系统
2019/10/25 Python
Django ORM 查询表中某列字段值的方法
2020/04/30 Python
CSS3中Color的一些特性介绍
2012/05/27 HTML / CSS
HTML5 Plus 实现手机APP拍照或相册选择图片上传功能
2016/07/13 HTML / CSS
德购商城:德国进口直邮商城
2017/06/13 全球购物
中国双语服务优势的在线购票及活动平台:247tickets
2018/10/26 全球购物
学校大课间活动方案
2014/01/30 职场文书
旅游管理专业大学生职业规划书
2014/02/27 职场文书
广播节目策划方案
2014/05/23 职场文书
励志语录:你若不勇敢,谁替你坚强
2019/11/08 职场文书
postgresql无序uuid性能测试及对数据库的影响
2021/06/11 PostgreSQL