Vue.js 是一个渐进式 JavaScript 框架,用于构建用户界面。它被设计为自底向上逐层应用,核心库只关注视图层。
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。
特点:
<!-- 开发环境版本 -->
<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script>
<!-- 生产环境版本 -->
<script src="https://cdn.jsdelivr.net/npm/vue@3"></script>
# 使用 npm
npm install vue@next
# 使用 yarn
yarn add vue@next
# 使用 pnpm
pnpm add vue
# 安装 Vue CLI
npm install -g @vue/cli
# 创建项目
vue create my-project
# 启动项目
cd my-project
npm run serve
# 使用 npm
npm create vite@latest my-vue-app -- --template vue
# 使用 yarn
yarn create vite my-vue-app --template vue
# 使用 pnpm
pnpm create vite my-vue-app --template vue
# 进入项目并安装依赖
cd my-vue-app
npm install
npm run dev
<!DOCTYPE html>
<html>
<head>
<title>Vue App</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<h1>{{ message }}</h1>
<p>{{ description }}</p>
</div>
<script>
const { createApp } = Vue;
createApp({
data() {
return {
message: 'Hello Vue 3!',
description: '这是我的第一个 Vue 应用'
}
}
}).mount('#app');
</script>
</body>
</html>
使用双大括号 {{ }} 进行文本插值: