Vue 安装使用教程-CSDN博客

本文链接：https://blog.csdn.net/weixin_44096133/article/details/149057128

一、Vue 简介

Vue（读作 /vjuː/，类似于“view”）是一款用于构建用户界面的渐进式 JavaScript 框架。它易于上手，轻量高效，适合快速构建前端界面，广泛应用于各类 Web 项目中。

二、Vue 安装方式

2.1 直接通过 CDN 使用（适合入门学习）

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.min.js"></script>

或 Vue 3：

<script src="https://cdn.jsdelivr.net/npm/vue@3.3.4/dist/vue.global.prod.js"></script>

示例代码：

<div id="app">{{ message }}</div>
<script>
  new Vue({
    el: '#app',
    data: {
      message: '你好，Vue！'
    }
  });
</script>

2.2 使用 Vue CLI（推荐生产项目）

安装 Node.js

前往官网 https://nodejs.org/ 下载并安装。

安装 Vue CLI

npm install -g @vue/cli

验证安装：

vue --version

创建 Vue 项目

vue create my-project
cd my-project
npm run serve

访问浏览器：http://localhost:8080

2.3 使用 Vite（快速开发推荐）

npm create vite@latest my-vue-app -- --template vue
cd my-vue-app
npm install
npm run dev

三、Vue 项目结构说明（Vue CLI）

my-project/
├── public/
├── src/
│   ├── assets/
│   ├── components/
│   ├── App.vue
│   └── main.js
├── package.json
└── vue.config.js

四、基础语法示例（Vue 2 / Vue 3）

<div id="app">
  <p>{{ message }}</p>
  <input v-model="message">
</div>

<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好，Vue！'
    }
  });
</script>

五、常用指令

指令	功能说明
`v-model`	双向绑定
`v-bind`	绑定属性
`v-if` / `v-else`	条件渲染
`v-for`	列表循环
`v-on` / `@`	事件绑定

六、组件开发示例

<!-- HelloWorld.vue -->
<template>
  <h2>{{ msg }}</h2>
</template>

<script>
export default {
  props: ['msg']
}
</script>

// App.vue
<template>
  <HelloWorld msg="欢迎使用组件！"/>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
  components: { HelloWorld }
}
</script>