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 简单导航实现代码
Sep 11 Javascript
javascript中call和apply方法浅谈
Sep 27 Javascript
采用自执行的匿名函数解决for循环使用闭包的问题
Sep 11 Javascript
php+ajax+jquery实现点击加载更多内容
May 03 Javascript
基于jquery css3实现点击动画弹出表单源码特效
Aug 31 Javascript
简单实现限制uploadify上传个数
Nov 16 Javascript
JavaScript获取各大浏览器信息图示
Nov 20 Javascript
JavaScript中闭包之浅析解读(必看篇)
Aug 25 Javascript
JavaScript程序设计高级算法之动态规划实例分析
Nov 24 Javascript
微信小程序canvas截取任意形状的实现代码
Jan 13 Javascript
vue实现自定义多选按钮
Jul 16 Javascript
vue实现简易音乐播放器
Aug 14 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
Http 1.1 Etag 与 Last-Modified提高php效率
2008/01/10 PHP
PHP多线程类及用法实例
2014/12/03 PHP
php使用pthreads v3多线程实现抓取新浪新闻信息操作示例
2020/02/21 PHP
解决使用attachEvent函数时,this指向被绑定的元素的问题的方法
2007/08/13 Javascript
jquery之Document元素选择器篇
2008/08/14 Javascript
firebug的一个有趣现象介绍
2011/11/30 Javascript
JavaScript根据数据生成百分比图和柱状图的实例代码
2013/07/14 Javascript
iframe的父子窗口之间的对象相互调用基本用法
2013/09/03 Javascript
innerHTML,outerHTML,innerText,outerText的用法及区别解析
2013/12/16 Javascript
JavaScript时间转换处理函数
2015/04/14 Javascript
简介JavaScript中getUTCMonth()方法的使用
2015/06/10 Javascript
JavaScript+Html5实现按钮复制文字到剪切板功能(手机网页兼容)
2017/03/30 Javascript
JavaScript如何把两个数组对象合并过程解析
2019/10/10 Javascript
微信小程序获取当前位置和城市名
2019/11/13 Javascript
微信小程序背景音乐开发详解
2019/12/12 Javascript
封装一下vue中的axios示例代码详解
2020/02/16 Javascript
Vue如何提升首屏加载速度实例解析
2020/06/25 Javascript
[00:35]DOTA2上海特级锦标赛 EG战队宣传片
2016/03/04 DOTA
Python代码解决RenderView窗口not found问题
2016/08/28 Python
详解Python 数据库 (sqlite3)应用
2016/12/07 Python
对python中dict和json的区别详解
2018/12/18 Python
python 定时器,轮询定时器的实例
2019/02/20 Python
matplotlib之pyplot模块之标题(title()和suptitle())
2021/02/22 Python
详解webapp页面滚动卡顿的解决办法
2018/12/26 HTML / CSS
工商管理专业学生的自我评价
2013/10/01 职场文书
中专自我鉴定
2014/02/05 职场文书
十佳护士获奖感言
2014/02/18 职场文书
大班开学家长寄语
2014/04/04 职场文书
小学生期末评语大全
2014/04/21 职场文书
化学教育专业求职信
2014/07/08 职场文书
关于诚信的活动方案
2014/08/18 职场文书
2014年话务员工作总结
2014/11/19 职场文书
技术股东合作协议书
2014/12/02 职场文书
2014年音乐教师工作总结
2014/12/03 职场文书
幼儿园大班教师个人工作总结
2015/02/05 职场文书
意外事故赔偿协议书
2016/03/22 职场文书