Vue-CLI 2.0轻松启动项目，Vue页面切换轻松掌握

2023-12-31 21:21:30

搭建Vue-CLI项目

踏入Vue.js的世界，我们首先需要使用Vue-CLI搭建一个项目。Vue-CLI是一款极其强大的工具，它能够快速初始化一个项目并集成了常用的工具，如webpack、Babel、ESLint等，帮助我们快速构建Vue.js项目。

步骤一：安装Vue-CLI

首先，请确保你的电脑已经安装了Node.js和npm。如果没有，请先安装它们。安装好Node.js和npm后，就可以通过如下命令安装Vue-CLI：

npm install -g @vue/cli

步骤二：创建项目

安装好Vue-CLI后，就可以创建项目了。打开命令行工具，进入你希望创建项目的位置，然后输入以下命令：

vue create projectname

需要特别注意的是，projectname不允许包含大写字母。

步骤三：安装依赖

项目创建好后，需要安装项目所需的依赖包。可以通过如下命令安装依赖包：

npm install

步骤四：运行项目

依赖包安装好后，就可以运行项目了。在命令行工具中，输入如下命令：

npm run serve

运行成功后，项目就会在浏览器中打开。

Vue页面切换的奥秘

在Vue.js中，一切皆组件，所以所谓的“页面跳转”其实是组件的切换。切换的配置都写在router文件夹下的index.js文件中。

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../components/Home.vue'
import About from '../components/About.vue'

Vue.use(VueRouter)

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

const router = new VueRouter({
  routes
})

export default router

在这个文件中，我们可以看到两个组件：Home和About，以及两个路由：/和/about。当用户访问/时，Home组件就会被渲染；当用户访问/about时，About组件就会被渲染。

要实现组件之间的切换，可以使用<router-link>组件。<router-link>组件是一个超链接组件，当用户点击它时，就会触发组件的切换。

<template>
  <div>
    <h1>Home</h1>
    <router-link to="/about">About</router-link>
  </div>
</template>

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