vue-cli(快速构建一个vue应用的单页面)

一、Node和Npm

  1. Node.js
  • 下载地址:http://nodejs.org/en/ (推荐下载LTS版本)
  • 安装后:在命令行输入node -v 即可查看版本信息
  1. NPM
  • 介绍:是Node提供的模块管理工具,可以方便的下载很多前端的框架,Node自带NPM。

  • 查看版本信息:npm -v

  • 切换成淘宝镜像:npm config set registry https://registry.npm.taobao.org
    (也可使用:

    • 切换镜像工具安装:npm install nrm -g
    • 查看npm的镜像仓库列表:nrm ls
    • 切换要使用的镜像源:nrm use taobao
    • 测试速度:nrm test npm
      )
  • 测试是否切换成功:npm config get registry
    在这里插入图片描述

二、vue-cli2

  1. 安装好nodejs之后,安装vue-cli2(仅需要装一次即可)
  • 命令:npm install -g vue-cli
    在这里插入图片描述
  1. 在需要装项目的文件夹:按shift+鼠标右键
    在这里插入图片描述
  2. 创建项目
  • 命令:vue init webpack 项目名
    在这里插入图片描述
  • 创建项目后的目录
    在这里插入图片描述
  1. 下载依赖:npm install
    在这里插入图片描述
    在这里插入图片描述
  2. 运行vue项目:npm run dev
  • 在webStorm中配置运行
    在这里插入图片描述

三、vue-cli版本

  1. 命令行(win+R->cmd)安装vue-cli最新版本
  • 命令:npm install -g @vue/cli
    在这里插入图片描述
  1. 创建项目
  • 命令:vue create 项目名
    在这里插入图片描述在这里插入图片描述
  • 创建项目生成的目录
    在这里插入图片描述
  1. 运行
  • 命令:npm run serve
    在这里插入图片描述

四、在WebStorm中运行出现的问题

  1. 出现eslint:please specify node.js interpreter correctly

在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值