[Vue.js]学习笔记-Vue.js安装使用

范范 · 发表于 2018-11-27 15:43:01

[Vue.js]学习笔记-Vue.js安装使用

导读部分

讨论区：http://www.sufeinet.com/forum-58-1.html

教程目录：http://www.sufeinet.com/thread-24026-1-1.html

教程部分

Vue.js安装使用说明

Vue.js 安装有如下的方式：

1. 独立安装

即我们可以再Vue.js官网直接下载vue.min.js，并用<script>标签引入。

也可以选择点击下面附件中的链接直接下载哈，我下载好的，欢迎大家使用

实例说明

[HTML] 纯文本查看 复制代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 苏飞论坛(sufeinet.com)</title>
</head>
<body>
<script src="/libs/vue/vue.min.js"></script>

<div id="app">
  <p>{{ message }}</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})
</script>
</body>
</html>

附件：

vue.min.js (84.43 KB, 下载次数: 2)

2. CDN方法

即直接使用网上现有的js，在<script>标签中，直接使用CDN链接进行使用

以下推荐国外比较稳定的两个CDN，以及一个国内的一个，不过我还是建议下载到本地使用哦。

Staticfile CDN（国内） : https://cdn.staticfile.org/vue/2.2.2/vue.min.js

unpkg：https://unpkg.com/vue/dist/vue.js, 会保持和 npm 发布的最新的版本一致。

cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js

实例说明

1. Staticfile CDN（国内）

[HTML] 纯文本查看 复制代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 苏飞论坛(sufeinet.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
  <p>{{ message }}</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})
</script>
</body>
</html>

2. unpkg

[HTML] 纯文本查看 复制代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 苏飞论坛(sufeinet.com)</title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app">
  <p>{{ message }}</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})
</script>
</body>
</html>

3. cdnjs

[HTML] 纯文本查看 复制代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 苏飞论坛(sufeinet.com)</title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>

<div id="app">
  <p>{{ message }}</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})
</script>
</body>
</html>

3. NPM方法

有npm安装速度慢，版本低的话，还需要定时更新，在此处就不做讲讲以及使用安装使用方法了， 推荐大家直接下载，或者使用CDN方法，不过还是推荐大家直接下载到本地使用哈

以上就是本次的讲解， Vue.js安装使用方法，欢迎大家跟着我一起学习Vue.js，一起进步，加油

站长苏飞 · 发表于 2018-11-27 20:23:11

强烈支持楼主ing……

竹林风 · 发表于 2018-11-27 21:25:13

看到这帖子真是高兴！

Amy · 发表于 2018-11-27 21:32:42

我只是路过打酱油的。

		自动登录	找回密码
密码			马上注册

[vue.js学习笔记] [Vue.js]学习笔记-Vue.js安装使用

相关帖子