详解Vue.js入门环境搭建


Posted in Javascript onMarch 17, 2017

vue这个新的工具,确实能够提高效率,在经历的一段时间的摧残之后,终于能够有一个系统的认识了,下面就今天的收获做一个总结,也是vue入门的精髓:

1.要使用vue来开发前端框架,首先要有环境,这个环境要借助于node,所以要先安装node,借助于node里面的npm来安装需要的依赖等等。

这里有一个小技巧:如果在cmd中直接使用npm来安装的一些工具的话会比较慢,所以我们使用淘宝的npm镜像:
输入npm install -g cnpm ?registry=https://registry.npm.taobao.org,即可安装npm镜像,以后再用到npm的地方直接用cnpm来代替就好了

安装完npm镜像后,开始安装全局vue-cli脚手架,之所以要用vue-cli,是应为这个工具能帮我们搭建好我们需要的模板框架,比较简单。方法:cnpm install -g vue-cli 回车,验证是否安装成功,在命令行中输入vue,出来vue的信息说明安装成功

详解Vue.js入门环境搭建

 2.安装完脚手架以后开始,开始创建一个新项目:命令 vue init webpack vue_project(最后这个是我创建的项目文件夹的名字)

详解Vue.js入门环境搭建

至此,一个新的项目文件夹就创建完成,这个项目文件是在使用了脚手架vue-cli的前提下创建的,所以使用了这个工具提供的默认版式。

详解Vue.js入门环境搭建

这就是使用脚手架搭建的项目文件的结构

3.因为各个模板间都是相互依赖的,所以要安装依赖,在命令行输入cnpm install ,你会发现在已经创建的项目结构里面会多出一个node_modules的文件夹,里面就是刚才安装的所有依赖。

4.准备工作做好以后,测试一下项目里面默认的app.vue模块能否跑起来,这是需要先安装一下服务器环境,在命令行中输入
cnpm run dev 回车即可

详解Vue.js入门环境搭建

8080就是默认的端口,在浏览器地址栏中输入localhost:8080会发现默认的模块打开了!

注:如果已经全局安装过vue-cli了,再搭建项目的时候无需再安装一遍,直接使用vue init webpack 项目名 即可

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

Javascript 相关文章推荐
JavaScript使用prototype定义对象类型(转)[
Dec 22 Javascript
为Extjs加加速(javascript加速)
Aug 19 Javascript
JavaScript模板入门介绍
Sep 26 Javascript
Javascript基础 函数“重载” 详细介绍
Oct 25 Javascript
JavaScript黑洞数字之运算路线查找算法(递归算法)实例
Jan 28 Javascript
javascript检测移动设备横竖屏
May 21 Javascript
微信小程序小组件 基于Canvas实现直播点赞气泡效果
May 29 Javascript
浅谈函数调用的不同方式,以及this的指向
Sep 17 Javascript
JavaScript类型相关的常用操作总结
Feb 14 Javascript
解决layui表格的表头不滚动的问题
Sep 04 Javascript
微信小程序错误this.setData报错及解决过程
Sep 18 Javascript
jQuery实现移动端下拉展现新的内容回弹动画
Jun 24 jQuery
使用jquery datatable和bootsrap创建表格实例代码
Mar 17 #Javascript
jquery PrintArea 实现票据的套打功能(代码)
Mar 17 #Javascript
基于bootstrap实现收缩导航条
Mar 17 #Javascript
javascript基本数据类型和转换
Mar 17 #Javascript
详解vue与后端数据交互(ajax):vue-resource
Mar 16 #Javascript
js实现一键复制功能
Mar 16 #Javascript
js判断PC端与移动端跳转
Dec 24 #Javascript
You might like
php 结果集的分页实现代码
2009/03/10 PHP
ThinkPHP处理Ajax返回的方法
2014/11/22 PHP
PHP中类型转换 ,常量,系统常量,魔术常量的详解
2017/10/26 PHP
php ajax数据传输和响应方法
2018/08/21 PHP
JavaScript浏览器选项卡效果
2010/08/25 Javascript
分页栏的web标准实现
2011/11/01 Javascript
jquery弹出层类代码分享
2013/12/27 Javascript
Javascript WebSocket使用实例介绍(简明入门教程)
2014/04/16 Javascript
JavaScript中的splice()方法使用详解
2015/06/09 Javascript
ionic隐藏tabs的方法
2016/08/29 Javascript
Bootstrap表格制作代码
2017/03/17 Javascript
jQuery操作css样式
2017/05/15 jQuery
javaScript中封装的各种写法示例(推荐)
2017/07/03 Javascript
Node.js利用console输出日志文件的方法示例
2018/04/27 Javascript
Node.js+ELK日志规范的实现
2019/05/23 Javascript
JavaScript实现HSL拾色器
2020/05/21 Javascript
使用 Python 获取 Linux 系统信息的代码
2014/07/13 Python
python中threading超线程用法实例分析
2015/05/16 Python
Python全局变量用法实例分析
2016/07/19 Python
深入理解 Python 中的多线程 新手必看
2016/11/20 Python
python入门:这篇文章带你直接学会python
2018/09/14 Python
python提取包含关键字的整行数据方法
2018/12/11 Python
Python 监测文件是否更新的方法
2019/06/10 Python
python线程定时器Timer实现原理解析
2019/11/30 Python
pandas-resample按时间聚合实例
2019/12/27 Python
天猫精选:上天猫,就够了
2016/09/21 全球购物
北美最大的手工艺品零售商之一:Michaels Stores
2019/02/27 全球购物
下述程序的作用是计算机数组中的最大元素值及其下标
2012/11/26 面试题
描述RIP和OSPF区别以及特点
2015/01/17 面试题
公司领导班子群众路线四风问题对照检查材料
2014/10/02 职场文书
村党支部书记个人对照材料汇报
2014/10/26 职场文书
工作态度不好检讨书
2015/05/06 职场文书
2016党员干部政治学习心得体会
2016/01/23 职场文书
解析CSS 提取图片主题色功能(小技巧)
2021/05/12 HTML / CSS
python 算法题——快乐数的多种解法
2021/05/27 Python
SpringBoot集成Redis,并自定义对象序列化操作
2021/06/22 Java/Android