详解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 定义新对象方法
Feb 20 Javascript
基于jQuery捕获超链接事件进行局部刷新代码
May 10 Javascript
IE 下Enter提交表单存在重复提交问题的解决方法
May 04 Javascript
jQuery标签替换函数replaceWith()的使用例子
Aug 28 Javascript
让JavaScript的Alert弹出框失效的方法禁止弹出警告框
Sep 03 Javascript
手机开发必备技巧:javascript及CSS功能代码分享
May 25 Javascript
jQuery短信验证倒计时功能实现方法详解
May 25 Javascript
Bootstrap编写一个兼容主流浏览器的受众门户式风格页面
Jul 01 Javascript
百度搜索框智能提示案例jsonp
Nov 28 Javascript
原生js二级联动效果
Jun 20 Javascript
vue-router 路由基础的详解
Oct 17 Javascript
VUE长按事件需求详解
Oct 18 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
执行、获取远程代码返回:file_get_contents 超时处理的问题详解
2013/06/25 PHP
PHP输入输出流学习笔记
2015/05/12 PHP
php 利用socket发送HTTP请求(GET,POST)
2015/08/24 PHP
PHP实现上传图片到数据库并显示输出的方法
2018/05/31 PHP
深入理解javascript中return的作用
2013/12/30 Javascript
jquery选择checked在ie8普通模式下的问题
2014/02/12 Javascript
Javascript验证用户输入URL地址是否为空及格式是否正确
2014/10/09 Javascript
让html页面不缓存js的实现方法
2014/10/31 Javascript
js实现的倒计时按钮实例
2015/06/24 Javascript
iframe中子父类窗口调用JS的方法及注意事项
2015/08/25 Javascript
Angular 根据 service 的状态更新 directive
2016/04/03 Javascript
jQuery UI结合Ajax创建可定制的Web界面
2016/06/22 Javascript
标准的js无缝滚动效果
2016/08/30 Javascript
浅谈Angularjs link和compile的使用区别
2016/10/21 Javascript
JavaScript 深层克隆对象详解及实例
2016/11/03 Javascript
移动端日期插件Mobiscroll.js使用详解
2016/12/19 Javascript
JavaScript cookie详解及简单实例应用
2016/12/31 Javascript
JavaScript实现事件的中断传播和行为阻止方法示例
2017/01/20 Javascript
js实现功能比较全面的全选和多选
2017/03/02 Javascript
vue2.0实现列表数据增加和删除
2020/06/17 Javascript
Python使用xlrd读取Excel格式文件的方法
2015/03/10 Python
python中如何使用正则表达式的集合字符示例
2017/10/09 Python
详细分析python3的reduce函数
2017/12/05 Python
对Pandas MultiIndex(多重索引)详解
2018/11/16 Python
Python实现查找字符串数组最长公共前缀示例
2019/03/27 Python
python tkinter GUI绘制,以及点击更新显示图片代码
2020/03/14 Python
Html5移动端弹幕动画实现示例代码
2018/08/27 HTML / CSS
欧姆龙医疗欧洲有限公司:Omron Healthcare Europe B.V
2020/06/13 全球购物
小溪流的歌教学反思
2014/02/13 职场文书
竞选卫生委员演讲稿
2014/04/28 职场文书
英文推荐信格式范文
2014/05/09 职场文书
化学专业大学生职业生涯规划范文
2014/09/13 职场文书
缅怀先烈主题班会
2015/08/14 职场文书
Python 解决空列表.append() 输出为None的问题
2021/05/23 Python
Java Spring Boot 正确读取配置文件中的属性的值
2022/04/20 Java/Android
js判断两个数组相等的5种方法
2022/05/06 Javascript