详解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开发规范要求(规范化代码)
Aug 16 Javascript
JavaScript 一道字符串分解的题目
Aug 03 Javascript
Extjs改变树节点的勾选状态点击按钮将复选框去掉
Nov 14 Javascript
jQuery动态添加、删除元素的方法
Jan 09 Javascript
JavaScript实现找质数代码分享
Mar 24 Javascript
jQuery实现非常实用漂亮的select下拉菜单选择效果
Nov 06 Javascript
关于Angular2 + node接口调试的解决方案
May 28 Javascript
JavaScript事件处理程序详解
Sep 19 Javascript
vue 设置proxyTable参数进行代理跨域
Apr 09 Javascript
vue router+vuex实现首页登录验证判断逻辑
May 17 Javascript
JS实现简易贪吃蛇游戏
Aug 24 Javascript
Nuxt pages下不同的页面对应layout下的页面布局操作
Nov 05 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使用数组实现队列
2012/02/05 PHP
使用PHP实现生成HTML静态页面
2015/11/18 PHP
CI框架中数据库操作函数$this->db->where()相关用法总结
2016/05/17 PHP
PHP5.0~5.6 各版本兼容性cURL文件上传功能实例分析
2018/05/11 PHP
用Javascript实现UTF8编码转换成gb2312编码
2006/12/22 Javascript
JS解密入门 最终变量劫持
2008/06/25 Javascript
原生js实现复制对象、扩展对象 类似jquery中的extend()方法
2014/08/30 Javascript
jquery背景跟随鼠标滑动导航
2015/11/20 Javascript
3种不同的ContextMenu右键菜单实现代码
2016/11/03 Javascript
基于JavaScript实现的插入排序算法分析
2017/04/14 Javascript
JS+Ajax实现百度智能搜索框
2017/08/04 Javascript
vue+axios新手实践实现登陆的示例代码
2018/06/06 Javascript
JavaScript实现选项卡效果的分析及步骤
2019/04/16 Javascript
Vue-CLI 项目在pycharm中配置方法
2019/08/30 Javascript
JavaScript实现轮播图效果代码实例
2019/09/28 Javascript
实现vuex与组件data之间的数据同步更新方式
2019/11/12 Javascript
JS中FormData类实现文件上传
2020/03/27 Javascript
JavaScript eval()函数定义及使用方法详解
2020/07/07 Javascript
web.py在模板中输出美元符号的方法
2014/08/26 Python
17个Python小技巧分享
2015/01/23 Python
Python简单基础小程序的实例代码
2019/04/28 Python
python对矩阵进行转置的2种处理方法
2019/07/17 Python
TensorFlow 输出checkpoint 中的变量名与变量值方式
2020/02/11 Python
Python3.7实现验证码登录方式代码实例
2020/02/14 Python
CSS3实现10种Loading效果
2016/07/11 HTML / CSS
英国标志性奢侈品牌:Burberry
2016/07/28 全球购物
名词解释WEB SERVICE,SOAP,UDDI,WSDL,JAXP,JAXM;JSWDL开发包的介绍。
2012/10/27 面试题
建筑施工员岗位职责
2013/11/26 职场文书
校友会欢迎辞
2014/01/13 职场文书
大学自主招生推荐信
2014/05/10 职场文书
模具设计与制造专业求职信
2014/07/19 职场文书
职业生涯规划书怎么写?
2014/09/14 职场文书
2015会计试用期工作总结
2014/12/12 职场文书
个人政治思想总结
2015/03/05 职场文书
《确定位置》教学反思
2016/02/18 职场文书
《七月的天山》教学反思
2016/02/19 职场文书