17 从零到上手学习 Vue.js 框架教程

1. 什么是 Vue.js

Vue.js 是一款渐进式的 JavaScript 框架，用于构建用户界面。它的核心库专注于视图层，容易上手，并与其它库或现有项目整合。因此，Vue.js 成为单页应用和复杂界面的开发首选。

2. Vue.js 环境搭建

2.1 安装 Node.js 和 npm

要开始使用 Vue.js，首先需要确保你已安装 Node.js 和 npm。你可以通过在终端中输入以下命令检查是否已安装：

node -v
npm -v

2.2 创建 Vue 应用

使用 Vue CLI 快速创建一个新项目。在终端中运行以下命令：

npm install -g @vue/cli
vue create my-project

接着，按照提示选择配置项并创建项目。

3. 理解 Vue 组件

3.1 基本组件结构

每个 Vue 组件都是一个 .vue 文件，包含模板、脚本和样式。下面是一个简单的组件结构：

<template>
  <div>
    <h1>欢迎使用 Vue.js</h1>
  </div>
</template>

<script>
export default {
  name: 'Welcome'
}
</script>

<style>
h1 {
  color: blue;
}
</style>

4. 配置应用路由

4.1 安装 Vue Router

要在 Vue 应用中使用路由，首先需要安装 Vue Router。在项目根目录下运行：

npm install vue-router

4.2 创建路由配置

在 src 文件夹下创建一个 router/index.js 文件，并配置你的路由：

import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
});

export default router;

4.3 更新主应用文件

在 src/main.js 中引入并使用路由：

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

createApp(App)
  .use(router)
  .mount('#app');

4.4 在组件中使用路由

在组件中使用路由链接，可以使用以下模板：

<template>
  <div>
    <h1>我的 Vue 应用</h1>
    <router-link to="/">首页</router-link>
    <router-link to="/about">关于</router-link>
    <router-view />
  </div>
</template>

4.5 创建视图组件

在 src/views 目录中创建 Home.vue 和 About.vue 文件，内容如下：

Home.vue：

<template>
  <div>
    <h2>首页</h2>
  </div>
</template>

<script>
export default {
  name: 'Home'
}
</script>

About.vue：

<template>
  <div>
    <h2>关于我</h2>
  </div>
</template>

<script>
export default {
  name: 'About'
}
</script>

5. 总结

通过本文的教程，你学习了如何从零开始创建一个基础的 Vue.js 应用，并配置了路由。这是你深入学习 Vue.js 框架的第一步，后续你可以探索更多 Vue 的特性，如状态管理、构建组件等。继续深入，享受 Vue.js 的乐趣吧！