安装

Vite + CDN

  1. 安装 vite -D，只作 devServer

    1. yarn add vite -D

  2. index.html

  • 被 Vue 挂载的元素
    <div id="app"></div>
  • 引用 CDN 链接
    <script src="https://unpkg.com/vue@3.1.2/dist/vue.global.js"></script>
  • 入口方法
    <script type="module" src="./src/main.js></script>

    Vite

    1. npm init @vitejs/app vue-vite
    只能开发 Vue 3
    可以在 index.html 中引入 CDN 的 Vue
    这样来减少项目最终打包的大小

    vue-cli

    1. npm install @vue/cli -g
    2. vue create vue-vue-cli
    可以在 public/index.html 中引入 CDN 的 Vue
    然来配置 vue.config.js
    1. module.exports = {
    2.   configureWebpack: {
    3.     externals: {
    4.       root: 'Vue',
    5.     vue: 'Vue'
    6.   }
    7. }
    8. }
    这样来减少项目最终打包的大小

    Codepen

    点击查看【codepen】