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 扑捉回车键事件代码
Apr 24 Javascript
jquery动态加载js/css文件方法(自写小函数)
Oct 11 Javascript
node.js中的fs.fstat方法使用说明
Dec 15 Javascript
JavaScript判断浏览器类型的方法
Feb 10 Javascript
详解JavaScript中数组的相关知识
Jul 29 Javascript
JS自定义选项卡函数及用法实例分析
Sep 02 Javascript
详解JavaScript中的自定义事件编写
May 10 Javascript
JavaScript直播评论发弹幕切图功能点集合效果代码
Jun 26 Javascript
基于JavaScript实现新增内容滚动播放效果附完整代码
Aug 24 Javascript
Vue路由守卫之路由独享守卫
Sep 25 Javascript
JS监听组合按键思路及实现过程
Apr 17 Javascript
javascript实现京东快递单号的查询效果
Nov 30 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
php的list()的一步操作给一组变量进行赋值的使用
2011/05/18 PHP
Laravel 4.2 中队列服务(queue)使用感受
2014/10/30 PHP
ucenter通信原理分析
2015/01/09 PHP
php实现的单一入口应用程序实例分析
2015/09/23 PHP
OAuth认证协议中的HMACSHA1加密算法(实例)
2017/10/25 PHP
使用composer安装使用thinkphp6.0框架问题【视频教程】
2019/10/01 PHP
js弹出层之1:JQuery.Boxy (二)
2011/10/06 Javascript
解决Jquery load()加载GB2312页面时出现乱码的两种方案
2013/09/10 Javascript
Javascript中判断对象是否为空
2015/06/10 Javascript
在JavaScript中操作时间之setYear()方法的使用
2015/06/12 Javascript
js将滚动条滚动到指定位置的简单实现方法
2016/06/25 Javascript
JS自定义滚动条效果简单实现代码
2020/10/27 Javascript
使用Angular CLI从蓝本生成代码详解
2018/03/24 Javascript
实例讲解v-if和v-show的区别
2019/01/31 Javascript
Layui 动态禁止select下拉的例子
2019/09/03 Javascript
js实现轮播图效果 纯js实现图片自动切换
2020/08/09 Javascript
[40:31]Secret vs Alliacne 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
Python统计列表中的重复项出现的次数的方法
2014/08/18 Python
Python随机生成数模块random使用实例
2015/04/13 Python
python安装以及IDE的配置教程
2015/04/29 Python
Django中模型Model添加JSON类型字段的方法
2015/06/17 Python
在Python的Django框架中调用方法和处理无效变量
2015/07/15 Python
浅谈python连续赋值可能引发的错误
2018/11/10 Python
python 常见字符串与函数的用法详解
2018/11/23 Python
使用python制作一个为hex文件增加版本号的脚本实例
2019/06/12 Python
一篇文章了解Python中常见的序列化操作
2019/06/20 Python
Python 运行.py文件和交互式运行代码的区别详解
2019/07/02 Python
Python多线程爬取豆瓣影评API接口
2019/10/22 Python
python抢购软件/插件/脚本附完整源码
2021/03/04 Python
印尼最大的在线购物网站:MatahariMall.com
2016/08/26 全球购物
经理管理专业自荐信范文
2013/12/31 职场文书
优秀教师获奖感言
2014/01/31 职场文书
运动会口号大全
2014/06/07 职场文书
舞蹈教育学专业自荐信
2014/06/15 职场文书
环境卫生倡议书
2014/08/29 职场文书
Python import模块的缓存问题解决方案
2021/06/02 Python