我的 vuejs 学习 - 基础环境

最新推荐文章于 2025-12-15 06:58:03 发布

原创最新推荐文章于 2025-12-15 06:58:03 发布 · 479 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #学习 #前端

我在六七年前用过vuejs 做公司的网站系统,后面就一直没有再用过了. 最近在学用golang的过程中也想把这块的知识点再学起来, 毕竟jQuery 已经过时了…

就完全当一个新手来学习它吧

在网上搜索一些教程的时候, 实例语法有好几种写法, 最新学习那当然是要学最新版了, 2.x 的版本就不关注了, 为了降低学习曲线不过多的引入复杂的概念, 选择的还是直接用cdn的形式不使用构建工具来搞, 构建工具环境也挺复杂的 node 一些包都不是几个小时就能上手的… 那些以后再说吧

先整理一些常用的概念:

CDN

https://cdn.jsdelivr.net.cn/npm/vue/ 目录可以选版本
https://cdn.jsdelivr.net/npm/vue@3.5.25 81 kb
https://cdn.jsdelivr.net/npm/vue@2.7.16 40.4kb

这是快速引用的方式但是它会造成一个 HTTP 302 跳转, 所以在引用的时候还是得写全路径:

https://unpkg.com/vue@3.5.25/dist/vue.esm-browser.js 129 kb
https://unpkg.com/vue@3.5.25/dist/vue.esm-browser.prod.js 61.1kb
https://cdn.jsdelivr.net.cn/npm/vue@3.5.25/dist/vue.global.js
https://cdn.jsdelivr.net.cn/npm/vue@3.5.25/dist/vue.global.prod.js

版本 2 和 3 的区别

有一个极为明显的地方, 就是不能 new Vue 对象

// 2 的写法
new Vue({
  render: h => h(App)
}).$mount('#app')

// 3 的写法
import { createApp } from 'vue'

const app = createApp({
  data() {
    return {
      count: 0
    }
  }
})

esm, global 的区别

浏览器默认不支持esm的 import/export 语法，可以显式声明 <script type="module">.

<!DOCTYPE html>
<html>
  <head>
    <title>示例</title>
    <script type="importmap">
  {
    "imports": {
      "vue": "https://unpkg.com/vue@3.5.25/dist/vue.esm-browser.prod.js"
    }
  }
</script>

  </head>
  <body>
    <div id="app">
  <button @click="count++">{{ count }}</button>
</div>

    <script type="module">
      import { createApp } from 'vue'

		const app = createApp({
		  data() {
		    return {
		      count: 0
		    }
		  }
		})
        app.mount('#app')
    </script>
  </body>
</html>

global 为浏览器直接使用的构建版本，包含核心功能和常用插件，可以用全局变量 Vue来调用，像jquery 一样使用, 如下:

<!DOCTYPE html>
<html>
  <head>
    <title>示例</title>
    <script src="https://cdn.jsdelivr.net.cn/npm/vue@3.5.25/dist/vue.global.prod.js">
</script>

  </head>
  <body>
    <div id="app">
  <button @click="count++">{{ count }}</button>
</div>
    <script>
const app = Vue.createApp({
  data() {
    return {
      count: 0
    }
  }
})

app.mount('#app')
    </script>
  </body>
</html>