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中的原型链深入理解
Feb 24 Javascript
JavaScript jquery及AJAX小结
Jan 24 Javascript
javascript prototype原型详解(比较基础)
Dec 26 Javascript
Vue.js原理分析之observer模块详解
Feb 17 Javascript
完美解决input[type=number]无法显示非数字字符的问题
Feb 28 Javascript
JavaScript中变量提升与函数提升经典实例分析
Jul 26 Javascript
在Angular中使用JWT认证方法示例
Sep 10 Javascript
Vue项目路由刷新的实现代码
Apr 17 Javascript
javascript中的闭包概念与用法实践分析
Jul 26 Javascript
利用JavaScript的Map提升性能的方法详解
Aug 14 Javascript
基于JavaScript实现简单抽奖功能代码实例
Oct 20 Javascript
Vue3.0中Ref与Reactive的区别示例详析
Jul 07 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统计字符串中中英文字符的个数
2013/06/23 PHP
PHP cURL初始化和执行方法入门级代码
2015/05/28 PHP
Laravel框架实现利用中间件进行操作日志记录功能
2018/06/06 PHP
PHP7 弃用功能
2021/03/09 PHP
js 实现无缝滚动 兼容IE和FF
2009/07/15 Javascript
用js+iframe形成页面的一种遮罩效果的具体实现
2013/12/31 Javascript
基于jQuery实现表单提交验证
2014/11/24 Javascript
JAVA四种基本排序方法实例总结
2015/07/24 Javascript
JavaScript对HTML DOM使用EventListener进行操作
2015/10/21 Javascript
基于jQuery和CSS3制作数字时钟附源码下载(jquery篇)
2015/11/24 Javascript
javascript事件处理模型实例说明
2016/05/31 Javascript
老生常谈Bootstrap媒体对象
2017/07/06 Javascript
使用clipboard.js实现复制功能的示例代码
2017/10/16 Javascript
浅谈VUE单页应用首屏加载速度优化方案
2018/08/28 Javascript
jQuery简单实现根据日期计算星期几的方法
2019/01/09 jQuery
浅谈TypeScript 用 Webpack/ts-node 运行的配置记录
2019/10/11 Javascript
Vue中多元素过渡特效的解决方案
2020/02/05 Javascript
在Python3中使用asyncio库进行快速数据抓取的教程
2015/04/02 Python
python实现ID3决策树算法
2017/12/20 Python
python如何将图片转换为字符图片
2020/08/19 Python
Windows系统Python直接调用C++ DLL的方法
2019/08/01 Python
python实现处理mysql结果输出方式
2020/04/09 Python
使用Django搭建网站实现商品分页功能
2020/05/22 Python
基于Python爬取京东双十一商品价格曲线
2020/10/23 Python
使用CSS3来代替JS实现交互
2017/08/10 HTML / CSS
Html5应用程序缓存(Cache manifest)
2018/06/04 HTML / CSS
全球最大的网上自行车商店:Chain Reaction Cycles
2016/12/02 全球购物
巴西图书和电子产品购物网站:Saraiva
2017/06/07 全球购物
澳洲在线厨具商店:Kitchen Style
2018/05/05 全球购物
丝芙兰新加坡官网:Sephora新加坡
2018/12/04 全球购物
软件测试工程师笔试题带答案
2015/03/27 面试题
应届生妇产科护士求职信
2013/10/27 职场文书
商务英语大学生职业生涯规划书范文
2014/01/01 职场文书
个人存款证明书
2014/10/18 职场文书
2015建军节87周年演讲稿
2015/03/19 职场文书
培训班通知
2015/04/25 职场文书