1.安装/升级节点环境

vue-cli对节点和npm的版本有要求。

您可以通过node -v (npm -v)查看当前版本，并通过where节点(npm)查看安装路径。

如果节点版本不符合vue-cli的要求，可以在节点官网下载安装稳定版。

安装过程相对简单。当我更新时，除了修改安装路径，其他的都是Next。

这里需要提到的是，在更新节点版本之后，你会发现npm版本也已经更新了。

D: 工作区MyProjectJan2018node -v npm -v

v8.9.4

5.6.0

2.安装vue-cli

全局安装vue-cli，并在命令行中执行npm install -g vue-cli

您可以在cmd中打开命令行工具，或者在Intellij IDEA的终端中执行它。

3.Intellij IDEA准备

如果你想在Intellij IDEA的终端中构建一个vue-cli项目，你需要做一些准备。如果使用cmd构建，请跳过此步骤。

1)安装vue.js

文件-设置-插件-浏览响应.

搜索vue.js，右侧提示安装(截图中已安装，未安装提示安装)。IDEA需要在成功安装后重新启动。

2)文件类型： HTML添加*。vue型

文件-设置-编辑器-文件类型- HTML

单击注册模式下的添加*。某视频剪辑软件

3)设置JS

文件-设置-语言框架-JavaScript

选择ECMAScript 6和首选严格模式

4.构建和运行vue-cli项目

在命令行工具cmd或Intellij IDEA的终端中输入要构建的项目的目录，输入vue init webpack项目名称，然后按Enter键

webpack的默认版本是2.0。要指定1.0，请在webpack之后添加#1.0，即vue init webpack#1.0项目名称

接下来会出现几个提示，即输入项目名称、描述、作者等。并根据实际情况进行选择。

？项目名称-项目的名称。init命令中还会填写项目名称。如果不需要更改，只需按回车键。

？项目描述-项目描述，根据需要填写。无需填写即可直接进入；

？作者-作者

？Vue build - build模式，默认一般是第一种；

？安装vue路由器？-是否安装了vue路由器？选择y。这将用于以后的建设项目。

？用ESLint下载你的代码？-按要求进行格式验证；

？根据需要建立单元测试-测试相关；

？用守夜人设置e2e测试？-与测试相关，按需；

？项目创建后，我们应该为您运行“npm安装”吗？-根据需要，这里我选择是，使用NPM。如果你选择“否”，继续你自己的目标

在目录下执行npm安装。

这样构建的项目可以直接运行。输入项目所在的目录，执行npm run dev，并在执行后看到以下提示：

您的应用程序正在此处运行。58860 . 88888888861

在浏览器中打开http://localhost:8080，看到这个页面，然后就可以开始开发了。

5.Intellij IDEA创建了一个新的。vue格式文件

发展的时候，我们会发现没有选择的余地。vue在创建新文件时会格式化文件，所以我们需要进行一些设置。

文件-设置-编辑器-文件和代码模板-

模板内容可以按需提供。你可以填也可以不填

template div { { msg } }/div/template style/style script export default { data(){ return { msg : ' vue template page ' } } }已设置/script，然后在中新建一个文件。可以创建vue格式。)

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。