使用vite创建vue3项目，完整项目（路由，vuex，setup，element-plus的使用）

1.创建vue3项目 https://www.cnblogs.com/luckybaby519/p/16155484.html

2.安装路由（根据官网安装element-plus。main.js中配置：官网地址：https://element-plus.gitee.io/zh-CN/guide/installation.html#%E4%BD%BF%E7%94%A8%E5%8C%85%E7%AE%A1%E7%90%86%E5%99%A8）

npm install vue-router@4

安装element-plus

npm install element-plus --save

 

main.js中配置

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

import router from './router/index'
import App from './App.vue'

const app= createApp(App)
app.use(ElementPlus)
app.use(router)



app.mount('#app')

 

3.新建视图

 

 4.test1.vue 内容

 

 5..test2.vue 内容

 

 6.创建路由配置文件，布局文件

 

6.1路由index.js内容

import {createRouter, createWebHistory} from 'vue-router'
import layout from '../layout/index.vue'
const routes = [
    {   
        path: '/',
        name: '/',
        component:layout,

          redirect: '/test1',

        children: [  
        {
            name: 'test1',
            path: '/test1',
            title: '首页',
            component: () => import('../views/test1.vue')
        },
        {
            name: 'test2',
            path: '/test2',
            title: '详情',
            component: () => import('../views/test2.vue')
        },
        ]
    },
    
    
    
];
const router = createRouter({
    history: createWebHistory(), 
    routes
})
 
export default router

6.2 routes.js内容

const routes = [
    {
        name: 'test1',
        path: '/test1',
        component: () => import('@/view/test1.vue')
    },
    {
        name: 'test2',
        path: '/test2',
        component: () => import('@/view/test2.vue')
    },
    
];
 
export default routes

6.3 layout index.vue内容(vue3不在使用this)

<script>
import { useRouter, useRoute } from "vue-router";
export default {
  setup() {
    const router=useRouter()
  
    const gotoTest = (index) => {
      if (index == 1) {
        router.push("/test1");
      }
      if (index == 2) {
       router.push("/test2");
      }
    };

    return {
      gotoTest,
    };
  },
};
</script>

<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <el-button @click="gotoTest(1)" type="primary">test1</el-button>
        <el-button @click="gotoTest(2)" type="primary">test2</el-button>
      </el-header>
      <el-main>
        <router-view></router-view>
      </el-main>
      <el-footer>Footer</el-footer>
    </el-container>
  </div>
</template>

7.app中配置路由视图

<template>
  <router-view></router-view>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

 

 效果如下

8.安装vuex4

npm install vue-router@4

创建vuex文件

8.1main.js配置

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

import store from './store'
import router from './router/index'
import App from './App.vue'

const app= createApp(App)
app.use(ElementPlus)
app.use(store)
app.use(router)



app.mount('#app')

 

8.2.store   index.js下内容 

import { createStore } from 'vuex'
import text from './modules/text' 

import getters from './getters'
export default createStore({
  modules: { 
   text,
  
  },
  getters
})

8.3.getters.js内容

const getters = {
    text: state => state.text.text,
}
export default getters

8.4.text.js内容

const state = {
    text:'我为你许了一个愿。'
}
const mutations = {
    SET_TEXT:(state,text)=>{
        state.text = text;
    }
}
const actions = {
}

export default{
    
    state,
    mutations,
    actions
}

8.5视图中配置（我用的前面创建的test1 视图）

<script>
import { useStore } from "vuex";
export default {
  setup() {
    const store = useStore();
 const text=store.getters.text
    return {
      store,
      text,
    };
  },
};
</script>

<template>
  <div>
    你看天边有流星划过
    {{text}}
  </div>
</template>

效果如下