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 定时器调用传递参数的方法
Nov 12 Javascript
jQuery-Tools-overlay 使用介绍
Jul 14 Javascript
JS兼容浏览器的导出Excel(CSV)文件的方法
May 03 Javascript
Javascript中的默认参数详解
Oct 22 Javascript
JS使用cookie实现DIV提示框只显示一次的方法
Nov 05 Javascript
AngularJS控制器详解及示例代码
Aug 16 Javascript
jQuery实现磁力图片跟随效果完整示例
Sep 16 Javascript
JSON与JS对象的区别与对比
Mar 01 Javascript
react redux入门示例
Apr 19 Javascript
layer.msg()去掉默认时间,实现手动关闭的方法
Sep 12 Javascript
vue中对象数组去重的实现
Feb 06 Javascript
详解如何在vue+element-ui的项目中封装dialog组件
Dec 11 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
【COS正片】蕾姆睡衣cos,纯洁可爱被治愈了 cn名濑弥七
2020/03/02 日漫
DOTA2游戏同人动画《龙之血》导演接受采访
2021/03/05 欧美动漫
发挥语言的威力--融合PHP与ASP
2006/10/09 PHP
关于文本留言本的分页代码
2006/10/09 PHP
动态生成gif格式的图像要注意?
2006/10/09 PHP
php数组转换js数组操作及json_encode的用法详解
2013/10/26 PHP
php遍历类中包含的所有元素的方法
2015/05/12 PHP
PHPstorm激活码2020年5月13日亲测有效
2020/09/17 PHP
Ubuntu中搭建Nodejs开发环境过程分享
2014/06/01 NodeJs
用循环或if语句从json中取数据示例
2014/08/18 Javascript
jquery插件推荐 jquery.cookie
2014/11/09 Javascript
Bootstrap源码解读模态弹出框(11)
2016/12/28 Javascript
JS实现改变HTML上文字颜色和内容的方法
2016/12/30 Javascript
Vue的移动端多图上传插件vue-easy-uploader的示例代码
2017/11/27 Javascript
基于node.js实现微信支付退款功能
2017/12/19 Javascript
原生JavaScript实现todolist功能
2018/03/02 Javascript
vue组件内部引入外部js文件的方法
2020/01/18 Javascript
JavaScript文档加载模式以及元素获取
2020/07/28 Javascript
[08:40]Navi Vs Newbee
2018/06/07 DOTA
Python实现从百度API获取天气的方法
2015/03/11 Python
用Python编写一个简单的俄罗斯方块游戏的教程
2015/04/03 Python
flask中过滤器的使用详解
2018/08/01 Python
python解压TAR文件至指定文件夹的实例
2019/06/10 Python
对python3中的RE(正则表达式)-详细总结
2019/07/23 Python
python 多进程共享全局变量之Manager()详解
2019/08/15 Python
python plotly画柱状图代码实例
2019/12/13 Python
基于html5 canvas实现漫天飞雪效果实例
2014/09/10 HTML / CSS
应届生.NET方向面试题
2015/05/23 面试题
党员思想汇报范文
2013/12/30 职场文书
慈善晚会策划方案
2014/05/14 职场文书
运输企业安全生产责任书
2014/07/28 职场文书
群众路线教育实践活动方案
2014/10/31 职场文书
2014年纪检部工作总结
2014/11/12 职场文书
英语通知范文
2015/04/22 职场文书
教师创先争优承诺书
2015/04/27 职场文书
Windows Server 2012 R2 磁盘分区教程
2022/04/29 Servers