1. CDN application Vue:

CDN(Content Delivery Network, Content Distribution Network) is a network technology that enables users to obtain the required content from the nearest node by caching and distributing content on server nodes around the world, thereby improving access speed and reducing latency and data transmission loss.

Using Vue through CDN means that you don't need to explicitly install and manage Vue dependencies in the project, but directly use Vue by introducing a "script" tag in the HTML file that points to the Vue file on the CDN server. The advantage of this is that the browser can load the Vue file more quickly from the CDN server closest to the user, thereby improving the loading speed of the web page.
To use Vue via a CDN, add the following "script" tag to the "head" section of your HTML file:

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

This will load the Vue 2.x version. If you want to use Vue 3.x, you can replace the link with:

<script src="https://cdn.jsdelivr.net/npm/vue@3"></script>

Note that the approach of using a CDN is fine for simple Vue projects and prototyping, but in a production environment it is generally recommended to use a build tool such as Vue CLI to manage dependencies, package and optimize your code.

Two, Vue CLI

View CLI(Vue Command Line Interface, Vue command line interface) is a set of scaffolding tools officially provided by Vue.js for quickly generating, developing and building Vue.js projects. Vue CLI aims to simplify and standardize the development process of Vue.js applications, helping developers easily create, configure and deploy Vue.js projects.

Vue CLI provides the following functions:

Project templates: Vue CLI provides pre-configured project templates, including directory structure, configuration files and basic code, so that developers can quickly start developing Vue projects.
Plug-in system: Through plug-ins, developers can easily add new features to the project, such as Vuex, Vue Router, TypeScript support, etc. Plugins can also be used to integrate third-party libraries or services.
Development server: Vue CLI has a built-in development server that supports hot module replacement (Hot Module Replacement, HMR) function, real-time preview and automatic refresh.
Build tools: Vue CLI integrates with Webpack and other build tools to automatically handle code bundling, compression, optimization, and splitting to ensure that the final deployed application has high performance and minimal size.
Configuration management: Vue CLI provides a flexible configuration management method, allowing developers to customize project configuration through a graphical interface (Vue UI) or a configuration file (vue.config.js).

With Vue CLI, developers can focus on writing business logic code without worrying about the tedious details in the project configuration and construction process.

To install Vue CLI, you can use npm or yarn to run the following command:

npm install -g @vue/cli
# 或者
yarn global add @vue/cli

安装完成后，你可以通过运行vue create my-project命令来创建一个新的 Vue.js 项目。

3. Simple implementation based on CDN

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简单页面示例</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
<div id="app">
    <h1>{
   
   { title }}</h1>
    <p>{
   
   { description }}</p>
    <button @click="changeText">点击更换标题</button>
</div>

<script>
    new Vue({
      
      
        el: '#app',
        data: {
      
      
            title: '欢迎来到简单页面',
            description: '这是一个简单的页面，包含标题',
        },
        methods: {
      
      
            changeText: function() {
      
      
                this.title = '你已成功更换标题！';
            }
        }
    });
</script>
</body>
</html>

insert image description here

Click effect: