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 实现各种跨域的方法
May 08 Javascript
javascript的回调函数应用示例
Feb 20 Javascript
jQuery xml字符串的解析、读取及查找方法
Mar 01 Javascript
浅谈Cookie的生命周期问题
Aug 02 Javascript
jquery删除table当前行的实例代码
Oct 07 Javascript
js实现点击图片自动提交action的简单方法
Oct 16 Javascript
JavaScript运动框架 多物体任意值运动(三)
May 17 Javascript
jquery.validate表单验证插件使用详解
Jun 21 jQuery
小程序云开发初探(小结)
Oct 24 Javascript
Vue项目自动转换 px 为 rem的实现方法
Oct 29 Javascript
详解vue 项目白屏解决方案
Oct 31 Javascript
微信用户访问小程序的登录过程详解
Sep 20 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
Oracle Faq(Oracle的版本)
2006/10/09 PHP
php代码把全角数字转为半角数字
2007/12/10 PHP
PHP随机数生成代码与使用实例分析
2011/04/08 PHP
一组PHP可逆加密解密算法实例代码
2014/01/21 PHP
php析构函数的简单使用说明
2015/08/24 PHP
Yii2搭建后台并实现rbac权限控制完整实例教程
2016/04/28 PHP
Swoole4.4协程抢占式调度器详解
2019/05/23 PHP
列表内容的选择
2006/06/30 Javascript
javascript 表单规则集合对象
2009/07/21 Javascript
js 自定义的联动下拉框
2010/02/07 Javascript
javascript学习笔记(五) Array 数组类型介绍
2012/06/19 Javascript
JS连接SQL数据库与ACCESS数据库的方法实例
2013/11/21 Javascript
jQuery使用之标记元素属性用法实例
2015/01/19 Javascript
基于javascript制作微信聊天面板
2020/08/09 Javascript
Boostrap模态窗口的学习小结
2016/03/28 Javascript
Dropzone.js实现文件拖拽上传功能(附源码下载)
2016/11/22 Javascript
node.js中axios使用心得总结
2017/11/29 Javascript
关于react中组件通信的几种方式详解
2017/12/10 Javascript
浅谈Vue响应式(数组变异方法)
2018/05/07 Javascript
vue路由对不同界面进行传参及跳转的总结
2019/04/20 Javascript
vue中js判断长时间不操作界面自动退出登录(推荐)
2020/01/22 Javascript
Python3实现从文件中读取指定行的方法
2015/05/22 Python
Python基于PycURL实现POST的方法
2015/07/25 Python
python获取多线程及子线程的返回值
2017/11/15 Python
python微信公众号之关注公众号自动回复
2018/10/25 Python
浅谈Python 多进程默认不能共享全局变量的问题
2019/01/11 Python
PyTorch中permute的用法详解
2019/12/30 Python
Django基于客户端下载文件实现方法
2020/04/21 Python
python实现快速文件格式批量转换的方法
2020/10/16 Python
canvas实现圆绘制的示例代码
2019/09/11 HTML / CSS
用HTML5制作视频拼图的教程
2015/05/13 HTML / CSS
香港个人化生活购物网站:Ballyhoo Limited
2016/09/10 全球购物
《新型玻璃》教学反思
2014/04/13 职场文书
留学生求职信
2014/06/03 职场文书
世界红十字日活动总结
2015/02/10 职场文书
企业财务管理制度范本
2015/08/04 职场文书