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初始化为下面这样
xml 复制代码
<template>
  <div>
    app
  </div>
</template>

<script setup>

</script>

<style lang="css" scoped>

</style>
  1. 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 {...},那么导入时可以任意命名这个组件。
arduino 复制代码
Javascript
深色版本
1// MyComponent.vue
2export default {
3  name: 'MyComponent',
4  // ...
5}
javascript 复制代码
Javascript
深色版本
1// 在另一个组件中导入
2import MyComponent from './MyComponent.vue';
  • 命名导出 (export):虽然不常见于单文件组件(.vue),但在某些场景下,你可能需要从一个模块中导出多个值。此时,导入时需要使用花括号明确指定导入的名称。

局部注册

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

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

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

xml 复制代码
Html
深色版本
1<template>
2  <div>
3    <my-component></my-component>
4  </div>
5</template>

全局注册

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

javascript 复制代码
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 复制代码
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 复制代码
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.vueAbout.vueDetail.vue

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

5. 使用路由链接和视图

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

xml 复制代码
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 复制代码
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的官方文档和其他资源,将有助于你更深入地理解和应用这些概念。

相关推荐
m0_7482552610 分钟前
easyExcel导出大数据量EXCEL文件,前端实现进度条或者遮罩层
前端·excel
长风清留扬30 分钟前
小程序毕业设计-音乐播放器+源码(可播放)下载即用
javascript·小程序·毕业设计·课程设计·毕设·音乐播放器
web1478621072343 分钟前
C# .Net Web 路由相关配置
前端·c#·.net
m0_7482478044 分钟前
Flutter Intl包使用指南:实现国际化和本地化
前端·javascript·flutter
飞的肖1 小时前
前端使用 Element Plus架构vue3.0实现图片拖拉拽,后等比压缩,上传到Spring Boot后端
前端·spring boot·架构
青灯文案11 小时前
前端 HTTP 请求由 Nginx 反向代理和 API 网关到后端服务的流程
前端·nginx·http
m0_748254881 小时前
DataX3.0+DataX-Web部署分布式可视化ETL系统
前端·分布式·etl
ZJ_.1 小时前
WPSJS:让 WPS 办公与 JavaScript 完美联动
开发语言·前端·javascript·vscode·ecmascript·wps
GIS开发特训营1 小时前
Vue零基础教程|从前端框架到GIS开发系列课程(七)响应式系统介绍
前端·vue.js·前端框架·gis开发·webgis·三维gis
Cachel wood2 小时前
python round四舍五入和decimal库精确四舍五入
java·linux·前端·数据库·vue.js·python·前端框架