Macbook 苹果电脑 安装搭建Vue脚手架教程m1芯片Vue脚手架初学

Posted 2023-04-06 noahsark747

Macbook 苹果电脑 安装Vue脚手架教程

1.首先我们进入Node.js的官网，下载安装Node.js 如果你已经安装过可以忽略

网址http://nodejs.cn/

2.直接点击下载，这里我下载的是18版本最新版的。

3.选择macOS版本后会直接下载

4.下载完成后直接点击安装即可

5.Node.js安装完成后接下来我们打开电脑的终端

6. 然后我们进入Vue的官网

https://cn.vuejs.org/

7. 在*生态系统*处找到*Vue CLI*选项点击进入

8.点击‘起步’按钮

这里我们就打开的Vue CLI(脚手架的说明文档了)，在此页面下拉在右下角找到安装按钮
我们可以看到这样的界面,这里面会简要说明Vue脚手架的安装和卸载方法。

9.此时我们复制安装命令到macOS的终端中

这里我使用的命令是npm install -g @vue/cli
注意： 在macOS的终端中安装时需要在安装命令前面输入sudo

如图所示：

10.输入密码开始安装：此处输入密码并不会有提示，输入后直接回车即可

开始安装，此时安装可能需要一些时间，建议挂上🪜梯子

此外安装过程中会出现类似的警告，不用理会，这是正常情况。

脚手架安装完成

此时我们把终端关闭，然后重新打开终端 ，输入
vue --version 查看当前脚手架的版本号

能够执行这一步出现图片中的效果即安装完成了
此处我的版本号为5.0.4

1.脚手架安装完成后我们创建自己的项目

首先我们使用终端命令切换到我们要创建项目的指定位置，此处我以桌面为例。

使用ls命令查看当前文件夹，然后使用 cd Desktop/切换到桌面回车

2.创建第一个脚手架项目

输入 vue create test 回车即可开始创建项目，这里的test是项目的名称，根据自己的需求命名即可。

此时会出现提示，输入Y回车后会看见这个界面：

我们使用键盘上的上下按键控制即可，这里我的项目是Vue2开发的 所以脚手架创建这里我也选择第二个 ，然后回车开始创建：

3.脚手架搭建完成，此时我们在桌面上已经看到该test文件夹

回到终端 我们根据提示分别输入这两行命令
$ cd test
$ npm run serve

此时脚手架已经搭建完成了，我们将Local中的地址输入到浏览器中可以访问到脚手架中测试项目:

4.看完点个赞吧！

使用vuecli脚手架搭建第一个vue程序

VUE CLI是VUE官方发布的一个快速搭建VUE工程的工具。所以在我们搭建第一个VUE项目之前，需要先来安装VUE CLI脚手架。

 

安装VUE CLI脚手架

VUE CLI脚手架目前已经发布到了4.2的版本了，可以通过cmd或者vscode的终端来查看电脑上已经安装的VUE CLI版本。

命令是 vue -V，如图：

 

 

 可以看到现在笔者电脑中已经安装了4.2.2的vue/cli。

新版本的Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g进行卸载。

Node 版本要求

Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。

 

创建第一个基于webpack模板的新项目：

vue create vue-demo

然后默认回车继续直到安装完成,搭建成功之后会出现下面提示：

 

 接下来我们需要根据提示，进入vue-demo目录，输入npm run serve运行刚才搭建的项目。

 

 出现这个界面，标明我们的项目已经成功运行起来了，可以通过上边的http://localhost:8080进去查看效果，如图：

 

 当前我们使用的是8080端口，有时候我们需要把8080端口留给后端，前端用80端口或者其他端口，怎么办呢？

虽然vuecli4的目录和2x版本不一样，没有config文件夹，使得更改端口不那么直观，但是我们还是有方法改变vue项目的默认端口号。

百度了一圈，内容很多，简单来说就下面的方法：

 

 

 

在node_modules>@vue>cli-service>options.js 里边有devServer中的代码段被注释了，看到没有？里边默认的port为8080。所以我们把这段注释取消，然后更改port为80端口，重新编译程序。

 

 

 

 编译成功，我们地址中的端口已经变成80端口了，再用浏览器访问查看：

 

 

OK，成功！

后来通过查看vuecli手册，发现修改默认端口还有一个方法：

https://cli.vuejs.org/zh/config/#%E5%85%A8%E5%B1%80-cli-%E9%85%8D%E7%BD%AE

 

在项目根目录建立vue.config.js文件，该文件会在项目启动时自动加载。

 

 

 

 重新编译代码

 

 修改成功！