首页vite 创建 vue 项目

vite 创建 vue 项目

时间: 2023-07-22 09:42:41 浏览: 125

以下是使用 Vite 创建 Vue 项目的基本步骤： 1. 安装 Node.js 环境（建议使用 LTS 版本），可以从官网下载并安装。 2. 使用 npm 安装 Vite： ``` npm install -g vite ``` 3. 在项目目录下创建一个新的项目，并进入该目录： ``` mkdir my-vue-project cd my-vue-project ``` 4. 初始化项目并安装依赖： ``` npm init -y npm install vue --save npm install @vue/compiler-sfc --save-dev ``` 5. 创建一个 index.html 文件，引入项目所需的 CSS 和 JavaScript 文件： ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>My Vite Vue App</title> <link rel="stylesheet" href="./styles.css"> </head> <body> <div id="app"></div> <script type="module" src="./main.js"></script> </body> </html> ``` 6. 创建一个 main.js 文件，编写 Vue 项目的代码： ``` import { createApp } from 'vue' import App from './App.vue' createApp(App).mount('#app') ``` 7. 在项目目录下创建一个 App.vue 文件，编写 Vue 组件代码： ``` <template> <div> <h1>{{ msg }}</h1> </div> </template> <script> export default { data() { return { msg: 'Hello, Vite Vue!' } } } </script> ``` 8. 在 package.json 文件中添加以下命令： ``` "scripts": { "dev": "vite" } ``` 9. 启动 Vite 服务器： ``` npm run dev ``` 10. 在浏览器中访问 http://localhost:3000，即可查看 Vue 项目运行效果。以上是使用 Vite 创建 Vue 项目的基本步骤，你可以根据自己的需要进一步配置和扩展项目。

阅读全文