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知识点二 jquery下对数组的操作
Jan 15 Javascript
js,jQuery 排序的实现代码,网页标签排序的实现,标签排序
Apr 27 Javascript
jquery动画3.创建一个带遮罩效果的图片走廊
Aug 24 Javascript
JavaScript动态改变HTML页面元素例如添加或删除
Aug 10 Javascript
第一次接触JS require.js模块化工具
Apr 17 Javascript
AngularJS中的缓存使用
Jan 11 Javascript
jQuery.form.js的使用详解
Jun 14 jQuery
基于bootstrap页面渲染的问题解决方法
Aug 09 Javascript
electron 安装,调试,打包的具体使用
Nov 06 Javascript
js的Object.assign用法示例分析
Mar 05 Javascript
浅谈JavaScript中等号、双等号、 三等号的区别
Aug 06 Javascript
Nuxt.js nuxt-link与router-link的区别说明
Nov 06 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 保留小数点
2009/04/21 PHP
php学习之简单计算器实现代码
2011/06/09 PHP
[原创]php求圆周率的简单实现方法
2016/05/30 PHP
在Laravel 的 Blade 模版中实现定义变量
2019/10/14 PHP
php使用fputcsv实现大数据的导出操作详解
2020/02/27 PHP
jQuery检测输入的字符串包含的中英文的数量
2015/04/17 Javascript
整理AngularJS中的一些常用指令
2015/06/16 Javascript
两款JS脚本判断手机浏览器类型跳转WAP手机网站
2015/10/16 Javascript
jQuery实现的指纹扫描效果实例(附演示与demo源码下载)
2016/01/26 Javascript
微信小程序 wx.uploadFile无法上传解决办法
2016/12/14 Javascript
基于MVC方式实现三级联动(JavaScript)
2017/01/23 Javascript
深入理解Vue 的条件渲染和列表渲染
2017/09/01 Javascript
详解关于react-redux中的connect用法介绍及原理解析
2017/09/11 Javascript
Vue中之nextTick函数源码分析详解
2017/10/17 Javascript
基于vue-cli配置lib-flexible + rem实现移动端自适应
2017/12/26 Javascript
微信小程序仿美团城市选择
2018/06/06 Javascript
JS中的算法与数据结构之列表(List)实例详解
2019/08/16 Javascript
vue使用Sass时报错问题的解决方法
2020/10/14 Javascript
Django基础之Model操作步骤(介绍)
2017/05/27 Python
python生成词云的实现方法(推荐)
2017/06/13 Python
Python中几种属性访问的区别与用法详解
2018/10/10 Python
Python Process多进程实现过程
2019/10/22 Python
HTML5到底会有什么发展?HTML5的前景展望
2015/07/07 HTML / CSS
写好求职应聘自荐信的三部曲
2013/09/21 职场文书
汽车维修与检测专业应届生求职信
2013/11/12 职场文书
大二学期个人自我评价
2014/01/13 职场文书
高中生自我评语大全
2014/01/19 职场文书
道德之星事迹材料
2014/05/03 职场文书
企业安全生产标语
2014/06/06 职场文书
体育教师求职信
2014/06/30 职场文书
党支部三严三实对照检查材料思想汇报
2014/09/29 职场文书
党员干部四风问题整改措施思想汇报
2014/10/12 职场文书
民用住房租房协议书
2014/10/29 职场文书
思想政治表现评语
2015/01/04 职场文书
关于党风廉政建设宣传教育月的活动总结!
2019/08/08 职场文书
Python matplotlib绘制条形统计图 处理多个实验多组观测值
2022/04/21 Python