WebStromVue安装及出现的问题

WebStrom vue

参考：https://blog.csdn.net/thumbs_up_sign_ygj/article/details/104979272 此博客(为主)

1、创建 Vue

1.1 一般在 安装国内淘宝源的时 先使用验证一下

• 使用淘宝镜像
  • npm config set registry https://registry.npm.taobao.org
• 验证一下是否成功
  • npm config get registry
• 然后在安装

1.1.1 异常

• 如果报：Error: Can not install ‘ij-rpc-client’: npm ERR! Unexpected end of JSON input…
• 解决
  1. 更换npm源为国内淘宝的源：npm config set registry http://registry.npm.taobao.org/
  2. cmd下安装 ij-rpc-client包： npm install ij-rpc-client -g
  3. 重新启动 webstrorm
  4. 安装 Git，配置git
     1. 从setting中找到Version Control下的Git
     2. 把git.exe的路径加入 Path to Git executable中
  5. 重启电脑
  6. 新建后如果在创建vue时，出现：
     1. New project Vue CLI error
     2. 并却在最下面也有Eooro的提示
  7. 出现6的原因： 没有配置git环境变量
  8. 解决：在环境变量上加入，和添加node时差不多
  9. 执行下面三个命令来检查环境：
     • node -v(小写v) ；如果没有显示node版本，先去官网下载安装node
     • vue -V(大写V) ；如果没有显示vue版本，npm i vue-cli -g安装
     • webpack -v(小写v)； 如果需要重新安装，就用 npm install webpack -g

1.2 网络

在下载的时候一定要确定自己网络很好，否则会因为网络造成缓存等很多问题，导致下载配置等都成功，但是仅仅创建vue时失败

1.3 cmd

在运行cmd时，最好使用cmd的管理员模式

1.4 目录

在安装 node.js 时，目标路径等不要有任何中文和空格最好连大写英文都不要有

1.5 创建时

在创建vue时，要勾选好：Use the default project setup (babel,eslint)

否则就会提示找不到.josn文件

1.6 编辑系统变量时

最好在是 原局文件下在再创建一个文件，存储

例如：

• 变量名：NODE_HOMR
• 变量值：F:\node\nodejs\node_global\node_modules

1.7 其余问题

查询百度，如果解决不了，则卸载干净，一定要干净一点缓存也不能有，然后再重新安装

2、环境搭建

1.1 准备:

• 下载nodejs：
  • 在官网下载最新的版本:https://nodejs.org/zh-cn/download/current
• 下载Git：
  • 官网地址：https://git-scm.com/download/win

1.2 安装：

2.1 安装 node.js

• 傻瓜式安装，一直按Next，一直到安装完毕
• 检查node.js安装完成，达成cmd，输入
  • node -v
  • npm -v
• 在安装node.js的安装目录下新键 两个空目录
  • node_cache
  • node_glabal
• 打开cmd，运行
  • npm config set prefix “F:\node\nodejs\node_global”
  • npm config set cache “F:\node\nodejs\node_cache”
• 设置环境变量
• 安装国内源
• 安装webpack
• 安装vue
• 安装vue-cli脚手架
• 在检测安装是否成功

2.2 安装git

2.3 创建vue项目

• 打开WebStream直接创建vue即可

或者

• 1、在存放webstrom项目的目录下，右击运行 Git Bash Here
• 2、执行 vue init webpack [你项目的名称]
• 3、填写信息
  • 注意两处
    • ? Install vue-router? (Y/n)//询问你是否安装vue的路由 选择Y，我们需要
    • ? Use ESLint to lint your code? (Y/n) 选择 n，不使用eslint编码规范