vue使用环境安装步骤

vue环境安装搭建以及问题记录

  1. vue运行环境依赖node,所以首先安装node环境,可从官网下载安装,这个网上教程也特别多,安装一直下一步最后选择安装目录即可。
    下载环境:
nodejs的下载路径:https://nodejs.org/en/download/
  1. 安装完成查看node安装是否正常,win+r输入cmd运行:node -v 和npm -v;我这里node是12.13.1 npm是6.12.1
    检测环境命令:
node -v
npm -v

安装正常输入命令结果如下:
在这里插入图片描述
3. 上述步骤完成后安装vue,在cmd中直接使用npm命令来安装的一些工具的话会比较慢,所以我们使用淘宝的npm镜像:

npm i -g cnpm --registry=https://registry.npm.taobao.org

输入命令结果如下即安装正常,以后再用到npm的地方直接用cnpm来代替就好了,如果权限不够,请使用管理员运行命令提示符。
在这里插入图片描述

  • npm安装
npm install vue

在这里插入图片描述

  • 输入cnpm -v 查看版本号
    在这里插入图片描述
    注:若报cnpm不是内部命令或外部命令…依照下一步解决
    在这里插入图片描述
  • 找到本机npm目录,如我的在D:\tools\node\node_modules目录下面,再搜索cnpm目录,把cnpm和npm放在同一个目录下面即可,最终文件存放位置类似如下:
    在这里插入图片描述
  • 完成之后再查询版本号即正常
  • 安装vue
cnpm install vue

在这里插入图片描述
4. 安装vue-cli, vue脚手架

  • 使用如下命令:
cnpm i -g vue -cli

在这里插入图片描述

  • 测试是否安装成功(注:这里的查看V是大写哦,常见的很多地方用到的都是小写)
vue -V

在这里插入图片描述
5. 项目安装和创建

  • 进入要创建工作空间的目录,进行创建
C:\Users\Administrator>cd F:
F:\
C:\Users\Administrator>F:
F:\>cd privateWorkSpace/vue
F:\privateWorkSpace\vue>vue init webpack vue

在这里插入图片描述
控制台显示:

提示目录已存在,是否继续:Y
Project name(工程名):回车
Project description(工程介绍):回车
Author:作者名
Vue build(是否安装编译器):回车
Install vue-router(是否安装Vue路由):回车
Use ESLint to lint your code(是否使用ESLint检查代码,我们使用idea即可):n
Set up unit tests(安装测试工具):n
Setup e2e tests with Nightwatch(测试相关):n
Should we run `npm install` for you after the project has been created? (recommended):选择:No, I will handle that myself
  • 初始化项目,进入项目所在目录运行项目
cd vue
npm run dev

在这里插入图片描述

  • 打开浏览器访问:localhost:8080就可以打开vue项目,Ctrl+C是退出运行
    在这里插入图片描述
    这样我们的第一个vue就搭建成功啦。
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客
应支付0元
点击重新获取
扫码支付

支付成功即可阅读