前言
今天主要是分享一个vue的基础语法。涉及到Vue项目的创建和vueRouter的使用。过两天我就会写一个天气预报的小demo的文章,涉及的内容包括vant组件库+Echarts+高德API的调用,效果图如下：
文章源自灵鲨社区-https://www.0s52.com/bcjc/vue-jsjc/16830.html
话不多说，开始分享今天的基础知识。文章源自灵鲨社区-https://www.0s52.com/bcjc/vue-jsjc/16830.html
Vue项目的创建与启动
首先确保你拥有nodejs,没有的话可以去官网下载。Node.js — Run JavaScript Everywhere (nodejs.org)
vue项目的创建方式有很多种，这里我们选择vue官方自带的脚手架（脚手架就是能帮助你快速搭建起项目目录结构）npm create vue@latest，输入指令之后按照下面的进行勾选。文章源自灵鲨社区-https://www.0s52.com/bcjc/vue-jsjc/16830.html
记住这里的VueRouter不用勾选，等会我们自己来手写。
创建完成之后我们按照官方给我们的步骤启动项目文章源自灵鲨社区-https://www.0s52.com/bcjc/vue-jsjc/16830.html
文章源自灵鲨社区-https://www.0s52.com/bcjc/vue-jsjc/16830.html
成功之后我们就会看到下面进入给出的端口号，就会出现下面这张图文章源自灵鲨社区-https://www.0s52.com/bcjc/vue-jsjc/16830.html
如果拥有之后我们就来真正初始化我们的项目，因为这里的东西我们都不需要。文章源自灵鲨社区-https://www.0s52.com/bcjc/vue-jsjc/16830.html
- 来到src目录下面将assets和components文件夹全部删除
- 将App.vue初始化为下面这样
xml
<template>
<div>
app
</div>
</template>
<script setup>
</script>
<style lang="css" scoped>
</style>
- main.js删除第一条
import './assets/main.css'
完成之后在看看界面是下面这样文章源自灵鲨社区-https://www.0s52.com/bcjc/vue-jsjc/16830.html
文章源自灵鲨社区-https://www.0s52.com/bcjc/vue-jsjc/16830.html
Vue的组件导入介绍
在介绍之前，我们先来聊聊vue。其实所有的框架React和Vue本质都是JS代码，都是大佬们提前将JS进行封装之后让我们进行简便使用，所以你写的Vue代码实际都是字符串，框架读取之后解析成为JS代码在添加元素到html结构上。 所以你看到的项目目录中的index.html 就是vue项目挂载的地方。src文件夹就是工作目录。
而Vue文件定义了之后需要进行手动挂载之后才能使用。你可以打开main.js文件,文章源自灵鲨社区-https://www.0s52.com/bcjc/vue-jsjc/16830.html
import { createApp } from 'vue'这段代码就是从大佬们写好的JS文件中使用对象解构的方式读取createApp方法(es6语法，ESmodule)，这个方法的作用就是Vue定义好的所有Vue文件挂载的根节点来挂载之后写的所有vue组件节点。函数接受一个.vue的组件对象作为根组件- import App from './App.vue'，导入App.vue 组件作为根组件
- 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.js或app.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.vue、About.vue和Detail.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的官方文档和其他资源，将有助于你更深入地理解和应用这些概念。
评论