pnpm+vue3+vite+pinia+router框架搭建

1.按照pnpm

npm install -g pnpm 

2.初始化项目

1. pnpm create vite
2. 输入项目名字
3. 选择对应语言
4. cd到目录下
5. pnpm i
6. npm run dev 启动项目

3.安装node

pnpm i @types/node --save-dev 

修改vite.config.js文件

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import * as path from 'path';

export default defineConfig({
  resolve: {
    //设置别名
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  },
  plugins: [vue()],
  server: {
    port: 8080, //启动端口
    host: true
  }
})

4.安装pinia

pnpm i pinia --save 

         1.在src目录下新建store/index.js

import { createPinia } from 'pinia'

const store = createPinia()

export default store 

         2.在 main.js 中引入并使用

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import store from './store/index'

createApp(App).use(store).mount('#app')

 5.安装router

pnpm i vue-router --save 

        1.新建 src/router 目录并在其下面创建 index.js

import { createRouter, createWebHistory } from 'vue-router';

const routes = [
  {
    path: '/login',
    name: 'Login',
    meta: {
        title: '登录',
        keepAlive: true,
        requireAuth: false
    },
    component: () => import('@/pages/login.vue')
  },
]

const router = createRouter({
  history: createWebHistory(),
  routes
});
export default router; 

        2.在main.js中引入

import router from '@/router/index';

createApp(App).use(store).use(router).mount('#app')