搭建Vue;创建vue项目并在webstrom中运行;在webstrom中打开并运行vue项目。

一、Vue的安装需要两个支持分别为:nodejs、npm

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。

Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型,使其轻量又高效。

Node.js 的包管理器 npm,是全球最大的开源库生态系统。

npm全称为Node Package Manager,是一个基于Node.js的包管理器,也是整个Node.js社区最流行、支持的第三方模块最多的包管理器(类似于java中的Maven)。
  npm的初衷:JavaScript开发人员更容易分享和重用代码。
  npm的使用场景:
    允许用户获取第三方包并使用。
    允许用户将自己编写的包或命令行程序进行发布分享。

1.nodejs安装 https://nodejs.org/en/
   下载一直下一步就可。
   搭建Vue;创建vue项目并在webstrom中运行;在webstrom中打开并运行vue项目。_第1张图片
2.npm安装 这里安装阿里的 cnpm 中国节点快 但是时间都很长。

安装淘宝镜像(类似于阿里云的maven中央仓库镜像)

安装命令: npm install -g cnpm --registry=https://registry.npm.taobao.org

  验证命令:cnpm -v

3.安装webpack

利用npm安装webpack 命令行语句为cnpm install webpack -g 。

4.接下来就是全局安装vue-cli。

安装语句为:npm install --global vue-cli

验证命令:vue -V (V要大写)

5.执行cnpm install
 
二、WebStorm运行Vue项目
 1、打开WebStorm创建Vue项目如下图:
  File --》new–》 Project
搭建Vue;创建vue项目并在webstrom中运行;在webstrom中打开并运行vue项目。_第2张图片
红色为新建的顺序,黄色为文件的存放目录,蓝色为node.js地址(装好了会自动寻找),绿色为vue.js包的地址。 然后一路点击create
** 注 **
在这里创建vue需要先安装git Git安装教程
 2、选中package.json 右键选择 show npm scripts
 搭建Vue;创建vue项目并在webstrom中运行;在webstrom中打开并运行vue项目。_第3张图片
搭建Vue;创建vue项目并在webstrom中运行;在webstrom中打开并运行vue项目。_第4张图片
搭建Vue;创建vue项目并在webstrom中运行;在webstrom中打开并运行vue项目。_第5张图片

红色为本机地址,绿色为网络地址。

打开上述路径出现:
搭建Vue;创建vue项目并在webstrom中运行;在webstrom中打开并运行vue项目。_第6张图片

三、WebStorm打开并运行Vue项目
1.选取项目所在的目录
搭建Vue;创建vue项目并在webstrom中运行;在webstrom中打开并运行vue项目。_第7张图片
2.点击 Terminal 执行 npm install
搭建Vue;创建vue项目并在webstrom中运行;在webstrom中打开并运行vue项目。_第8张图片
3.选中package.json 右键选择 show npm scripts
搭建Vue;创建vue项目并在webstrom中运行;在webstrom中打开并运行vue项目。_第9张图片
搭建Vue;创建vue项目并在webstrom中运行;在webstrom中打开并运行vue项目。_第10张图片
搭建Vue;创建vue项目并在webstrom中运行;在webstrom中打开并运行vue项目。_第11张图片
红色为本机地址,绿色为网络地址。

4.打开上述路径出现:
搭建Vue;创建vue项目并在webstrom中运行;在webstrom中打开并运行vue项目。_第12张图片

注:
webstrom打开vue项目时。会出现 异常:关于node-gyp

1…安装gyp命令 npm install -g node-gyp (项目莫名的已有此插件,跳过);
2 出现 : gyp ERR! find Python 异常时
处理: 安装Python 2.7(v3.x.x不支持),安装后要配置环境变量。成功后执行npm config set python python2.7 安装教程
3 出现 : gyp ERR! find Vs 异常时
处理: 安装Visual C ++构建环境:Visual Studio构建工具安装教程 安装C++

上述步骤全部执行且成功后,项目恢复如初。

如出现 :
1.
搭建Vue;创建vue项目并在webstrom中运行;在webstrom中打开并运行vue项目。_第13张图片
这是导包的异常:

npm install --save nprogress
cnpm install --save vue-video-player
导入包 异常解除。
2.
搭建Vue;创建vue项目并在webstrom中运行;在webstrom中打开并运行vue项目。_第14张图片
原因是:因为你的node_modules有意外改动,导致依赖库不完整。
解决办法是 :删除项目下的node_modules,在你的项目目录下,重新执行npm install,这会重新生成node_modules,
《完》

你可能感兴趣的:(搭建Vue;创建vue项目并在webstrom中运行;在webstrom中打开并运行vue项目。)