Vue3脚手架实现（六、渲染router和pinia）

Vue3脚手架实现（一、整体介绍）

Vue3脚手架实现（二、项目环境搭建）

Vue3脚手架实现（三、命令行读取配置）

Vue3脚手架实现（四、模板渲染流程、渲染一个基础项目）

Vue3脚手架实现（五、渲染jsx和prettier配置）

Vue3脚手架实现（六、渲染router和pinia）

Vue3脚手架实现（七、渲染eslint配置）

Vue3脚手架实现（八、渲染vitest配置）

Vue3脚手架实现（九、渲染typescript配置）

本期内容

渲染router

渲染pinia

渲染router

我们按照渲染router需要增加哪些配置和代码去进行依次拆分模板即可

• 配置相关，需要vue-router的package.json的依赖配置
  • template\config\router\package.json

    {
      "dependencies": {
        "vue-router": "^4.5.0"
      }
    }
    

• 入口文件，我们入口文件需要添加相应的代码app.use(router)，我们就需要给ejs的数据增加对应的配置
  • template\entry\router\src\main.js.data.mjs

    export default function getData({ oldData }) {
        oldData.importerList.push({
          id: 'router',
          importer: "import router from './router'",
        })
        oldData.useList.push({
          id: 'router',
          use: 'app.use(router)',
        })
        return oldData
      }
    

• 代码文件，需要增加路由配置以及相应的代码样例模板。
  • template\code\router\src\components\HelloWorld.vue：组件示例

    <template>
      <div>hello world</div>
    </template>
    
    <script setup></script>
    
    <style scoped></style>
    
    

  • template\code\router\src\router\index.js：路由配置

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

  • template\code\router\src\views\HomeView.vue：一个路由代码示例

    <template>
      <div>hello home</div>
      <HelloWorld></HelloWorld>
    </template>
    
    <script setup>
    import HelloWorld from '@/components/HelloWorld.vue'
    </script>
    
    <style scoped></style>
    
    

  • template\code\router\src\App.vue

    <template><router-view></router-view></template>
    
    <script setup></script>
    
    <style scoped></style>
    
    

然后需要在index.ts中增加对应的渲染逻辑

const create = async (name: string, options: Options) => {
  ...

  // 添加对应的配置
  ...
  if (needsPrettier) {
    render('config/prettier')
  }
  if (needsRouter) {
    render('config/router')
  }

  // 添加入口文件
  render('entry/default')
  if (needsRouter) {
    render('entry/router')
  }

  // 添加项目code
  render('code/default')
  if (needsRouter) {
    render('code/router')
  }

渲染pinia

同样也是按照pinia的配置拆解

• pinia的配置
  • template\config\pinia\.vscode\settings.json：拼写的错误忽略

    {
      "cSpell.words": ["pinia"]
    }
    

  • template\config\pinia\src\stores\counter.js：一个代码示例的配置，这个其实也可以放在code目录下，我这里直接和配置放一起

    import { ref, computed } from 'vue'
    import { defineStore } from 'pinia'
    
    export const useCounterStore = defineStore('counter', () => {
      const count = ref(0)
      const doubleCount = computed(() => count.value * 2)
      function increment() {
        count.value++
      }
    
      return { count, doubleCount, increment }
    })
    
    

  • template\config\pinia\package.json：pinia的依赖配置

    {
      "dependencies": {
        "pinia": "^3.0.1"
      }
    }
    

• template\entry\pinia\src\main.js.data.mjs：同样，pinia也需要在入口进行引入和app.use

  export default function getData({ oldData }) {
    oldData.importerList.push({
      id: 'pinia',
      importer: "import { createPinia } from 'pinia'",
    })
    oldData.useList.push({
      id: 'pinia',
      use: 'app.use(createPinia())',
    })
    return oldData
  }
  
  

同样index.ts也需要添加对应的渲染逻辑的代码

const create = async (name: string, options: Options) => {
  ...

  // 添加对应的配置
  ...
  if (needsPrettier) {
    render('config/prettier')
  }
  if (needsRouter) {
    render('config/router')
  }
  if (needsPinia) {
    render('config/pinia')
  }

  // 添加入口文件
  render('entry/default')
  if (needsRouter) {
    render('entry/router')
  }
  if (needsPinia) {
    render('entry/pinia')
  }
  ...
}