侧边栏壁纸
  • 累计撰写 22 篇文章
  • 累计创建 1 个标签
  • 累计收到 1 条评论
标签搜索

目 录CONTENT

文章目录
vue

用pnpm创建vite+vue3+ts+element-plus+axios+vue-router@4+pinia项目

程序员老潘
2023-06-10 / 0 评论 / 0 点赞 / 143 阅读 / 198 字

node版本必须18+或者20+

pnpm create vite my-vue-app --template vue-ts 
pnpm install element-plus axios vue-router@4 pinia

main.ts

import { createApp } from 'vue'
import router from './router';
import './style.css'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import { createPinia } from 'pinia'
const pinia = createPinia()

const app = createApp(App)
app.use(router)
app.use(ElementPlus)
app.use(pinia)
app.mount('#app')

router.ts

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

const routes = [
  { path: '/', component: import('./views/home.vue') },
  { path: '/about', component: import('./views/about.vue') },
]
const router = createRouter({
  history: createWebHashHistory(),
  routes, // `routes: routes` 的缩写
})

export default router

store.ts

import { defineStore } from 'pinia'

/* pinia用法和vuex类似  
import { useIndexStore } from './store/index'
const indexStore = useIndexStore()
indexStore.count
indexStore.doubleCount
indexStore.increment() */

export const useIndexStore = defineStore('index', {
  state: () => {
    return {
      count: 0,
    }
  },
  getters: {
    doubleCount: (state) => state.count * 2,
  },
  actions: {
    increment() {
      this.count++
    },
  },
})

0

评论区