vue3.0学习打卡第一天

第一步 安装

此处使用 pnpm 创建 vue 3.0项目 用npm是一样的 只是说本人最近在学习 pnpm
pnpm create vue@latest
切换到刚刚创建的 项目
cd <your-project-name>
安装依赖
pnpm install
运行项目
pnpm dev

这样运行的只能用 localhost 进行访问， 想要用本地ip访问项目的话 运行项目的命令改成
pnpm dev --host
或者将 package.json 文件的dev命令修改一下 在vite后面添加上 --host 如图 这里 pnpm run 相当于是一个语法糖 等效于 .\node_modules\.bin
pnpm run dev是执行package.json文件中scripts中的dev命令，等效于运行了这段命令
.\node_modules\.bin\vite

第二步 添加路由

为了学习 我没有选择自动安装其他东西

1. 安装路由
   pnpm add vue-router@4
2. 创建文件 /src/router/index.js， 创建/src/views/home.vue
3. 编写路由文件的代码 如下

import { createRouter, createWebHistory } from 'vue-router'
const routes = [{path: '/',name: 'Home',component: () =>import('@/views/home.vue')}]
export default createRouter({
    history: createWebHistory(),
    routes
})

4. 在main.js文件中使用 router

// @@filename(/src/main.js)
import { createApp } from 'vue'
import App from './App.vue'
import router from '@/router'
const app = createApp(App)
// 在vue中注册路由
app.use(router)
app.mount('#app')

5. 路由出口 在 App.vue 中使用 RouterView 组件

// @@filename(/src/App.vue)
<script setup>
import { RouterView } from 'vue-router'
</script>
<template>
  <RouterView />
</template>

到了这里我们的路由就注册成功了，问项目根目录可以看到home.vue中的内容了， 关于路由的更多的使用方法放到后续单独的vue-router学习中记录

第三步 使用 pinia 状态管理库

1. 安装 pinia
   pnpm add pinia
2. 创建 /src/store/index.js
3. 编写代码如下

// @@filename(/src/store/index.js)
import { defineStore } from 'pinia'
export const useCountStore = defineStore('count', {
    state: () => ({ count: 1 }),
    actions: {
        increment() {
            this.count ++
        }
    }
})

4. 在vue中注册pinia

// @@filename(/src/main.js)
import { createApp } from 'vue'
import App from './App.vue'
import router from '@/router'
import { createPinia } from 'pinia'
const app = createApp(App)
// 注册router
app.use(router)
// 注册pinia
app.use(createPinia())
app.mount('#app')

5. 使用 pinia

// @@filename(/src/App.vue)
<script setup>
import { RouterView } from 'vue-router'
import { useCountStore } from '@/store'
const store = useCountStore()
</script>

<template>
  <main>
    <p>App.vue count: {{ store.count }}</p>
    <RouterView />
  </main>
</template>

// @@filename(/src/views/home.vue)
<template>
    <div>
        home.vue: <button @click="store.increment">count ++</button>
    </div>
</template>

<script setup>
import { useCountStore } from '@/store'
const store = useCountStore()
</script>

到了此处已经完成了整个 pinia 的编写使用效果