前端学习（一）搭建vue框架

最新推荐文章于 2025-10-03 15:20:57 发布

原创最新推荐文章于 2025-10-03 15:20:57 发布 · 1.3k 阅读

20 ·

CC 4.0 BY-SA版权

文章标签：

#vue #node.js

前端专栏收录该内容

46 篇文章

订阅专栏

本文介绍了如何从零开始搭建Vue.js开发环境，包括安装Node.js、配置npm源、安装Vue CLI以及创建和运行Vue项目。重点强调了使用Git、以管理员权限运行CMD、配置腾讯npm源和安装相关依赖的过程。

PS：本来在这篇之前还写一片webstorm激活的文章，但是不给发，那就没办法了。需要激活的可以评论或者私聊吧。
正文：
我学习前端选择用vue框架，这个选别的也行。我之前在公司有写过一点前端代码，但是都没自己搭建过框架，都是用之前同事搭建好的，那时用的是angularJS。现在隔了几年感觉前端还是得自己学学，就从头学一遍吧。当然不是一步一步学习基础，而是直接上手写网页了。

我搭建环境主要参考：https://blog.youkuaiyun.com/weixin_40760196/article/details/79952652，但是由于年代久远，有些步骤得更新了，就自己记录一遍。

PS：搭建vue框架必须安装git

CMD要用管理员身份运行！！！

安装node.js

去官网下载：https://nodejs.org/zh-cn/，选择稳定版本吧，这个都可以，看自己喜欢。
下载完安装就是了，只是安装完之后他会弹出几个窗口，提示在安装一些必要的插件，按提示随便点点，然后等一段时间（可能需要半个小时），让他自己安装完（也许不安装完也没事，我就直接把他关掉了）
在cmd验证一下：
```
node -v
npm -v
```

PS：新版的node（win10）可能还需要添加环境变量：
先查看全局安装的目录是哪里：

npm prefix -g

然后再把该路径添加到环境变量：
在这里插入图片描述

配置腾讯源：

npm config set registry http://mirrors.cloud.tencent.com/npm/

安装webpack

npm install webpack -g
安装完验证：
webpack -v
此时他可能会提示要安装webpack-cli，那就执行下面命令：
npm install webpack-cli -g
然后再验证一遍，可以看到两个都安装好了

在这里插入图片描述

安装 vue

npm install -g @vue/cli
验证：
vue -V （V大写）

在这里插入图片描述
这里记住默认安装路径：C:\Users\Administrator\AppData\Roaming\npm\node_modules@vue\cli

创建项目

打开webstorm，新建项目

第一次创建项目他会需要下载一些依赖，控制台可能会提示你是否切换成淘宝的下载源，选择是就好了。
PS：看到有一篇文章说location要与node.js放置在同一个磁盘下，比如node.js安装在D盘某个目录下，那么location也要选择D盘的，不知道是不是真的要这样，我没尝试，反正是放在同一个磁盘下了。
等项目加载完，可以看到项目下创建了一个package.json，右键它，选择：“show npm Scripts”

然后选择serve就运行程序了。

然后就在浏览器输入：http://localhost:8080，就可以看到网页运行起来了。

PS：下次运行就直接直接点运行就行了，不用选择右键啥的了。