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循环变量注册dom事件 之强大的闭包
Sep 08 Javascript
js验证模型自我实现的具体方法
Jun 21 Javascript
jquery制作搜狐快站页面效果示例分享
Feb 21 Javascript
js实现仿百度汽车频道选择汽车图片展示实例
May 06 Javascript
js实现创建删除html元素小结
Sep 30 Javascript
基于JavaScript实现瀑布流布局(二)
Jan 26 Javascript
Javascript 实现匿名递归的实例代码
May 25 Javascript
详解升级react-router 4 踩坑指南
Aug 14 Javascript
vue短信验证性能优化如何写入localstorage中
Apr 25 Javascript
ng-zorro-antd 入门初体验
Dec 03 Javascript
CKeditor4 字体颜色功能配置方法教程
Jun 26 Javascript
js+audio实现音乐播放器
Sep 13 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页面函数设置超时限制的方法
2014/12/01 PHP
laravel中的错误与日志用法详解
2016/07/26 PHP
语义化 H1 标签
2008/01/14 Javascript
JavaScript Distilled 基础知识与函数
2010/04/07 Javascript
jQuery 无刷新分页实例代码
2013/11/12 Javascript
js的alert样式如何更改如背景颜色
2014/01/22 Javascript
3种Jquery限制文本框只能输入数字字母的方法
2014/12/03 Javascript
JavaScript中的操作符==与===介绍
2014/12/31 Javascript
使用纯javascript实现放大镜效果
2015/03/18 Javascript
编写高性能Javascript代码的N条建议
2015/10/12 Javascript
jQuery操作Table技巧大汇总
2016/01/23 Javascript
详解Nodejs基于mongoose模块的增删改查的操作
2016/12/21 NodeJs
JavaScript中localStorage对象存储方式实例分析
2017/01/12 Javascript
jquery Form轻松实现文件上传
2017/05/24 jQuery
jQuery Ajax使用FormData上传文件和其他数据后端web.py获取
2017/06/11 jQuery
jQuery Ajax 实现分页 kkpager插件实例代码
2017/08/10 jQuery
微信小程序首页的分类功能和搜索功能的实现思路及代码详解
2018/09/11 Javascript
微信小程序实现打卡日历功能
2020/09/21 Javascript
微信小程序实现通过js操作wxml的wxss属性示例
2018/12/06 Javascript
微信小程序自定义toast组件的方法详解【含动画】
2019/05/11 Javascript
JavaScript冒泡算法原理与实现方法深入理解
2020/06/04 Javascript
约瑟夫问题的Python和C++求解方法
2015/08/20 Python
python中cPickle类使用方法详解
2018/08/27 Python
django框架自定义模板标签(template tag)操作示例
2019/06/24 Python
python通过移动端访问查看电脑界面
2020/01/06 Python
pytorch加载语音类自定义数据集的方法教程
2020/11/10 Python
法律专业自我鉴定
2013/10/03 职场文书
执行力心得体会
2013/12/31 职场文书
生日派对邀请函
2014/01/13 职场文书
简历里的自我评价
2014/01/31 职场文书
鼓励运动员的广播稿
2014/02/08 职场文书
老人节标语大全
2014/10/08 职场文书
办公室行政主管岗位职责
2015/04/09 职场文书
神秘岛读书笔记
2015/07/01 职场文书
javascript遍历对象的五种方式实例代码
2021/10/24 Javascript
Javascript 解构赋值详情
2021/11/17 Javascript