VUE安装使用教程详解


Posted in Javascript onJune 03, 2019

如果是简单实用vue的话,可以直接引用js文件。

https://vuejs.org/js/vue.js

但是在构建大型项目的时候推荐使用NPM安装,NPM能够很好的和诸如webpack或Browserify模块打包器配合使用,同时Vue也提供配套工具来开发单文件组件。

1. 安装nodejs

由于npm(nodejs package manager)是nodejs的包管理器,所以要首先安装nodejs,从官网下载相应版本安装即可https://nodejs.org/en/download/。

安装好后打开命令行工具,输入node就进入nodejs的命令模式了:

C:\Users\wangjun>node
> 1+2
3
>

按两次Ctrl+C或者输入.exit就可以退出命令行了。

2. 安装淘宝NPM镜像

由于在国内npm的安装速度太慢,因此可以使用淘宝镜像及其命令cnpm来安装各种包。

安装npm淘宝镜像:

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装完成后,后面就可以使用cnpm命令来安装npm包了。

cnpm install {package name}

3. 安装VUE

# 安装稳定版
cnpm install vue

安装完成后默认在用户路径下:

C:\Users\{user_name}\node_modules

在vue包的dist/目录下可以看到Vue.js的各种版本,其中带min的是生产环境的版本,比开发版本vue.js压缩了很多,并且删除了警告。

4. 使用VUE

新建三个文件,其中vue.js需要从网上下载:

my.html
my.js
vue.js

4.1 新建my.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>my html</title>
</head>
<body>
  <div id="app">
    {{message}}
  </div>
</body>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript" src="my.js"></script>
</html>

4.2 新建my.js

var app1 = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

至此vue的是安装和简单使用就完成了。

4.3 遇到的问题

1)报错 Vue is not defined

Uncaught ReferenceError: Vue is not defined
    at my.js:1

原因

先引用了my.js,后引用了vue.js。

解决方案

应该先引用vue.js,后引用my.js才能在my.js中使用vue的语法。

2)报错[Vue warn]: Cannot find element: #app

[Vue warn]: Cannot find element: #app

原因

我把相关的js文件放在head里面,导致文件未加载完成就运行js文件,所以js找不到 #app 。

解决方案

把相关js文件放至尾部,保证页面全部渲染完成才加载js,就可以避免这个错误。

总结

以上所述是小编给大家介绍的VUE安装使用教程详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Javascript生成json的函数代码(可以用php的json_decode解码)
Jun 11 Javascript
zTree插件之单选下拉菜单实例代码
Nov 07 Javascript
js 获取页面高度和宽度兼容 ie firefox chrome等
May 14 Javascript
jQuery中slice()方法用法实例
Jan 07 Javascript
js 获取经纬度的实现方法
Jun 20 Javascript
vue.js绑定class和style样式(6)
Dec 09 Javascript
通过命令行生成vue项目框架的方法
Jul 12 Javascript
AngularJS 应用模块化的使用
Apr 04 Javascript
微信小程序如何引用外部js,外部样式,公共页面模板
Jul 23 Javascript
Node.js系列之安装配置与基本使用(1)
Aug 30 Javascript
js实现弹幕飞机效果
Aug 27 Javascript
Vue项目开发常见问题和解决方案总结
Sep 11 Javascript
教你完全理解ReentrantLock重入锁
Jun 03 #Javascript
生产制造追溯系统之在线打印功能
Jun 03 #Javascript
产制造追溯系统之通过微信小程序实现移动端报表平台
Jun 03 #Javascript
深入理解 JS 垃圾回收
Jun 03 #Javascript
如何让微信小程序页面之间的通信不再变困难
Jun 03 #Javascript
使用VueRouter的addRoutes方法实现动态添加用户的权限路由
Jun 03 #Javascript
使用watch在微信小程序中实现全局状态共享
Jun 03 #Javascript
You might like
一个显示天气预报的程序
2006/10/09 PHP
laravel在中间件内生成参数并且传递到控制器中的2种姿势
2019/10/15 PHP
jQuery弹出层插件简化版代码下载
2008/10/16 Javascript
10个基于jQuery或JavaScript的WYSIWYG 编辑器整理
2010/05/06 Javascript
JQuery获取文本框中字符长度的代码
2011/09/29 Javascript
js浮点数精确计算(加、减、乘、除)
2013/12/26 Javascript
jQuery中.live()方法的用法深入解析
2013/12/30 Javascript
js图片预加载示例
2014/04/30 Javascript
使用ajax+jqtransform实现动态加载select
2014/12/01 Javascript
js使用Array.prototype.sort()对数组对象排序的方法
2015/01/28 Javascript
javascript判断复选框是否选中的方法
2015/10/16 Javascript
三种Node.js写文件的方式
2016/03/08 Javascript
vue.js开发环境安装教程
2017/03/17 Javascript
jQuery之动画ajax事件(实例讲解)
2017/07/18 jQuery
jquery对table做排序操作的实例演示
2017/08/10 jQuery
Vue 3.0 前瞻Vue Function API新特性体验
2019/08/12 Javascript
vue.js iview打包上线后字体图标不显示解决办法
2020/01/20 Javascript
jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】
2020/05/19 jQuery
js实现手表表盘时钟与圆周运动
2020/09/18 Javascript
[03:03]DOTA2校园争霸赛 济南城市决赛欢乐发奖活动
2013/10/21 DOTA
[00:56]2014DOTA2国际邀请赛 DK、iG 赛前探访
2014/07/10 DOTA
Python的包管理器pip更换软件源的方法详解
2016/06/20 Python
python3+PyQt5实现自定义流体混合窗口部件
2018/04/24 Python
如何利用python制作时间戳转换工具详解
2018/09/12 Python
Python动态参数/命名空间/函数嵌套/global和nonlocal
2019/05/29 Python
Pycharm中出现ImportError:DLL load failed:找不到指定模块的解决方法
2019/09/17 Python
安装pyecharts1.8.0版本后导入pyecharts模块绘图时报错: “所有图表类型将在 v1.9.0 版本开始强制使用 ChartItem 进行数据项配置 ”的解决方法
2020/08/18 Python
德国箱包网上商店:koffer24.de
2016/07/27 全球购物
First Aid Beauty官网:FAB急救面霜
2018/05/24 全球购物
英国床垫和床架购物网站:Bedman
2019/11/04 全球购物
爱尔兰旅游网站:ebookers.ie
2020/01/24 全球购物
大学生的四年学习自我评价
2013/12/13 职场文书
《李广射虎》教学反思
2014/04/27 职场文书
公益广告标语
2014/06/19 职场文书
群教个人对照检查材料
2014/08/20 职场文书
导游词之铁岭象牙山
2019/12/06 职场文书