脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vite创建vue3项目

使用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项目内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

最新评论