使用vite创建vue3项目的详细图文教程
更新时间：2022年11月15日 11:12:30 作者：给你六圆钱
创建Vue3项目有两种常见的方式,一种是想vue2版本一样使用脚手架工具创建,创建vue3项目的脚手架必须是4版本以上的,另一种方法就是使用vite创建,这篇文章主要给大家介绍了关于如何使用vite创建vue3项目的相关资料,需要的朋友可以参考下
一.创建vite+vue项目
1.在命令行输入以下创建语句。然后根据下图所示，输入项目名称并选择vue框架即可
npm create vite@latest
创建完项目后，根据提示依次输入三条命令：
cd 项目名称
npm install
npm run dev
二. 新建一个vue3项目
1.替换掉vite文件夹下的src文件夹
2.替换vite -> package.json中的dependencies为
“dependencies”: {<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E-->
“core-js”: “^3.6.5”,
“vue”: “^3.2.37”,
“vue-router”: “^4.0.13”
}
3. 安装依赖：npm i
4. npm run dev
三.修改vite.config.js
出现以下错误，是因为没有配置别名alias ：src到@
在vite.config.js文件中修改为
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
"@": "/src",
},
},
})
四.修改router
router -> index.js
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
// 替换为
const router = createRouter({
history: createWebHistory(),
routes
})总结
到此这篇关于使用vite创建vue3项目的详细图文教程的文章就介绍到这了,更多相关vite创建vue3项目内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
vue3使用element-plus再次封装table组件的基本步骤
这篇文章主要介绍了vue3使用element-plus再次封装table组件的基本步骤,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2024-03-03
这篇文章主要介绍了Vue使用CDN引用项目组件，减少项目体积的步骤，帮助大家提高项目加载速度，感兴趣的朋友可以了解下2020-10-10
最近做时速云项目部署,需要将前端项目打成镜像文件,下面这篇文章主要给大家介绍了关于Vue项目打包成Docker镜像包的简单步骤,需要的朋友可以参考下2023-10-10
这篇文章主要介绍了vue input标签通用指令校验的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-11-11
vue清除浏览器全部cookie的问题及解决方法(绝对有效!)
最近项目要实现关闭浏览器清除用户缓存的功能,下面这篇文章主要给大家介绍了关于vue清除浏览器全部cookie的问题及解决方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-06-06
这篇文章主要给大家介绍了关于vue使用keep-alive后清除缓存的相关资料,这个问题在我们日常工作中经常会用到,本文通过示例代码介绍的非常详细,需要的朋友可以参考下2021-08-08
这篇文章主要为大家详细介绍了vue+Element ui实现照片墙效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
这篇文章主要介绍了vue 父组件通过v-model接收子组件的值的代码,代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2019-10-10
这篇文章主要介绍了vue cli3 调用百度翻译API翻译页面的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-09-09
这篇文章主要给大家分享的是 Vue中props用法介绍， 在Vue中通过props,可以将原本孤立的组件串联起来，也就是可以子组件可以接收父组件传递过来的data，下面我们一起进入文章看看内容的详细介绍吧,需要的朋友也可以参考一下2021-11-11
最新评论