1.使用npm搭建vite项目,会自动搭建vue3项目
npm create vite@latest
yarn create vite
2.手动搭建vue3项目
- 创建一个项目名称的文件夹
- 执行命令：npm init -y 快速的创建一个默认的包信息
- 安装vite: npm i vite -D
-D开发环境的依赖
- 安装vue,现在默认是vue3. 执行命令: npm i vue -D/-S都可以
- 创建index.html文件，src=“入口js文件” ，添加id="app"挂载点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="./src/main.js"></script>
</body>
</html>
- 创建src目录下的js入口文件main.js
- 创建App.vue组件，并定义路由出口
<template>
<router-view /> <!-- 定义路由出口 -->
</template>
- 在main.js文件中引入App.vue文件
import {
createApp } from "vue";
import App from './App.vue';
const app = createApp(App);
app.mount('#app');
-
由于html文件中不能跑App.vue文件，需要安装一个插件：执行命令 npm i @vitejs/plugin-vue -D ,如果npm run dev不报错不需要安装
-
配置vite.config.js文件，如果npm run dev不报错不需要配置以下代码
import {
defineConfig } from "vite";
import Vue 
最低0.47元/天 解锁文章
扫一扫
4004
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
