vue新手入门教程（项目创建+组件导入+VueRouter）

前言

今天主要是分享一个vue的基础语法。涉及到Vue项目的创建和vueRouter的使用。过两天我就会写一个天气预报的小demo的文章,涉及的内容包括vant组件库+Echarts+高德API的调用,效果图如下：

话不多说，开始分享今天的基础知识。

Vue项目的创建与启动

首先确保你拥有nodejs,没有的话可以去官网下载。Node.js --- Run JavaScript Everywhere (nodejs.org)

vue项目的创建方式有很多种，这里我们选择vue官方自带的脚手架（脚手架就是能帮助你快速搭建起项目目录结构）npm create vue@latest，输入指令之后按照下面的进行勾选。

记住这里的VueRouter不用勾选，等会我们自己来手写。

创建完成之后我们按照官方给我们的步骤启动项目

成功之后我们就会看到下面进入给出的端口号，就会出现下面这张图

如果拥有之后我们就来真正初始化我们的项目，因为这里的东西我们都不需要。

1. 来到src目录下面将assets和components文件夹全部删除
2. 将App.vue初始化为下面这样

<template>
  <div>
    app
  </div>
</template>

<script setup>

</script>

<style lang="css" scoped>

</style>

3. main.js删除第一条import './assets/main.css'

完成之后在看看界面是下面这样

Vue的组件导入介绍

在介绍之前，我们先来聊聊vue。其实所有的框架React和Vue本质都是JS代码，都是大佬们提前将JS进行封装之后让我们进行简便使用，所以你写的Vue代码实际都是字符串，框架读取之后解析成为JS代码在添加元素到html结构上。 所以你看到的项目目录中的index.html 就是vue项目挂载的地方。src文件夹就是工作目录。

而Vue文件定义了之后需要进行手动挂载之后才能使用。你可以打开main.js文件,

1. import { createApp } from 'vue' 这段代码就是从大佬们写好的JS文件中使用对象解构的方式读取createApp方法(es6语法，ESmodule)，这个方法的作用就是Vue定义好的所有Vue文件挂载的根节点来挂载之后写的所有vue组件节点。函数接受一个.vue的组件对象作为根组件
2. import App from './App.vue'，导入App.vue 组件作为根组件
3. createApp(App).mount('#app')挂载在index.html的id为app的dom元素下面
   如果还是存有疑惑的同学可以观看官方文档快速上手 | Vue.js (vuejs.org)

---

接下来，让我们深入了解如何在Vue项目中导入和使用组件。Vue.js利用ES module语法来组织和重用代码，这意味着每个组件都可以被独立编写并按需导入到其他组件中。

组件的导入与注册

在Vue中，组件是一个可复用的UI单元，它拥有自己的视图和数据逻辑。当你创建了一个组件，想要在其他地方使用它时，你需要通过import语句将其导入，并在使用它的组件内进行注册。

默认导出与命名导出

• 默认导出 (export default)：每个.vue文件通常只有一个默认导出，这代表整个组件。例如，在MyComponent.vue文件中，如果你有export default {...}，那么导入时可以任意命名这个组件。

Javascript
深色版本
1// MyComponent.vue
2export default {
3  name: 'MyComponent',
4  // ...
5}

Javascript
深色版本
1// 在另一个组件中导入
2import MyComponent from './MyComponent.vue';

• 命名导出 (export)：虽然不常见于单文件组件(.vue)，但在某些场景下，你可能需要从一个模块中导出多个值。此时，导入时需要使用花括号明确指定导入的名称。

局部注册

在需要使用组件的Vue实例或组件内部，通过components选项注册导入的组件。

Javascript
深色版本
1import MyComponent from './MyComponent.vue';
2
3export default {
4  name: 'ParentComponent',
5  components: {
6    MyComponent
7  },
8  // ...
9}

然后在模板中像使用HTML标签一样使用这个组件：

Html
深色版本
1<template>
2  <div>
3    <my-component></my-component>
4  </div>
5</template>

全局注册

如果你希望在任何Vue实例中都能直接使用某个组件，可以在应用的入口文件（通常是main.js或app.js）中全局注册该组件。

Javascript
深色版本
1import MyComponent from './MyComponent.vue';
2import { createApp } from 'vue';
3
4const app = createApp(App);
5app.component('my-component', MyComponent); // 全局注册
6app.mount('#app');

这样注册后，无需在每个使用它的组件中单独导入和注册，直接在模板中使用<my-component>即可。

Vue Router案例

假设我们要创建一个简单的SPA（单页面应用），包含首页（Home）、关于（About）和详情（Detail）三个页面。让我们一步步实现这个应用的路由功能。

1. 初始化项目及安装Vue Router

首先，确保你已安装Vue CLI并创建了一个新项目。接着，在项目目录下安装Vue Router：

npm install vue-router

2. 配置Vue Router

在src目录下创建一个名为router的新文件夹，并在其中新建index.js文件，编写基本的路由配置：

Javascript
// src/router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'
import Detail from '../views/Detail.vue'
Vue.use(VueRouter)
const routes = [
  { path: '/', component: Home },  
  { path: '/about', component: About },
 { path: '/detail/:id', component: Detail } // 动态路由
]

16const router = new VueRouter({
  mode: 'history', // 使用history模式
  routes
})

export default router

这里定义了三条路由规则，分别对应首页、关于页面和一个带有动态参数的详情页面。

3. 修改主应用配置

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

Javascript
深色版本
// src/main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
  router, // 将路由器注入Vue实例
  render: h => h(App),
}).$mount('#app')

4. 创建视图组件

在src/views目录下创建对应的Vue组件文件，如Home.vue、About.vue和Detail.vue。

• Home.vue 可以简单展示欢迎信息。
• About.vue 展示关于页面的内容。
• Detail.vue 利用动态路由参数展示具体详情，例如根据ID获取数据。

5. 使用路由链接和视图

在App.vue中，使用<router-link>进行导航，并使用<router-view>来显示当前路由组件：

Html
深色版本
<!-- src/App.vue -->
<template>
  <div id="app">
    <nav>
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </nav>
    <router-view/> <!-- 路由出口 -->
  </div>
</template>

<style>
/* 简单样式 */
nav a {
  font-weight: bold;
  color: #2c3e50;
}
nav a.router-link-exact-active {
  color: #42b983;
}
</style>

6. 处理动态路由参数

在Detail.vue中，我们可以访问动态路由参数（例如通过this.$route.params.id），并据此加载内容。

Javascript
深色版本
// src/views/Detail.vue
export default {
  name: 'Detail',
  beforeRouteUpdate(to, from, next) {
    // 当路由参数变化时更新数据
   this.fetchData(to.params.id)
    next()
  },
  methods: {
   fetchData(id) {
     // 模拟根据ID获取数据
      console.log(`Fetching detail for ID ${id}`);
      // 实际应用中这里应调用API获取数据
    }
  },
  mounted() {
    this.fetchData(this.$route.params.id)
  }
}

至此，一个基础的Vue Router应用已经搭建完成，你可以通过点击导航链接在不同页面间切换，动态路由也确保了根据不同的ID展示不同的详情内容。这个案例展示了Vue Router的基本用法，包括路由配置、组件注册、导航以及动态路由的处理。

总结

通过ES module的import语法，Vue使得组件的复用和组织变得非常灵活和高效。无论是局部还是全局注册，关键是理解组件的导入路径以及如何在组件间正确地注册与使用。随着实践的深入，你会逐渐掌握Vue组件化开发的强大与便利。继续探索Vue的官方文档和其他资源，将有助于你更深入地理解和应用这些概念。