Vue 快速入门

最近更新于 5月 5, 2024 2 分钟阅读时长 编程, 前端开发

开发环境设置

确保你的开发环境中已经安装了 Node.js 和一个 Node.js 包管理器，例如 npm、yarn 等。

安装 Vue CLI

Vue CLI 是一个用于快速生成 Vue 项目脚手架的命令行工具，执行如下命令全局安装 Vue CLI：

1# 使用 npm 包管理器
2npm install -g @vue/cli
3
4# 使用 yarn 包管理器
5yarn global add @vue/cli

新建 Vue 项目

使用 Vue CLI 新建一个 Vue 项目：

1vue create my-app

然后通过方向键选择预设或特性，输入回车开始创建项目。等待创建完成后，进入项目并查看项目目录结构如下：

 1my-app
 2├── node_modules
 3├── public
 4│   ├── favicon.ico
 5│   └── index.html
 6├── src
 7│   ├── App.vue
 8│   ├── assets
 9│   │   └── logo.png
10│   ├── components
11│   │   └── HelloWorld.vue
12│   └── main.js
13├── babel.config.js
14├── jsconfig.json
15├── package.json
16├── package-lock.json
17├── README.md
18└── vue.config.js

各个文件和目录的含义如下：

  • node_modules：存放所有通过包管理器安装的 Node.js 依赖项
  • public：存放静态资源，包括图片、index.html 文件
  • src：存放项目代码
  • src/components：存放 Vue 组件文件，通常是可复用的非页面级组件
  • src/App.vue：Vue 项目根组件
  • src/main.js：应用的入口文件，用于创建 Vue 应用实例，挂载组件，并进行路由和状态管理等
  • bable.config.js：Babel 的配置文件，用于指定如何将 ES6+ 代码转换为向后兼容的 JavaScript 代码
  • package.json：描述项目的元数据和依赖关系
  • package-lock.json 或 yarn.lock：确保一个项目在所有机器上以相同的方式安装，锁定安装时每个依赖的版本
  • vue.config.js：Vue CLI 的可选配置文件，用于自定义项目的构建和开发服务器选项

启动开发服务器

如果使用 npm 包管理器，执行如下命令启动开发服务器：

1npm run serve

如果使用 yarn 包管理器，执行如下命令启动开发服务器：

1yarn serve

编写 Vue 组件

src/App.vue 定义了项目的根组件，你可以在 src/components 目录下创建新的组件。

Vue 组件通常具有如下结构：

 1<template>
 2  <!-- 组件的 HTML 模板 -->
 3</template>
 4
 5<script>
 6export default {
 7  // 组件的 JavaScript 脚本
 8};
 9</script>
10
11<style>
12/* 组件样式表 */
13</style>

src/main.js 文件中定义了 Vue 应用，例如：

1import Vue from 'vue'
2import App from './App.vue'
3
4new Vue({
5  render: h => h(App)
6}).$mount('#app')

路由和状态管理

如果你的应用程序需要路由（页面导航）或状态管理（中央数据存储），则可以使用 Vue Router 和 Vuex。通常这些依赖在创建项目时就已经添加了，如果没有，可以执行如下命令添加：

1npm install vue-router vuex

构建

执行如下命令构建应用的生产版本：

1npm run build

上述命令会在 dist 目录下生成一个应用的优化版本，并可以部署至你的生产服务器上。

Vue
上一页

相关