【Vue全家桶】邂逅Vue

文章目录

  • 【Vue全家桶】邂逅Vue
  • 一、认识Vue
  • 二、Vue初体验
  • 1.1 CDN引入
  • 1.2 下载引入
  • 1.3 npm引入
  • 1.4 Vue CLI引入
  • 1.5 Vue初体验
  • 写在最后


一、认识Vue

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

怎么再vue中引用python文件 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.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

怎么再vue中引用python文件 vue怎么引入_javascript_02

  1. 创建项目：

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

vue create project-name

怎么再vue中引用python文件 vue怎么引入_javascript_03

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

怎么再vue中引用python文件 vue怎么引入_怎么再vue中引用python文件_04

3.运行项目：

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

怎么再vue中引用python文件 vue怎么引入_前端_05

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

怎么再vue中引用python文件 vue怎么引入_javascript_06

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>