vue3创建项目步骤

an_julia

已于 2023-12-08 17:37:44 修改

阅读量623

点赞数 8

文章标签：前端

于 2023-12-08 17:33:47 首次发布

本文链接：https://blog.csdn.net/an_julia/article/details/134883635

版权

本文描述了将一个基于Vue2的项目迁移到Vue3，并使用Vite进行构建，同时介绍了如何集成ElementPlus组件库、VueRouter4和Vuex4以实现动态侧边栏。作者详细说明了从创建项目到引入并配置这些技术的步骤。

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

项目需求

vue2 + element UI 库都已经停止维护了，vue3的使用是必然的，所以把现有项目进行vue3重构
所以我使用了 vite 来搭建这个项目

参考资料

vite 官方中文文档 Vite 最初是为 Vue 3 项目而设计的

element plus vue3 的element 组件库

vue-router vue3，选择router4

vuex Vue 3 匹配的 Vuex 4 的文档

步骤

步骤一 : 使用vite 创建项目

命令行

    
    yarn create vite gongan-v3 --template vue
    yarn install
    yarn dev

在这里插入图片描述

注意！！这里可能出现报错 (node 版本影响的)

不管是npm run dev 还是 yarn dev 都报错，页面启动不起来

在这里插入图片描述

处理方法

修改node 版本（到16）我也不知道为什么，我刚好就有3个版本，13 1416的，我换到16的版本就跑起来了

在这里插入图片描述

步骤二 : 引入 element plus

命令行

    npm install element-plus --save

它有三种引入方法，具体参考element-plus ，推荐是自动导入

在这里插入图片描述

命令行

    npm install -D unplugin-vue-components unplugin-auto-import

在 .vite.config.ts 页面中

// vite.config.js 
import {
    defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import {
    ElementPlusResolver } from 'unplugin-vue-components/resolvers'

// https://vitejs.dev/config/
export default defineConfig({
   
  plugins: [
    vue(),
    AutoImport({
   
      resolvers: [ElementPlusResolver()],
    }),
    Components({
   
      resolvers: [ElementPlusResolver()],
    }),
  ],

最低0.47元/天解锁文章