最近在做产品经理这个岗位的时候，总是有这样的想法，如果你不是自己会或者理解代码的逻辑，你很难真正了解你设计的产品。所以在闲暇之余，我希望自己能够敲一点代码，哪怕是纯属自娱也好，这并不是一种强制性的要求，而是我感受到自己内心想要去做那么一件事情。
废话不多说，在我经过粗略的考虑之后，我决定先从前端的一个框架开始了解起，在我和两个比较好的朋友聊过之后，我选择了Vue 3 这个框架开始来切入。一来Vue 3 是目前使用的主流前端框架，二来这个框架有其优秀之处，虽然我还不是很理解那些优秀的点，但是先干起来吧，只有学习实践到一定程度了，才能有更加深刻的理解，所以一开始----不纠结。
这是我查询了很多文章还有自己装了一遍环境（实际上两台电脑装了两遍，第二次装过程更长……）之后的总结，我是直接装的Vue 3，如果你电脑从来没有装过任何开发环境的，那么首先你要搭建环境，如果你电脑没有任何编码工具，建议可以先下载vscode，下载链接https://code.visualstudio.com/，以下是准备工作（搭建环境）的步骤：
一、安装node
访问node.js官网：https://nodejs.org/en/下载对应安装包。之后点击安装包进行安装。
之后在Mac终端输入：
node -V
回车如果结果是版本号，则表示安装成功。我这边的结果展示如下：
XXXXdeMacBook-Pro :~ user$ node -v
v16.18.1
二、安装npm，用安装淘宝镜像的方法
在终端输入：
npm install -g cnpm --registry=https://registry.npm.taobao.org
其实在安装完node之后，直接终端输入：npm -V，就会显示对应的版本了，npm是node的包管理工具，默认安装完node之后，npm会自动安装上的。但是不安装镜像的话，可能有帐幕阻挡我们访问npm 的境外网站（网上的说法），所以要安装这个镜像，不然后面下载Vue的脚手架会报error错误，所以第二步先安装镜像。
安装完之后，终端输入：
npm -V
回车如果结果是版本号，则表示安装成功。我这边的结果展示如下：
XXXXdeMacBook-Pro:~ user$ npm -v
8.19.2
注：之前因为我没有安装镜像，安装完node之后查询node和npm的版本都有显示版本号，然后就直接用第四步安装Vue脚手架，所以安装后查询Vue版本号一直显示[Vue] zsh: command not found: vue，所以如果出现这种情况，可以参考下第二步操作。
三、安装webpack
在终端输入：
sudo npm install webpack -g
我的理解这是一个打包器，安装之后再安装Vue脚手架会比较顺利，不然后面出错，你要回来看看是不是这个环节的问题。
注：之前在第二步搞了很久，后来用镜像终于解决，然后就直接用第四步安装Vue脚手架，所以安装后查询Vue版本号一直显示[Vue] zsh: command not found: vue，所以如果出现这种情况，而你又已经做了第二步，可以参考下第三步操作。
四、安装Vue脚手架
在终端输入：
sudo npm install -g @vue/cli
安装最新的脚手架（如果需要安装旧版的脚手架，命令为npm install vue-cli -g），安装过程中可能出现一些警告，可以直接忽略，或者终端输入npm cache clean --force清除缓存。顺便提示一下，卸载Vue的命令是（如果要卸载旧版则为sudo npm uninstall vue-cli -g）：
sudo npm uninstall -g @vue/cli
在终端输入：
vue -V
回车如果结果是版本号，则表示安装成功。我这边的结果展示如下：
XXXXdeMacBook-Pro:~ user$ vue -V
@vue/cli 5.0.8
五、创建项目文件夹
你可以直接在终端创建文件夹，也可以自己找到对应的位置进行创建，我选择是后者，因为本身对终端指令我也不是很熟悉。这个文件夹是你的Vue项目存储的位置。
创建完文件夹之后，在终端输入：
cd
空格后将文件夹拉入终端，就会生成文件夹的路径。
六、项目文件夹中创建项目
在终端输入：
sudo vue create test-demo
test-demo是项目的名称，你可以用其他的，这里只是做个举例，但是项目名称不能有大写字母和汉字。
七、启动项目
在终端输入：sudo npm run serve
用以上命令，启动后，会给你一个本地url地址，和一个网络地址，打开 http://localhost:8080/即可见到效果
注：涉及的终端命令最好都加上sudo，不然可能因为权限问题报错
八、使用vscode打开项目
打开vscode，选择打开你的项目文件夹，开始下一站吧！
