目前最详细的Vite+Vue3项目搭建指南

最新推荐文章于 2024-07-25 11:05:39 发布

云梦影

最新推荐文章于 2024-07-25 11:05:39 发布

阅读量1.7k

点赞数 1

分类专栏：从实践学知识文章标签： vue

本文链接：https://blog.csdn.net/yunmengying/article/details/118344809

版权

本文提供了一步一步的教程，指导如何使用Vite配置和搭建Vue3项目，包括创建Vue3项目、引入Vue Router、Vuex和Element Plus，以及vite.config.ts的配置。通过这个指南，读者可以了解每个步骤的具体操作，从创建项目到设置路由、状态管理和UI库的引入。

摘要由CSDN通过智能技术生成

vite 配置Vue3 项目

创建vue3项目

npm 修改配置（可省略这一步）
- win+R 输入 cmd 回车，打开命令提示符
- npm config set prefix <dir name> 设置仓库路径，英文名，不能有空格
  
  npm config set cache <dir name> 设置cache路径，规则同上
  
  npm config set registry https://registry.npm.taobao.org 修改下载源为淘宝镜像
cd 进入项目目录

npm init @vitejs/app <project-name>

如果报错找不到package.json，则是第一步的路径上有空格

之后出现这个界面，选择vue

根据自己喜好选择是否使用typescript

根据提示执行下面的命令即可

引入Vue Router

npm install vue-router@next --save
在src目录下创建router文件夹，下面新建index.js

创建views文件夹存放路由匹配的视图

router/index.js

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

const routes = [
    {
     
        path: '/',
        name: 'home',
        component