详解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 相关文章推荐
js判断是否为数组的函数: isArray()
Oct 30 Javascript
浅析hasOwnProperty方法的应用
Nov 20 Javascript
深入分析JQuery和JavaScript的异同
Oct 23 Javascript
javascript数组遍历for与for in区别详解
Dec 04 Javascript
使用Javascript简单实现图片无缝滚动
Dec 05 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(基于jquery)
Nov 18 Javascript
JS控制按钮10秒钟后可用的方法
Dec 22 Javascript
JavaScript判断是否是微信浏览器
Jun 13 Javascript
jQuery Ajax 上传文件处理方式介绍(推荐)
Jun 30 Javascript
vue.js实现仿原生ios时间选择组件实例代码
Dec 21 Javascript
详解node.js中的npm和webpack配置方法
Jan 21 Javascript
前端MVVM框架解析之双向绑定
Jan 24 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
linux iconv方法的使用
2011/10/01 PHP
php数组函数序列之array_pop() - 删除数组中的最后一个元素
2011/11/07 PHP
php生成年月日下载列表的方法
2015/04/24 PHP
php简单socket服务器客户端代码实例
2015/05/18 PHP
PHP获取文件行数的方法
2015/06/10 PHP
Avengerls vs Newbee BO3 第三场2.18
2021/03/10 DOTA
xml 与javascript结合的问题解决方法
2007/03/24 Javascript
Javascript中的数学函数
2007/04/04 Javascript
使Ext的Template可以解析二层的json数据的方法
2007/12/22 Javascript
js中有关IE版本检测
2012/01/04 Javascript
jQuery实现表头固定效果的实例代码
2013/05/24 Javascript
Node.js中的process.nextTick使用实例
2015/06/25 Javascript
浅谈js里面的InttoStr和StrtoInt
2016/06/14 Javascript
vue2.0中goods选购栏滚动算法的实现代码
2017/05/17 Javascript
前端构建工具之gulp的语法教程
2017/06/12 Javascript
js将键值对字符串转为json字符串的方法
2018/03/30 Javascript
详解Vue项目在其他电脑npm run dev运行报错的解决方法
2018/10/29 Javascript
JavaScript解析JSON数据示例
2019/07/16 Javascript
Vue-drag-resize 拖拽缩放插件的使用(简单示例)
2019/12/04 Javascript
javascript实现移动端触屏拖拽功能
2020/07/29 Javascript
vue封装自定义指令之动态显示title操作(溢出显示,不溢出不显示)
2020/11/12 Javascript
python实现socket客户端和服务端简单示例
2014/02/24 Python
Python编程实现微信企业号文本消息推送功能示例
2017/08/21 Python
python爬虫_微信公众号推送信息爬取的实例
2017/10/23 Python
Python将DataFrame的某一列作为index的方法
2018/04/08 Python
对python中的xlsxwriter库简单分析
2018/05/04 Python
在python 中split()使用多符号分割的例子
2019/07/15 Python
Python图像处理PIL各模块详细介绍(推荐)
2019/07/17 Python
tensorflow实现测试时读取任意指定的check point的网络参数
2020/01/21 Python
HTML5+CSS3实现机器猫
2016/10/17 HTML / CSS
干部四风问题整改措施思想汇报
2014/10/13 职场文书
十佳少年事迹材料
2014/12/25 职场文书
老员工辞职信范文
2015/05/12 职场文书
统招统分证明
2015/06/23 职场文书
婚礼家长致辞
2015/07/27 职场文书
上手简单,功能强大的Python爬虫框架——feapder
2021/04/27 Python