Vue 安装使用教程
一、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>
七、常见问题
Q1: vue 命令未找到？
- 确保已安装 Vue CLI，并且 npm 安装路径加入环境变量
Q2: 项目无法运行？
- 使用
npm install安装依赖 - 检查端口是否被占用，或使用
npm run dev -- --port=3000
八、学习资源推荐
- Vue 官网
- Vue CLI 文档
- Vue 3 文档
- 菜鸟教程 Vue 教程
本文由“小奇Java面试”原创发布，转载请注明出处。
可以搜索【小奇JAVA面试】第一时间阅读，回复【资料】获取福利，回复【项目】获取项目源码，回复【简历模板】获取简历模板，回复【学习路线图】获取学习路线图。
