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 mobile做幻灯播放效果实现步骤
Jan 04 Javascript
js获取多个tagname的节点数组
Sep 22 Javascript
javascript创建和存储cookie示例
Jan 07 Javascript
jQuery判断复选框是否勾选的原理及示例
May 21 Javascript
JavaScript语言对Unicode字符集的支持详解
Dec 30 Javascript
基于jquery实现页面滚动到底自动加载数据的功能
Dec 19 Javascript
javascript获取网页各种高宽及位置的方法总结
Jul 27 Javascript
微信小程序 石头剪刀布实例代码
Jan 04 Javascript
javascript 易错知识点实例小结
Apr 25 Javascript
JavaScript文档加载模式以及元素获取
Jul 28 Javascript
jQuery实现可以扩展的日历
Dec 01 jQuery
HTML+VUE分页实现炫酷物联网大屏功能
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相关资料
2006/10/09 PHP
PHP手机号中间四位用星号*代替显示的实例
2017/06/02 PHP
PHP使用mysqli同时执行多条sql查询语句的实例
2019/03/22 PHP
js form action动态修改方法
2008/11/04 Javascript
js setTimeout 常见问题小结
2013/08/13 Javascript
javascript 闭包详解
2015/02/15 Javascript
JavaScript通过字符串调用函数的实现方法
2015/03/18 Javascript
基于原生js淡入淡出函数封装(兼容IE)
2016/10/20 Javascript
Bootstrap select实现下拉框多选效果
2016/12/23 Javascript
mongoose更新对象的两种方法示例比较
2017/12/19 Javascript
Vue 中使用vue2-highcharts实现曲线数据展示的方法
2018/03/05 Javascript
使用layui的router来进行传参的实现方法
2019/09/06 Javascript
如何通过vscode运行调试javascript代码
2020/07/24 Javascript
python实现文本去重且不打乱原本顺序
2016/01/26 Python
Python 转义字符详细介绍
2017/03/21 Python
详解Python读取配置文件模块ConfigParser
2017/05/11 Python
win8下python3.4安装和环境配置图文教程
2018/07/31 Python
解决Mac下首次安装pycharm无project interpreter的问题
2018/10/29 Python
解决Python中定时任务线程无法自动退出的问题
2019/02/18 Python
Python 实现交换矩阵的行示例
2019/06/26 Python
Django框架 信号调度原理解析
2019/09/04 Python
在tensorflow中实现去除不足一个batch的数据
2020/01/20 Python
jupyternotebook 撤销删除的操作方式
2020/04/17 Python
django haystack实现全文检索的示例代码
2020/06/24 Python
解决TensorFlow程序无限制占用GPU的方法
2020/06/30 Python
scrapy中如何设置应用cookies的方法(3种)
2020/09/22 Python
python 5个实用的技巧
2020/09/27 Python
python按照list中字典的某key去重的示例代码
2020/10/13 Python
HTML5 声明兼容IE的写法
2011/05/16 HTML / CSS
戛纳奢侈品商店:Jacques Loup法国
2019/11/04 全球购物
竞职演讲稿范文
2014/01/11 职场文书
岗位职责风险点
2014/03/12 职场文书
《记金华的双龙洞》教学反思
2014/04/19 职场文书
敲诈同学钱财检讨书范文
2014/11/18 职场文书
SpringBoot+Vue+JWT的前后端分离登录认证详细步骤
2021/09/25 Java/Android
JS实现简单的九宫格抽奖
2022/06/28 Javascript