详解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 相关文章推荐
修改好的jquery滚动字幕效果实现代码
Jun 22 Javascript
jQuery的选择器中的通配符使用介绍
Mar 20 Javascript
jQuery响应enter键的实现思路
Apr 18 Javascript
jQuery 1.9使用$.support替代$.browser的使用方法
May 27 Javascript
jQuery实现表格展开与折叠的方法
May 04 Javascript
javascript对象的创建和访问
Mar 08 Javascript
原生JS实现平滑回到顶部组件
Mar 16 Javascript
简单的网页广告特效实例
Aug 19 Javascript
vue-cli webpack 引入swiper的操作方法
Sep 15 Javascript
详解iframe跨域的几种常用方法(小结)
Apr 29 Javascript
Vue form表单动态添加组件实战案例
Sep 02 Javascript
吃通javascript正则表达式
Apr 21 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实现Socket服务器的代码
2008/04/03 PHP
php错误、异常处理机制(补充)
2012/05/07 PHP
PHP XML Expat解析器知识点总结
2019/02/15 PHP
javascript fullscreen全屏实现代码
2009/04/09 Javascript
jquery.fileEveryWhere.js 一个跨浏览器的file显示插件
2011/10/24 Javascript
JS将数字转换成三位逗号分隔的样式(示例代码)
2014/02/19 Javascript
jQuery的ajax和遍历数组json实例代码
2016/08/01 Javascript
PHP抓取HTTPS内容和错误处理的方法
2016/09/30 Javascript
JS监控关闭浏览器操作的实例详解
2017/09/12 Javascript
JS匿名函数和匿名自执行函数概念与用法分析
2018/03/16 Javascript
Vue中Quill富文本编辑器的使用教程
2018/09/21 Javascript
浅谈Vue.js组件(二)
2019/04/09 Javascript
原生js实现ajax请求和JSONP跨域请求操作示例
2020/03/14 Javascript
微信小程序文章详情功能完整实例
2020/06/03 Javascript
vue+elementui实现点击table中的单元格触发事件--弹框
2020/07/18 Javascript
[06:43]2018DOTA2国际邀请赛寻真——VGJ.Thunder
2018/08/11 DOTA
Python之eval()函数危险性浅析
2014/07/03 Python
python字符串编码识别模块chardet简单应用
2015/06/15 Python
CentOS7.3编译安装Python3.6.2的方法
2018/01/22 Python
基于scrapy的redis安装和配置方法
2018/06/13 Python
Scrapy框架使用的基本知识
2018/10/21 Python
查看python安装路径及pip安装的包列表及路径
2019/04/03 Python
使用python3调用wxpy模块监控linux日志并定时发送消息给群组或好友
2019/06/05 Python
使用Python进行中文繁简转换的实现代码
2019/10/18 Python
接口自动化多层嵌套json数据处理代码实例
2020/11/20 Python
松本清官方海外旗舰店:日本最大的药妆连锁店
2017/11/21 全球购物
美国首屈一指的高品质珠宝设计师和零售商:Allurez
2018/01/23 全球购物
Speedo澳大利亚官网:全球领先游泳品牌
2018/02/04 全球购物
6号汽车旅馆预订:Motel 6
2018/02/11 全球购物
Strawberrynet草莓网新加坡站:护肤、彩妆、香水及美发产品
2018/08/31 全球购物
罗技英国官方网站:Logitech UK
2020/11/03 全球购物
微博营销计划书
2014/01/10 职场文书
七匹狼男装广告词
2014/03/21 职场文书
2014年酒店年度工作总结
2014/12/10 职场文书
小学生作文评语集锦
2014/12/25 职场文书
Feign调用传输文件异常的解决
2021/06/24 Java/Android