首页如何建立一个vite项目

如何建立一个vite项目

时间: 2023-12-23 12:19:09 浏览: 82

要建立一个 Vite 项目，可以按照以下步骤进行： 1. 安装 Node.js 首先需要安装 Node.js，可以从官网下载安装包，或者使用包管理工具进行安装。 2. 创建项目目录在任意位置创建一个空的项目目录，并进入该目录。 3. 初始化项目在项目目录中执行以下命令，初始化项目： ``` npm init -y ``` 4. 安装 Vite 在项目目录中执行以下命令，安装 Vite： ``` npm install vite --save-dev ``` 5. 创建项目文件在项目目录中创建以下文件： - `index.html`：HTML 文件 - `main.js`：JavaScript 入口文件 - `App.vue`：Vue 单文件组件 6. 编写代码在创建的文件中编写代码，例如： index.html: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vite App</title> </head> <body> <div id="app"></div> <script type="module" src="/src/main.js"></script> </body> </html> ``` main.js: ```javascript import { createApp } from 'vue'; import App from './App.vue'; createApp(App).mount('#app'); ``` App.vue: ```vue <template> <div>{{ message }}</div> </template> <script> export default { data() { return { message: 'Hello, Vite!', }; }, }; </script> ``` 7. 运行项目在项目目录中执行以下命令，启动项目： ``` npx vite ``` 然后在浏览器中打开 http://localhost:3000 就可以看到效果了。这样就建立了一个简单的 Vite 项目。

阅读全文