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 相关文章推荐
提高 DHTML 页面性能
Dec 25 Javascript
js cookies 常见网页木马挂马代码 24小时只加载一次
Apr 13 Javascript
JavaScript 10件让人费解的事情
Feb 15 Javascript
基于jQuery的模仿新浪微博时间的组件
Oct 04 Javascript
jQuery页面元素动态添加后绑定事件丢失方法,非 live
Jun 16 Javascript
JavaScript实现大图轮播效果
Jan 11 Javascript
Vue组件开发之LeanCloud带图形校验码的短信发送功能
Nov 07 Javascript
Angular4学习教程之DOM属性绑定详解
Jan 04 Javascript
基于layui数据表格以及传数据的方式
Aug 19 Javascript
小程序登录态管理的方法示例
Nov 13 Javascript
Vant 中的Toast设置全局的延迟时间操作
Nov 04 Javascript
vue+springboot实现登录验证码
May 27 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
php 图像函数大举例(非原创)
2009/06/20 PHP
php提取字符串中网站url地址的方法
2014/12/03 PHP
php实现概率性随机抽奖代码
2016/01/02 PHP
CI框架出现mysql数据库连接资源无法释放的解决方法
2016/05/17 PHP
json跟xml的对比分析
2008/06/10 Javascript
默认让页面的第一个控件选中的javascript代码
2009/12/26 Javascript
利用js动态添加删除table行的示例代码
2013/12/16 Javascript
js正则表达式中test,exec,match方法的区别说明
2014/01/29 Javascript
基于NodeJS的前后端分离的思考与实践(三)轻量级的接口配置建模框架
2014/09/26 NodeJs
jQuery中:reset选择器用法实例
2015/01/04 Javascript
详解JavaScript逻辑And运算符
2015/12/04 Javascript
关于原生js中bind函数的简单实现
2016/08/10 Javascript
Vuejs第六篇之Vuejs与form元素实例解析
2016/09/05 Javascript
微信小程序中子页面向父页面传值实例详解
2017/03/20 Javascript
JavaScript数组和对象的复制
2017/03/21 Javascript
node.js自动上传ftp的脚本分享
2018/06/16 Javascript
jQuery三组基本动画与自定义动画操作实例总结
2020/05/09 jQuery
javascript局部自定义鼠标右键菜单
2020/12/08 Javascript
[02:52]2017DOTA2国际邀请赛中国区预选赛晋级之路
2017/07/03 DOTA
python类继承用法实例分析
2015/05/27 Python
Python的爬虫包Beautiful Soup中用正则表达式来搜索
2016/01/20 Python
Python排序搜索基本算法之插入排序实例分析
2017/12/11 Python
Python3爬虫关于识别检验滑动验证码的实例
2020/07/30 Python
安装python依赖包psycopg2来调用postgresql的操作
2021/01/01 Python
Hoover胡佛官网:美国吸尘器和洗地机品牌
2019/01/09 全球购物
名人珠宝设计师:Melinda Maria Jewelry
2019/03/06 全球购物
英国运动服、设备及配件网站:DW Sports
2019/12/04 全球购物
如果重写了对象的equals()方法,需要考虑什么
2014/11/02 面试题
大学生文员专业个人求职信范文
2014/01/05 职场文书
个人求职信范文分享
2014/01/06 职场文书
电大本科自我鉴定
2014/02/05 职场文书
董事长助理岗位职责
2014/02/18 职场文书
家庭贫困证明书(3篇)
2014/09/15 职场文书
干部职工纪律作风整改措施思想汇报
2014/10/11 职场文书
2015年外贸业务员工作总结范文
2015/05/23 职场文书
幼儿园奖惩制度范本
2015/08/05 职场文书