详解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让文本框内的最后一个文字的后面获得焦点实现代码
Jan 06 Javascript
ExtJS下书写动态生成的xml(兼容火狐)
Apr 02 Javascript
JS使用post提交的两种方式
Dec 03 Javascript
基于JS实现的笛卡尔乘积之商品发布
May 13 Javascript
JS for...in 遍历语句用法实例分析
Aug 24 Javascript
BootStrap Validator使用注意事项(必看篇)
Sep 28 Javascript
spirngmvc js传递复杂json参数到controller的实例
Mar 29 Javascript
vue-router 源码实现前端路由的两种方式
Jul 02 Javascript
vue移动端实现手机左右滑动入场动画
Jun 17 Javascript
vue 强制组件重新渲染(重置)的两种方案
Oct 29 Javascript
jQuery擦除插件eraser使用方法详解
Jan 11 jQuery
react使用antd的上传组件实现文件表单一起提交功能(完整代码)
Jun 29 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
php中存储用户ID和密码到mysql数据库的方法
2013/02/06 PHP
PHP children()函数讲解
2019/02/03 PHP
PHP copy函数使用案例代码解析
2020/09/01 PHP
javascript 可以拖动的DIV(二)
2009/06/26 Javascript
JS判定是否原生方法
2013/07/22 Javascript
js中的异常处理try...catch使用介绍
2013/09/21 Javascript
浅析用prototype定义自己的方法
2013/11/14 Javascript
提交按钮的name='submit'引起的js失效问题及原因
2015/02/25 Javascript
jQuery选择器之基本选择器与层次选择器
2015/03/03 Javascript
基于Bootstrap仿淘宝分页控件实现代码
2016/11/07 Javascript
实例解析js中try、catch、finally的执行规则
2017/02/24 Javascript
微信小程序实现全国机场索引列表
2018/01/31 Javascript
用Vue写一个分页器的示例代码
2018/04/22 Javascript
jQuery实现简单聊天室
2020/02/08 jQuery
[56:00]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs TNC 第二场
2018/04/10 DOTA
Django实现单用户登录的方法示例
2019/03/28 Python
python使用Plotly绘图工具绘制柱状图
2019/04/01 Python
Pyqt5 实现跳转界面并关闭当前界面的方法
2019/06/19 Python
python 中如何获取列表的索引
2019/07/02 Python
Python字符串三种格式化输出
2020/09/17 Python
HTML5、Select下拉框右边加图标的实现代码(增进用户体验)
2017/10/16 HTML / CSS
extern在函数声明中是什么意思
2014/01/19 面试题
大学生的应聘自我评价
2013/12/13 职场文书
最新大学职业规划书范文
2013/12/30 职场文书
助人为乐表扬信范文
2014/01/14 职场文书
爱心捐款倡议书
2014/04/14 职场文书
教师竞聘演讲稿
2014/05/16 职场文书
政府采购方案
2014/06/12 职场文书
应届生自荐信
2014/06/30 职场文书
航海技术专业毕业生推荐信
2014/07/09 职场文书
抗洪救灾感谢信
2015/01/22 职场文书
毕业论文答辩演讲稿
2015/06/23 职场文书
学生病假条范文
2015/08/17 职场文书
九年级英语教学反思
2016/02/15 职场文书
创业计划书之青年旅馆
2019/09/23 职场文书
【2·13】一图读懂中国无线电发展
2022/02/18 无线电