使用vite搭建vue3.2项目，包含vuex+router+element-plus+ts；项目初始化完整版教程

发呆的小蔡°

已于 2023-09-26 14:56:10 修改

阅读量1.9k

点赞数

分类专栏： Vue3.2 文章标签： vue.js npm typescript

于 2022-05-21 11:04:51 首次发布

本文链接：https://blog.youkuaiyun.com/Shivy_/article/details/124895111

版权

Vue3.2 专栏收录该内容

16 篇文章

订阅专栏

本文详细介绍了使用Vite和Vue3.2创建项目的过程，包括全局安装、依赖包配置（如Vuex、Vue Router、Element Plus）、路由和Vuex的配置示例，以及如何在main.js中整合所有组件。通过这个教程，读者能掌握从零开始搭建一个现代前端项目的步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目创建

全局安装项目
命令1： npm install create-vite-app -g
敲完命令后，会弹出如下提示：

命令2： npm create vite@latest
根据提示信息，自己选择，使用 npm 去创建项目，或者使用 yarn。
创建项目
这里我使用了 npm。命令： npm install create-vite-app -g。敲完命令后，会弹出如下项目创建的选择，可以自行进行选择，这里我全部选择了默认，如下所示：
安装项目所需依赖包
使用命令 cd vite-project 切换到我们创建好的项目目录下，使用命令 npm i安装项目的依赖包
安装 vuex
命令： npm install vuex@next --save
安装路由
命令： npm install vue-router
安装elementUI库
因为项目是vue3.2版本的，所以这边配套使用的UI库是elment-plus版本的，直接使用命令 npm install element-plus --save安装即可；
更多组件使用可参考elment-plus官网详细介绍，
地址：https://element-plus.gitee.io/zh-CN/
安装 axiso 网络请求
命令： npm install axios -S
运行项目
全部安装完成后，使用命令npm run dev 即可运行项目。

相关配置

创建项目时，安装了很多依赖，比如UI库路由等，这些在页面当中使用，需要进行配置，如下所示。

vuex 配置
在项目的 src 目录下新建一个 store文件夹，用来配置 vuex的相关信息，然后在 store文件夹下新建一个 index.js，所需的文件都可在这里进行配置，如下所示，我随便配置了几个。

import  {createStore} from 'vuex';
const store = createStore({
    state: {
        isAdd: true,
    },
    mutations: {
        setAddStatus(state, param) {
            state.isAdd= param
        }
    },
    actions: {},
    getters: {}
})
export default store

路由配置
在项目的 src 目录下新建一个 router文件夹，用来配置 router的相关信息，然后在 router文件夹下新建一个 index.js，项目使用的路由都可在这里进行配置，如下所示，我随便配置了几个。

import { createRouter, createWebHashHistory } from 'vue-router'
import { defineAsyncComponent } from 'vue'
const router = createRouter({
    history: createWebHashHistory(),
    routes: [
        {
            path: '/',
            component: defineAsyncComponent(() => import('../views/index.vue')),
            meta: {
                title: '首页',
            },
            children: [{
                path: 'about',
                name: 'about',
                component: defineAsyncComponent(() => import('../views/about/index.vue')),
              },
              {
                path: 'news',
                name: 'news',
                component: defineAsyncComponent(() => import('../views/news/index.vue')),
              },
            ]
        },
          {
            path: '/my',
            component: defineAsyncComponent(() => import('../views/my.vue')),
            meta: {
                title: '我的',
            },
        },
    ]
})
export default router

在 main.js 当中去挂载我们使用的配置。

// 引入公共的样式文件
import './assets/style/common.less'; 
import { createApp} from 'vue'
import App from './App.vue'
// 挂载路由
import router from './router'
// vue状态管理
import store from './store/index'
// ele-plus UI库
import ElementPlus from 'element-plus'
//  ele ui样式
import 'element-plus/dist/index.css'
const app = createApp(App);
app.use(ElementPlus).use(router).use(store);
app.mount('#app')