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 相关文章推荐
通过Jquery遍历Json的两种数据结构的实现代码
Jan 19 Javascript
读jQuery之一(对象的组成)
Jun 11 Javascript
使用PHP+JQuery+Ajax分页的实现
Apr 23 Javascript
js判断横竖屏及禁止浏览器滑动条示例
Apr 29 Javascript
gridview生成时如何去掉style属性中的border-collapse
Sep 30 Javascript
jQuery中$.each()函数的用法引申实例
May 12 Javascript
Js类的静态方法与实例方法区分及jQuery拓展的两种方法
Jun 03 Javascript
ajax与json 获取数据并在前台使用简单实例
Jan 19 Javascript
Node.js使用orm2进行update操作时关联字段无法修改的解决方法
Jun 13 Javascript
Vue filter介绍及其使用详解
Oct 21 Javascript
vue elementUI使用tabs与导航栏联动
Jun 21 Javascript
Vue中使用import进行路由懒加载的原理分析
Apr 01 Vue.js
教你完全理解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
php学习之数据类型之间的转换代码
2011/05/29 PHP
PHP curl伪造IP地址和header信息代码实例
2015/04/27 PHP
Yii操作数据库实现动态获取表名的方法
2016/03/29 PHP
PHP文字转图片功能原理与实现方法分析
2017/08/31 PHP
javascript innerText和innerHtml应用
2010/01/28 Javascript
关于Jqzoom的使用心得 jquery放大镜效果插件
2010/04/12 Javascript
JavaScript中的console.time()函数详细介绍
2014/12/29 Javascript
jQuery实现左右切换焦点图
2015/04/03 Javascript
vue2.0开发实践总结之疑难篇
2016/12/07 Javascript
webuploader模态框ueditor显示问题解决方法
2016/12/27 Javascript
jquery实现tab键进行选择后enter键触发click行为
2017/03/29 jQuery
javascript实现延时显示提示框效果
2017/06/01 Javascript
基于axios 的responseType类型的设置方法
2019/10/29 Javascript
JavaScript实现切换多张图片
2021/01/27 Javascript
Python collections模块实例讲解
2014/04/07 Python
python类和函数中使用静态变量的方法
2015/05/09 Python
Python中的random()方法的使用介绍
2015/05/15 Python
Python中的getopt函数使用详解
2015/07/28 Python
python中根据字符串调用函数的实现方法
2016/06/12 Python
快速解决PyCharm无法引用matplotlib的问题
2018/05/24 Python
Django实现web端tailf日志文件功能及实例详解
2019/07/28 Python
PIL对上传到Django的图片进行处理并保存的实例
2019/08/07 Python
使用OpenCV实现仿射变换—平移功能
2019/08/29 Python
Python数据处理篇之Sympy系列(五)---解方程
2019/10/12 Python
Django CSRF认证的几种解决方案
2020/03/03 Python
Django 返回json数据的实现示例
2020/03/05 Python
如何从csv文件构建Tensorflow的数据集
2020/09/21 Python
初中生三年学习生活的自我评价
2013/11/03 职场文书
护士自我评价
2014/02/01 职场文书
五四青年节演讲稿
2014/05/26 职场文书
学校关爱留守儿童活动方案
2014/08/27 职场文书
2015年保安个人工作总结
2015/04/02 职场文书
居委会工作总结2015
2015/05/18 职场文书
2016年教师师德师风心得体会
2016/01/12 职场文书
JS一分钟在github+Jekyll的博客中添加访问量功能的实现
2021/04/03 Javascript
Python的这些库,你知道多少?
2021/06/09 Python