vue3实战项目：备忘录（学习vue-router、pinia）--- 01

一、使用脚手架Vite创建项目

npm create vue@latest

项目名称为：vue3-memo
选择：

1. TypeScript
2. JSX支持
3. Vue Router
4. Pinia
   

查询当前使用的镜像源
npm get registry
设置为淘宝镜像源
npm config set registry https://registry.npmmirror.com/
还原为官方镜像源
npm config set registry https://registry.npmjs.org/
安装 yarn
npm install -g yarn

二、安装Element Plus

npm i element-plus

在 main.ts文件中添加

import 'element-plus/dist/index.css'

import ElementPlus from 'element-plus'
app.use(ElementPlus)

在App.vue文件中添加

<el-button type="primary">按钮</el-button>

启动项目看 element-plus组件是否生效。

此时, main.ts文件如下

import 'element-plus/dist/index.css'

import { createApp } from 'vue'
import { createPinia } from 'pinia'

import App from './App.vue'
import router from './router'

import ElementPlus from 'element-plus'

const app = createApp(App)

app.use(createPinia())
app.use(router)

app.use(ElementPlus)

app.mount('#app')

App.vue文件如下

<template>
  <div>
    <el-button type="primary">按钮</el-button>
  </div>
</template>
<script setup lang="ts">
  
</script>
<style scoped>
  
</style>

三、使用 vue-router 配置页面路由和使用 Pinia

(1) 在 views 文件夹下 新建两个组件：首页组件Home.vue 和 登录组件 Login.vue

(2) 先创建router/index.ts文件，再创建路由对象

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '@/views/Home.vue'
import LoginView from '@/views/Login.vue'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
    {
      path: '/login',
      name: 'login',
      component: LoginView
    }
  ]
})

export default router

将 App.vue文件修改如下

<template>
  <div>
    <router-view/>
  </div>
</template>
<script setup lang="ts">
  import {RouterView} from 'vue-router'
</script>
<style scoped>
  
</style>

因为 在新建项目的时候 选择了 vue-router 和 pinia ，所以在 main.ts中默认注册了。
注册pinia

import {createPinia} from 'pinia'
const app = createApp()
app.use(createPinia())

注册路由

import router from './router'
const app = crateApp()
app.use(router)

./router/index.ts中 创建一个路由对象

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '@/views/Home.vue'
import LoginView from '@/views/Login.vue'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
    {
      path: '/login',
      name: 'login',
      component: LoginView
    }
  ]
})

export default router

根据路由匹配到的组件要显示出来需要 组件RouterView占位。RouterView与 router-view是等效的。
RouterView 组件可以使 Vue Router 知道你想要在哪里渲染当前 URL 路径对应的路由组件。
组件 RouterView 和 RouterLink 都是全局注册的，因此它们不需要在组件模板中导入。
App.vue文件修改如下：

<template>
  <nav class="nav">
    <RouterLink to="/">Go to Home</RouterLink>|
    <RouterLink to="/login">Go to Login</RouterLink>
  </nav>
  <main><RouterView/></main>
    
  
</template>
<script setup lang="ts">

</script>
<style scoped>
 .nav a {
    margin: 10px;
  }
</style>

至此。基本环境跑通。