使用vite从开始搭建vue项目

一、创建项目

这里根据vite的兼容性说明,要求node.js版本>=12.0.0

提供了npm,yarn,两种包管理工具的创建方式

用NPM:

npm init @vitejs/app

使用yarn:

yarn create @vitejs/app

然后按照提示进行操作!

这里我们使用yarn来创建一个vue项目(这里我使用的Mac,与PC步骤基本一致)

  1. 在我们想要创建的项目都目录下打开终端(命令行工具)

  2. 输入如下命令

    // Mac  其中sudo是获取系统权限的标识
    sudo yarn create @vitejs/app
    
    // PC
    yarn create @vitejs/app
    

    我这里使用了sudo,所以要输入开机密码,输入之后回车,这里终端显示安装依赖,提示我们输入项目名称

  3. 输入项目名称vite-vue,回车

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用 Vite 从零开始搭建 Vue 3 开发环境,你需要按照以下步骤进行操作: 1. 首先,安装 Node.js 和 npm。你可以从 Node.js 官网下载最新版本的 Node.js。 2. 在你的项目文件夹中,使用以下命令初始化一个新的 npm 项目: ``` npm init -y ``` 3. 安装 ViteVue 3: ``` npm install vite vue@next --save-dev ``` 4. 在项目文件夹中创建一个名为 `index.html` 的文件,并将以下代码添加到文件中: ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Vue 3 Vite Demo</title> </head> <body> <div id="app"></div> <script type="module" src="/src/main.js"></script> </body> </html> ``` 5. 在项目文件夹中创建一个名为 `src` 的文件夹,并在其中创建一个名为 `main.js` 的文件。将以下代码添加到文件中: ```js import { createApp } from 'vue'; import App from './App.vue'; const app = createApp(App); app.mount('#app'); ``` 6. 在 `src` 文件夹中创建一个名为 `App.vue` 的文件,并将以下代码添加到文件中: ```html <template> <div> <h1>Hello, {{ name }}!</h1> <p>This is a Vue 3 Vite demo.</p> </div> </template> <script> export default { name: 'App', data() { return { name: 'World', }; }, }; </script> ``` 7. 在终端中使用以下命令启动 Vite: ``` npx vite ``` 8. 在浏览器中打开 http://localhost:3000,你应该能够看到一个显示 "Hello, World!" 的页面。 现在你的 Vue 3 Vite 开发环境已经准备好了!你可以在 `App.vue` 中添加更多的 Vue 3 代码,并在浏览器中实时查看结果。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值