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 相关文章推荐
在多个页面使用同一个HTML片段的代码
Mar 04 Javascript
JS获取整个页面文档的实现代码
Dec 15 Javascript
Javascript alert消息换行的方法
Aug 07 Javascript
jQuery 的全选(全非选)即取得被选中的值使用介绍
Nov 12 Javascript
JS 终止执行的实现方法
Nov 24 Javascript
vue组件父子间通信详解(三)
Nov 07 Javascript
微信小程序仿美团城市选择
Jun 06 Javascript
原生JS实现逼真的图片3D旋转效果详解
Feb 16 Javascript
关于微信小程序map组件z-index的层级问题分析
Jul 09 Javascript
一篇文章弄懂javascript中的执行栈与执行上下文
Aug 09 Javascript
layui树形菜单动态遍历的例子
Sep 23 Javascript
vue修饰符.capture和.self的区别
Apr 22 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
十大催泪虐心动漫,你能坚持看到第几部?
2020/03/04 日漫
基于mysql的论坛(4)
2006/10/09 PHP
PHP中单引号与双引号的区别分析
2014/08/19 PHP
encode脚本和normal脚本混用的问题与解决方法
2007/03/08 Javascript
多个表单中如何获得这个文件上传的网址实现js代码
2013/03/25 Javascript
JS动态创建Table,Tr,Td并赋值的具体实现
2013/07/05 Javascript
javascript实现在某个元素上阻止鼠标右键事件的方法和实例
2014/08/12 Javascript
node.js读取文件到字符串的方法
2015/06/29 Javascript
JavaScript实现的类字典插入或更新方法实例
2015/07/10 Javascript
C#微信小程序服务端获取用户解密信息实例代码
2017/03/10 Javascript
微信小程序显示下拉列表功能【附源码下载】
2017/12/12 Javascript
layui问题之模拟select点击事件的实例讲解
2018/08/15 Javascript
nvm、nrm、npm 安装和使用详解(小结)
2019/01/17 Javascript
解决layui动态添加的元素click等事件触发不了的问题
2019/09/20 Javascript
JavaScript中break、continue和return的用法区别实例分析
2020/03/02 Javascript
Python标准库内置函数complex介绍
2014/11/25 Python
python模拟登录并且保持cookie的方法详解
2017/04/04 Python
python实现BP神经网络回归预测模型
2019/08/09 Python
python破解bilibili滑动验证码登录功能
2019/09/11 Python
python中对_init_的理解及实例解析
2019/10/11 Python
python爬虫scrapy框架的梨视频案例解析
2021/02/20 Python
Canvas实现保存图片到本地的示例代码
2018/06/28 HTML / CSS
德国团购网站:Groupon德国
2018/03/13 全球购物
美国最大的存储市场:SpareFoot
2018/07/23 全球购物
澳大利亚办公室装修:JasonL Office Furniture
2019/06/25 全球购物
GWT的应用有哪两种部署模式
2012/12/21 面试题
创立科技Java面试题
2015/11/29 面试题
银行实习自我鉴定
2013/10/12 职场文书
行政工作个人的自我评价
2014/02/13 职场文书
预备党员入党自我评价范文
2014/03/10 职场文书
学校运动会霸气口号
2014/06/07 职场文书
党员教师群众路线思想汇报范文
2014/10/28 职场文书
2014年反洗钱工作总结
2014/11/22 职场文书
资料员岗位职责范本
2015/04/13 职场文书
安全教育主题班会总结
2015/08/14 职场文书
2019毕业典礼主持词!
2019/07/05 职场文书