此教程摘选自我的笔记:黑马JavaWeb开发笔记08——(保姆级Vue项目全部安装配置步骤)Vue-cli脚手架安装、NodeJS环境搭建、Vue项目的创建、运行、端口修改、Vue开发流程,感兴趣的朋友可以移步此篇笔记。
1. Vue-cli脚手架安装
-
在nodejs官网里面下载nodejs安装到本地
双击.msi文件安装,选择好安装路径,安装路径不能有中文和空格,剩下的一直点击next就可以,他会自动配置
-
验证nodejs环境变量
NodeJS 安装完毕后,会自动配置好环境变量,我们验证一下是否安装成功:命令行输入指令node -v
这里弹出版本号,就说明安装成功了 -
配置npm的全局安装路径
使用管理员身份运行命令行(我下载了一个PowerShell,没有的话直接主菜单点击终端管理员就行)
或者:
在命令行中,执行如下指令:npm config set prefix "你自己的nodejs安装路径"
比如我安装在E盘的node.js文件夹中,那么我就应该输入如下命令:
可以用npm config get prefix
指令查看是否成功,成功会出现本机nodejs安装路径 -
切换npm的淘宝镜像
以管理员身份在命令行中执行指令:npm config set registry 最新淘宝镜像地址
最新地址获取方式:直接在CSDN搜索栏搜索淘宝镜像最新地址,复制粘贴到指令即可。
我这里执行指令:npm config set registry https://registry.npmmirror.com/
-
安装Vue-cli
使用管理员身份运行命令行,在命令行中,执行如下指令:npm install -g @vue/cli
这个过程中,会联网下载,可能会耗时几分钟,耐心等待。
安装完成后可以执行指令vue --version
来测试是否成功
出现版本号就是成功了
至此,环境已经搭建完。
2. Vue项目创建(使用图形化界面创建步骤)
Vue-cli提供了如下2种方式创建vue项目:
-
命令行:直接通过命令行方式创建vue项目
vue create vue-project01
-
图形化界面:通过命令先进入到图形化界面,然后再进行vue工程的创建
vue ui
(这里演示用图形化界面的方式来创建)
-
新建文件夹vue(取什么名字放在哪儿都可以,接下来创建的vue项目是要放在这里面的),打开文件夹,复制该目录地址
-
以管理员身份打开终端,进入该目录下的命令行:
cd 复制的地址
,执行指令vue ui
,然后会自动转跳到浏览器创建界面
(这里一定一定要用管理员身份打开,不然会报错!!!)
-
执行指令后,自动打开Vue项目管理器,直接创建新项目
预设我们这里选择手动
功能这里我们在默认的配置下只需要再把Router打开就可以,其他的不用修改
配置中Vue版本选择2.x,语法检测规范选择第一个即可
然后直接点击创建(再提醒一次,一定要用管理员身份打开命令行,然后转跳ui界面,不然这里会创建失败!!) -
创建成功
此时我们最开始创建的文件夹vue里面已经有vue项目文件了:
-
创建成功后这个ui界面可以直接关闭了,然后我们在vscode里面打开这个vue项目文件夹
vscode打开文件方式:(要选择我们自己建立的那个文件夹vue)
打开之后vscode是这个样子:
至此,创建完成
3. Vue项目-运行
- 第一种方式:命令行方式
直接基于cmd命令窗口,在vue目录下,执行输入命令 npm run serve 即可,如下图所示:
- 第二种方式:通过VS Code提供的图形化界面,如下图所示:
(注意:NPM脚本窗口默认不显示,可这里放一个我自己亲自试验有效的方法)
- 通过设置->用户设置->扩展->MPM更改NPM默认配置
勾选Enable Run From Folder
- 然后重启VS Code,右击我们的项目名称,勾选npm脚本选项
- 运行vue项目:
在终端界面中,我们发现项目是运行在本地服务的8080端口,直接通过浏览器打开地址:
出现此页面表示成功运行
4. Vue项目-配置端口
-
对于8080端口,经常被占用,所以需要修改默认的8080端口。
-
修改vue.config.js文件的内容,添加如下代码:
-
如下图所示,然后我们关闭服务器,并且重新启动,端口更改成功,可以通过浏览器访问7000端口来访问我们之前的项目
-
更改成功:
至此,教程结束。
此教程摘选自我的笔记:黑马JavaWeb开发笔记08——(保姆级Vue项目全部安装配置步骤)Vue-cli脚手架安装、NodeJS环境搭建、Vue项目的创建、运行、端口修改、Vue开发流程,感兴趣的朋友可以移步此篇笔记。