搭建Vue开发环境并运行

搭建Vue开发环境并运行

前端到js就没深入学习过,突然想要用Vue来部署一些小页面的时候,就记录一下部署Vue的环境以及运行。

配置node.js

Vue的运行环境

node.js的下载安装就不多描述了官方下载地址,下载后安装就可(自己注意node的安装路径)

找到node.js的安装路径

先找到node.js的安装路径新建node_cache 和 node_global两个文件(需要配置到环境变量中)

在这里插入图片描述

cache用来存放缓存,global用来全局存放以后npm命令下载的模块。(配置这俩目录便于后期管理)

配置node以及这俩目录的环境变量。系统:win11

​ 建议以下cmd都以管理员模式运行

  1. 右键此电脑选中属性 --> 找到高级系统设置 --> 选中环境变量 --> 新加NODE_HOME

在这里插入图片描述

2.找打Path 选择新建三个路径

​ %NODE_HOME% , %NODE_HOME%\node_cache , %NODE_HOME%\node_global

在这里插入图片描述

  1. 设置缓存以及模块安装路径(注意要以管理员模式运行CMD窗口)
    cnpm config set prefix "node_global地址"
    cnpm config set cache "node_cache地址"
    

在这里插入图片描述

下载cnpm并配置淘宝镜像

一般情况下直接npm下载模块国内会卡,所以会通过下载cnpm并配置淘宝镜像来加快下载速度(如果npm速度很快或者直接将npm的镜像换为淘宝可不下载cnpm).

在CMD窗口输入下列命令

# 安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
# 配置淘宝镜像
cnpm config set registry https://registry.npm.taobao.org
# 查看镜像地址
cnpm config get registry

还原官方镜像

cnpm config set registry https://registry.npmjs.org/

安装Vue

全局安装vue

cnpm install vue -g

在这里插入图片描述

安装vue命令行工具,即vue-cli 脚手架

cnpm install vue-cli -g -i

#带有VUE UI:Vue的可视化界面
cnpm install -g @vue/cli

在这里插入图片描述

安装cli-init用于快速创建Vue项目

cnpm install -g @vue/cli-init

在这里插入图片描述

测试 记得新开一个cmd窗口

vue -V

Vue项目

第一种:通过VUE UI在浏览器页面创建

按Win + R :输入vue ui

在CMD窗口: 输入vue ui

第二种: 手动创建

  1. 新建一个vue-demo文件夹

  2. 在Dos窗口中cd到该目录然后输入:

    vue init webpack vue-demo
    
  3. 创建完成之后输入

    cnpm install
    

在这里插入图片描述

  1. 最后在终端中输入 cnpm run dev 在浏览器访问http://localhost:8080/

期间遇到的错误

  1. 使用vue ui 需要在管理员模式下执行cnpm install -g @vue/cli

  2. vue init webpack vue-demo 出现错误

    在这里插入图片描述

    说明:

    • Vue build ==> 打包方式,可直接回车;
    • Install vue-router ==> 是否要安装 vue-router,项目中肯定要使用到 所以Y 回车;
    • Use ESLint to lint your code ==> 是否需要 js 语法检测 目前我们不需要 所以 n 回车;
    • Set up unit tests ==> 是否安装 单元测试工具 目前我们不需要 所以 n 回车;
    • Setup e2e tests with Nightwatch ==> 是否需要 端到端测试工具 目前我们不需要 所以 n 回车;
    • should wu run “npm install” 这是项目搭建之后自动运行npm i,如果是使用的cnpm这里会出错,选第三个选项
  3. 在项目中运行cnpm install 出错

    在这里插入图片描述

    • 这是因为windows禁止在命令行运行脚本

      解决

  • 0
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值