vue开发环境搭建(win7)

2022-09-27 11:03:04 浏览数 (1)

大家好,又见面了,我是你们的朋友全栈君。

vue开发环境搭建-win7

    • 1. 安装node,js
    • 2. 设置node global(全局)和cache(缓存)路径
    • 3. 配置环境变量
    • 4. 基于 Node.js 安装cnpm(淘宝镜像)
    • 5. 安装vue
    • 6. 安装vue脚手架 vue-cli
    • 7. 项目创建
    • 8. 添加相关依赖
    • 9. 修改端口号
    • 10. 运行项目

1. 安装node,js

下载node.js安装包: node.js下载官网

在这里,我选择64位windows安装包(.msi) 然后,根据提示“下一步”,完成node.js的安装。 安装成功后,打开docs管理工具,输入“node -v”,查看node.js版本,若显示成功,则代表安装成功,如下图所示:

2. 设置node global(全局)和cache(缓存)路径

  • 设置缓存文件夹
代码语言:javascript复制
 npm config set cache "F:softwarenodejsnode_cache"
  • 设置全局模块存放路径
代码语言:javascript复制
 npm config set prefix "F:softwarenodejsnode_global"

3. 配置环境变量

  • 新增系统变量 NODE_PATH
代码语言:javascript复制
F:softwarenodejsnode_globalnode_modules
  • 修改用户变量 PATH
代码语言:javascript复制
F:softwarenodejsnode_global;

4. 基于 Node.js 安装cnpm(淘宝镜像)

代码语言:javascript复制
npm install -g cnpm --registry=https://registry.npm.taobao.org

注意:安装淘宝镜像如果报错 (npm ERR! request to https://registry.npmjs.org/express failed, reason: unable to verify the first certificate)

解决办法如下:

代码语言:javascript复制
npm config set strict-ssl false

5. 安装vue

代码语言:javascript复制
cnpm install vue -g

6. 安装vue脚手架 vue-cli

代码语言:javascript复制
cnpm install vue-cli -g

7. 项目创建

代码语言:javascript复制
vue init webpack vuespringboot

8. 添加相关依赖

代码语言:javascript复制
 cnpm install

9. 修改端口号

为了防止和后端端口8080冲突,将前端端口号修改为8090 修改 config目录下面的 index.js文件

10. 运行项目

发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/179199.html原文链接:https://javaforall.cn

0 人点赞