江苏龙网

  1. 主页 > 生活百科 > >

如何一步一步搭建Vite Vue项目

Vite

第1步. 对项目进行初始化操作：npm init -y
由此生成package.json文件 。
第2步. 安装Vitenpm install vite -D
安装成功后会在package.json文件中添加以下内容：
"devDependencies": {
"vite": "^3.1.6"
}
第3步. 安装Vuenpm install vue
安装成功后会在package.json文件中添加以下内容：
"dependencies": {
"vue": "^3.2.40"
}
第4步. 安装插件：npm install @vitejs/plugin-vue -D
第5步. 在项目根目录中创建配置文件vite.config.js，内容如下：import { defineConfig} from "vite";
import Vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [Vue()]
})
第6步. 在项目根目录中创建入口文件index.html，内容如下：<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Vite + Vue</title>
</head>
<body>
<script type="module" src=https://www.isolves.com/it/cxkf/qd/2022-10-07/"src/main.js">
</body>
</html>
第7步. 在src目录中新建main.js文件：import { createApp } from "vue";
import App from "./App.vue";
createApp(App).mount('#app')
第8步. 在src目录中创建单组件文件App.vue，内容如下：<template>
<h1>Hello Vite + Vue!</h1>
</template>
<script>
export default {
name: "App"
}
</script>
<style scoped>
</style>
第9步. package.json文件中添加以下内容：
"scripts": {
"dev": "vite"
}
第10步. 运行项目：npm run dev

【如何一步一步搭建Vite Vue项目】


    推荐阅读


    上一篇：如何用Vite创建Vue3项目

    下一篇：如何编写一个原生 Web Components 组件