# VueJs 框架
**Repository Path**: hyo-ja/vue-js-framework
## Basic Information
- **Project Name**: VueJs 框架
- **Description**: Project includes： Vue.js
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 1
- **Forks**: 0
- **Created**: 2025-04-07
- **Last Updated**: 2025-05-26
## Categories & Tags
**Categories**: Uncategorized
**Tags**: Vue
## README
# VueJs 框架
## 创建 第一个 Vue 应用并关闭 devtools
### 一、修改 vite.config.js 配置文件（关闭 devtools）
**vite.config.js**
```js
import { fileURLToPath, URL } from "node:url";
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
// 暂时不需要开发工具
// import vueDevTools from 'vite-plugin-vue-devtools'
// https://vite.dev/config/
export default defineConfig({
plugins: [
vue(),
// 暂时不需要开发工具
// vueDevTools(),
],
resolve: {
alias: {
"@": fileURLToPath(new URL("./src", import.meta.url)),
},
},
});
```
### 二、编写 组件文件
**App.Vue**
```vue
第一个 Vue 页面
```
### 三、初始化 Vue 实例并挂载到 DOM 中
**main.js**
```js
// 导入全局样式文件
import "./assets/main.css";
// 从 Vue 库中导入 createApp 方法
import { createApp } from "vue";
// 导入根组件 App.vue
import App from "./App.vue";
// 使用 createApp 方法创建一个 Vue 应用实例
const app = createApp(App);
// 将 Vue 应用挂载到 DOM 中的某个元素上。
app.mount("#app");
```
### 四、在 html 中引入写好的 js
**index.html**
```html
第一个 Vue 页面
```
### 五、效果演示
#### [项目预览](https://gitee.com/hyo-ja/vue-js-framework/tree/master/20250408%20%E5%88%9B%E5%BB%BAVue%E5%BA%94%E7%94%A8/vue-js-project)
#### 效果预览
## 打包 Vue 应用
**项目打包**
```bash
yarn build
```
