【Vue全家桶】邂逅Vue、Vue的多种引入方式

【Vue全家桶】邂逅Vue

一、认识Vue

• Vue 是一套用于构建用户界面的渐进式 JavaScript框架。
  • 全称是Vue.js或者Vuejs；
  • 它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型；
  • 帮助你高效地开发用户界面，无论任务是简单还是复杂；
• 什么是渐进式框架？
  • 表示我们可以在项目中一点点来引入和使用Vue，而不一定需要全部使用Vue来开发整个项目

二、Vue初体验

• 安装和使用Vue这个JavaScript库有哪些方式呢？
• 在页面中通过CDN的方式来引入；
• 下载Vue的JavaScript文件，并且自己手动引入；
• 通过npm包管理工具安装使用它；
• 直接通过Vue CLI创建项目，并且使用它；

1.1 CDN引入

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

• 通过 CDN 使用 Vue 时，不涉及“构建步骤”。这使得设置更加简单，并且可以用于增强静态的 HTML 或与后端框架集成。
• 但是，你将无法使用单文件组件 (SFC) 语法。

1.2 下载引入

• 下载Vue的源码，可以直接打开CDN的链接：
  • 打开链接，复制其中所有的代码；
  • 创建一个新的文件，比如vue.js，将代码复制到其中
• 通过script标签，引入刚才的文件：

<script src="../js/vue.js"></script>

1.3 npm引入

 npm init vue@latest

1.4 Vue CLI引入

1.安装Vue CLI脚手架：

// 全局安装 Vue CLI
npm install -g vue-cli

// 全局安装最新版本
npm install -g @vue/cli

// 全局安装指定版本
npm install -g @vue/cli@3.11.0

// 或者使用 yarn 安装
yarn global add @vue/cli

查看Vue版本，可以通过如下命令：

• vue --version
• vue -V

2. 创建项目：

通过 vue create 来创建一个新的项目

vue create project-name

创建完成后会自动生成如下文件夹：

3.运行项目：

• 安装项目依赖：npm install
• 运行开发环境：npm run dev 或者
  npm run serve

初始访问项目，显示如下界面即表示创建成功：

1.5 Vue初体验

通过CDN方式引入Vue：

<h2>热爱是不会过期的</h2>
<div id ="app"></div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<script>
    // 使用Vue
    const app = Vue.createApp({
        template: `<h2>Hello World</h2>`
    })

// 挂载
app.mount("#app")
</script>

写在最后

✨ 创作不易，希望各位大佬支持一下