快速搭建vue+vuex+elementplus

Vue、Vuex 和 Element Plus 的项目

npm install -g @vue/cli

• 创建一个新的 Vue 项目：

• vue create my-project
  cd my-project
  
  vue add vuex
  npm install element-plus --save

• 在 Vue 组件中使用 Element Plus 组件。

• // main.js
  import { createApp } from 'vue'
  import { store } from './store'
  import App from './App.vue'
  import ElementPlus from 'element-plus'
  import 'element-plus/dist/index.css'
   
  const app = createApp(App)
   
  app.use(store)
  app.use(ElementPlus)
   
  app.mount('#app')

  // App.vue
  <template>
    <el-button @click="increment">Count: {{ count }}</el-button>
  </template>
   
  <script>
  import { mapState, mapMutations } from 'vuex';
   
  export default {
    computed: {
      ...mapState({
        count: state => state.count
      })
    },
    methods: {
      ...mapMutations({
        increment: 'INCREMENT'
      })
    }
  };
  </script>

  // store.js
  
  import { createStore } from 'vuex'
   
  export default createStore({
    state: {
      count: 0,
    },
    mutations: {
      INCREMENT(state) {
        state.count++
      }
    }
  })