Vue CLI 4升级大揭秘：多页应用so easy，插件更灵活

Vue CLI 4的升级

咱们来聊聊Vue CLI这玩意儿可以帮助我们轻松搞定Vue项目！现在已经出到了第四版，比之前的Vue2里的Vue CLI 3更好使哦～到底好在哪里？你可别错过了，用它做起项目来超快的～先说说它在多页应用方面的改善，以前在Vue2里弄个多页挺麻烦的，但现在Vue3搭配着Vue CLI 4，搞多页面简直so easy！越来越简单了！再说说插件部分，变化不大，但现在用起来更灵活！咱们可以自由地扩展各种功能！另外，TypeScript和CSS预处理器用起来也是赞不绝口，太方便了！所以这个Vue CLI 4相当实用，用了它，咱们就能更加自如地运用这些高级技术了！

用Vue CLI 4打造vue3项目，那叫一个爽！简易的指令行让你轻松上手并深入理解整个框架和配置。学习起项目来大大提速，简直就是舒服到不行！

Composition API的灵活性

# 安装全局的Vue CLI 4
npm install -g @vue/cli
# 使用Vue CLI 4创建一个Vue3项目
vue create my-project
cd my-project
# 运行开发服务器
npm run serve

别慌张，Vue3推出了个叫作Composition API的厉害工具，它是过去那种Options API的升级版，让你代码稳妥，好搭配，用几次都行。这就像是把好多互相关联的零件拼凑起来，然后弄成一个个可以多次使用的小块。如此一来，我们就可以更舒服地管理和维持代码了！比如说，当程序猿们要跨组件分享数据或利用逻辑代码重复使用某些功能时，这个Composition API可谓一大帮手

哎呀对！用这个叫composition API的东西，外加 TypeScript 这个厉害家伙，咱们就可以享受类型推断之类的便捷功能。这样写出来的代码可是紧紧有条，看着舒服多了！而且，这种函数式编程方式还能够极大地提高代码的可重用性和维护便利度！

Vite带来的高效构建

  

    
{{ count }}
    增加
  


import { ref } from 'vue';
export default {
  setup() {
    const count = ref(0);
    const increment = () => {
      count.value++;
    };
    return { count, increment };
  },
};

你了解过Vite吗？它可是Vue3的默认构建工具用起来超舒服的，完全颠覆了以前的那种方式。对了，我们经常用到的那两个东西——Webpack和Vue CLI，跟Vite比简直弱爆了。

首先告诉你，Vite的功能超级强大，不用等很久就能看到效果，而且你修改代码的过程中还能继续运行，这不是大大提高效率！再者，这货主要是用原生ES模块导入法，有需要时才会编译和加载模块资源，完全不需要烦人的全应用打包步骤。这样的话，你的应用速度飞快，内存也耗得少哩～

用Vite搞项目，配起来特省心！大部分时候，直接搞定简单的配置就可以了。关键是，Vite特别棒，它自己带TypeScript和CSS预处理器功能，还能轻松应对像React、LitElement这种框架。有这么强大的工具，我们开发者就能专心研究业务，不用操心那些超麻烦的配置问题。

未来展望

你们都知道不？因为Vue3现在工具链越来越好使，所以咱们可能得期待看到更多好用的功能喔！越来越多的小伙伴开始用它来搞项目，而且都学会如何充分利用新功能！看来，以后前端的行情应该挺有希望的。

# 使用npm初始化一个新项目
npm init vite@latest my-app
cd my-app
# 安装依赖
npm install
# 运行开发服务器
npm run dev

。