引入 vue.js

在前端开发中，我们经常需要使用JavaScript框架来帮助我们更高效地构建应用程序。而Vue.js作为其中的一员，已经越来越受到开发者的关注和喜爱。Vue.js是一款渐进式的JavaScript框架，具有简单易用、高效、灵活等优点。

对于Vue.js的引入，我们可以通过多种方式来实现。Vue.js可以在HTML页面中使用，也可以通过打包工具进行引入。下面我们就来探讨一下Vue.js的引入方式。

如果我们想要在HTML页面中使用Vue.js，我们需要在页面中引入Vue.js库文件。可以通过引入CDN地址，也可以下载Vue.js文件，并放在项目中。

  // 直接使用CDN引入
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>

    // 下载Vue.js库文件
    <script src="./vue.js"></script> 

如果我们使用了打包工具，如Webpack、Rollup等，我们可以通过模块化的方式（ES Module、CommonJS、AMD等）引入Vue.js。在使用Vue.js时，我们需要在代码中创建Vue实例，并通过将Vue实例挂载到一个DOM元素上，来使Vue实例渲染页面。

  // ES Module方式引入Vue.js
    import Vue from 'vue'

    // CommonJS方式引入Vue.js
    const Vue = require('vue')

    // 创建Vue实例
    const app = new Vue({
      el: '#app',// 将Vue实例挂载到id为app的DOM元素上
      data: {
        message: 'Hello Vue!'
      }
    }) 

除了在代码中创建Vue实例之外，Vue.js还可以通过单文件组件（.vue文件）的方式来组织代码。单文件组件是Vue特有的一种文件类型，它将模板、JavaScript和CSS组合在一起，方便我们管理组件代码。在Vue中，我们使用Vue CLI等工具来创建单文件组件。

除了引入Vue.js文件之外，我们也可以引入Vue.js的各种插件，来扩展Vue.js的功能。Vue.js的插件可以提供一些全局API、指令、过滤器、混入等等。Vue.js的官网上提供了很多插件供我们选择，也可以自己编写插件来满足需求。

总的来说，Vue.js作为一款渐进式的JavaScript框架，为我们的前端开发带来了很多便利和效率提升。在使用Vue.js时，我们需要根据自己的需求选择合适的引入方式，并在需要时引入各种插件，以便更好地开发我们的应用程序。