cdn模式

这种模式主要指的是直接在html中引入vue的js，然后在页面里写vue相关的代码。一般来讲，我们常用这种方式写一些小demo或者简单的单页。写demo还行，如果写一些简单的页面，我建议还是直接用原生js写吧，这样还能复习一些dom的操作。

基本使用如下，有2种写法，一种是老写法，一种是新的ESM。cdn地址推荐用unpkg或者jsdelivr,bootcss不建议使用。

老写法

<div id="app">{{a}}</div>

<script src="https://unpkg.com/vue@3.2.45/dist/vue.global.js"></script>
 <script>
    const {createApp,ref} = window.Vue
    createApp({
      setup() {
        const a = ref('test vue');
        return {a};
      },
    }).mount('#app');
  </script>

ESM本身就被浏览器原生支持的模块化，因此我们也可以直接使用。但这里我们需要借助script标签的一个新属性type=module，加上这个属性之后浏览器就会默认你写的是ESM，从而使用ESM相关功能。具体的兼容性大家可以自己查。

<div id="app">{{a}}</div>

 <script type="module">
    import {createApp,ref} from 'https://unpkg.com/vue@3.2.45/dist/vue.esm-browser.js'
    createApp({
      setup() {
        const a = ref('test vue');
        return {a};
      },
    }).mount('#app');
  </script>

讲到这里你可能会很奇怪，为什么浏览器本身就支持ESM，咱们在本地写的时候还需要打包器，比如webpack。

其实现在更多的时候，我们用打包器已经不是在做兼容或者转换一下代码的模块类型，更多的时候是为了工程化，代码的组织而去用。

比如，我现在一般不会配置babel-present去做兼容，而是直接使用polyfill.io去做兼容性，基本上es2020左右都是可以的。

vite

vite是vue祖师爷最新推出的一个打包器，也就是和webpack一样的东西。但是与webpack不同的时候，它使用了ESM作为标准，同时使用GO语言编写的esBuild。

vite的口号就是比webpack快10倍，没错，vite就好比js内的叶师傅

vite以很快的速度迭代到了3.0，解决了大部分问题(除了兼容性)，我认为是基本上可以使用了。但是使用的时候要注意尽量使用ESM的依赖。比如lodash，你换成lodash-es就好了。

大家可以直接在线体验一下 Vitejs - Vite (forked) - StackBlitz

同时搭建一个vite项目也十分简单，参照官网开始

如果你是写demo或者自己的小网站，我还是建议使用vite的，它的优点十分显著：编译速度快，打包速度快，HMR速度快，简而言之，言而简之就是快。

但是也有一些缺点，比如首次首批加载比较慢，请求比较多。打包完成之后文件比较混乱，最主要的一点就是不怎么支持CJS和UMD,如果你的项目里这两种模块比较多就得三思了。

webpack

这个就是大家最最最常用的vue-cli里的打包器了，这里我感觉没必要多说什么，每个vuer，哪怕是像我这样的初学者，用vue-cli搭项目应该是最基础的能力了。这里我有几个我自己摸索出来的小技巧给大家分享

打包命令里加上--morden

加上这个参数可以在打包的时候多打包一份ESM的，虽然打包出来体积变大了，但是实际加载的时候会自动判断，加载ESM会比普通格式更快。

 "build": "vue-cli-service build --morden"

关闭babel-present 在项目根目录下有babel.config.js，在里面这样配置(PS：我的vue-cli版本是5.x)

module.exports = {
  presets: [
    ['@vue/cli-plugin-babel/preset',
      {
        useBuiltIns: false
      }
    ]
  ]
}

然后在index.html中加入这个脚本

<script src="//polyfill.io/v3/polyfill.min.js" defer></script>

这一篇文章就结束了，下一篇开始熟悉vue3的api

vue3就应该这样学-2

cdn模式

vite

webpack