详解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 写的一个简单的timer
Jul 30 Javascript
基于JQuery实现相同内容合并单元格的代码
Jan 12 Javascript
浅谈JavaScript函数参数的可修改性问题
Dec 05 Javascript
利用js动态添加删除table行的示例代码
Dec 16 Javascript
javascript/jquery获取地址栏url参数的方法
Mar 05 Javascript
关闭浏览器窗口弹出提示框并且可以控制其失效
Apr 15 Javascript
javascript 动态生成css代码的两种方法
Mar 17 Javascript
JavaScript创建对象方法实例小结
Sep 03 Javascript
微信小程序websocket聊天室的实现示例代码
Feb 12 Javascript
vue cli3.0 引入eslint 结合vscode使用
May 27 Javascript
layer弹出层自适应高度,垂直水平居中的实现
Sep 16 Javascript
javascript异常处理实现原理详解
Feb 17 Javascript
使用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
总集篇&特番节目先行播出!《SAO Alicization War of Underworld》第2季度TV动画4月25日放送!
2020/03/06 日漫
php中的动态调用实例分析
2015/01/07 PHP
php使用get_class_methods()函数获取分类的方法
2016/07/20 PHP
thinkPHP5项目中实现QQ第三方登录功能
2017/10/20 PHP
CSS3画一个阴阳八卦图
2021/03/09 HTML / CSS
在textarea中屏蔽js的某个function的javascript代码
2007/04/20 Javascript
jQuery + Flex 通过拖拽方式动态改变图片的代码
2011/08/03 Javascript
无闪烁更新网页内容JS实现
2013/12/19 Javascript
Node.js 学习笔记之简介、安装及配置
2015/03/03 Javascript
javascript实现多栏闭合展开式广告位菜单效果实例
2015/08/05 Javascript
JavaScript基础篇(6)之函数表达式闭包
2015/12/11 Javascript
js实现弹窗居中的简单实例
2016/10/09 Javascript
jquery实现轮播图效果
2017/02/13 Javascript
react native仿微信PopupWindow效果的实例代码
2017/08/07 Javascript
详解vue-cli 接口代理配置
2017/12/13 Javascript
浅谈vue同一页面中拥有两个表单时,的验证问题
2018/09/18 Javascript
jQuery实现的点击图片居中放大缩小功能示例
2019/01/16 jQuery
原生JS实现音乐播放器的示例代码
2021/02/25 Javascript
深入分析在Python模块顶层运行的代码引起的一个Bug
2014/07/04 Python
详解Python中的type()方法的使用
2015/05/21 Python
Python实现简单的获取图片爬虫功能示例
2017/07/12 Python
python2.7到3.x迁移指南
2018/02/01 Python
python生成器,可迭代对象,迭代器区别和联系
2018/02/04 Python
python微信公众号之关注公众号自动回复
2018/10/25 Python
实例讲解Python中浮点型的基本内容
2019/02/11 Python
Numpy与Pytorch 矩阵操作方式
2019/12/27 Python
调整Jupyter notebook的启动目录操作
2020/04/10 Python
python 删除系统中的文件(按时间,大小,扩展名)
2020/11/19 Python
The Hut德国站点:时装、家居用品、美容等
2016/09/23 全球购物
三年级评语大全
2014/04/23 职场文书
高一军训的心得体会
2014/09/01 职场文书
病房管理制度范本
2015/08/06 职场文书
2016消防宣传标语口号
2015/12/26 职场文书
一篇文章告诉你如何实现Vue前端分页和后端分页
2022/02/18 Vue.js
Python Matplotlib绘制两个Y轴图像
2022/04/13 Python
Linux中如何安装并部署Redis
2022/04/18 Servers