MacBook 搭建 VUE3 开发环境

发布时间 2023-09-06 16:04:09作者: 刘应杰

MacBook 搭建 VUE3 开发环境

  • 2021-11-06
  • 本文字数:552 字

    阅读完需:约 2 分钟

最近在看“大圣”老师的《玩转 Vue 3 全家桶》专栏。目前(2021.11.6)还在连载中,今天就一起在 Mac 上搭建一下开发环境。

 

1. 安装 Node.js

我采用的手 brew 的方式进行安装,你也可以从官网https://nodejs.org/zh-cn/下载安装包直接进行安装。

上图是我的环境。

输入一下命令进行安装

 
brew install node
 
 
 
复制代码
 

 

执行如下命令检查是否安装完成。

 
node -v
 
 
 
复制代码
 

 

至此,Node 完成安装。

2. 在 VSCode 中安装 Volar 插件

这个安装就很简单了,直接在插件商店中搜索 Volar 进行安装即可。

3. 创建初始项目

在 VSCode 中选择我们保存 Vue 项目的文件夹。

我选择的是 Demo1 这个文件夹,来保存我们的初始项目。

在 VSCode 中打开终端

然后,执行如下命令:

 
npm init @vitejs/app
 
 
 
复制代码
 

如果你和我一样看到的是如下内容

那么表示你已经完成一半了,剩下的就是根据自己的项目需求进行设置即可

上图是我的设置,完成后在 VSCode 的左侧能看到如下目录结构

至此,初始项目也完成了搭建。

4. 运行起来看看

在我们的项目文件下执行

 
npm install
 
 
 
复制代码
 

安装一些依赖文件

注意我是先进入我的项目目录后执行的上面的安装命令。

 

接下来执行如下命令来启动项目

 
npm run dev
 
 
 
复制代码
 

 

在浏览器中输入上面的地址:http://locakhost:3000

看到如上内容表示初始项目启动成功。

 

如果这篇文章对你有用,欢迎转发给你的朋友,我们一起来学习。

好了,我是 Tango,一个热爱分享技术的无名程序猿,我们下期见。

 

发布于: 2021-11-06阅读数: 2423