windows下快速搭建vue开发环境,包含搭建截图和常见问题解决方法

最近项目中使用vue进行开发,下面把vue整个环境的搭建分享给大家,大致步骤如下:

1.下载并安装vue

2.Intellij IDEA中安装Vue插件

3.构建及运行vue项目

4.常见问题解决方法

完整文档下载

具体操作如下:

一、下载并安装vue

vue下载地址https://nodejs.org/en/

windows下快速搭建vue开发环境,包含搭建截图和常见问题解决方法

下载后双击node-v12.13.0-x64.msi文件

windows下快速搭建vue开发环境,包含搭建截图和常见问题解决方法

windows下快速搭建vue开发环境,包含搭建截图和常见问题解决方法

windows下快速搭建vue开发环境,包含搭建截图和常见问题解决方法

windows下快速搭建vue开发环境,包含搭建截图和常见问题解决方法

windows下快速搭建vue开发环境,包含搭建截图和常见问题解决方法

windows下快速搭建vue开发环境,包含搭建截图和常见问题解决方法

windows下快速搭建vue开发环境,包含搭建截图和常见问题解决方法

windows下快速搭建vue开发环境,包含搭建截图和常见问题解决方法

 

windows下快速搭建vue开发环境,包含搭建截图和常见问题解决方法

 

二、Intellij IDEA中安装Vue插件

windows下快速搭建vue开发环境,包含搭建截图和常见问题解决方法

windows下快速搭建vue开发环境,包含搭建截图和常见问题解决方法

windows下快速搭建vue开发环境,包含搭建截图和常见问题解决方法

安装后重启Intellij IDEA

 

File Types: HTML 添加 *.vue类型

File -> Settings -> Editor -> File Types -> HTML

点Registered Patterns下的+,添加 *.vue

windows下快速搭建vue开发环境,包含搭建截图和常见问题解决方法

3)设置JS

File -> Settings -> Language & Frameworks -> JavaScript

选择 ECMAScript 6 和 Prefer Strict mode

windows下快速搭建vue开发环境,包含搭建截图和常见问题解决方法

三、构建及运行vue项目

在命令行工具cmd,或者Intellij IDEA的Terminal中进入想要构建项目的目录,输入vue init webpack project-name,回车

webpack默认版本为2.0,若要指定1.0,需在webpack后加上#1.0,即vue init webpack#1.0 project-name

接下来会出现几个提示,分别是输入项目名称、描述、作者等,按实际情况选择即可。

?Project name ---- 项目名称,init命令时也填了个project-name,如果无需更改,直接回车即可;

?Project description ---- 项目描述,按需填写。无需填写可以直接回车;

?Author ---- 作者

?Vue build ---- 构建模式,一般默认第一个;

?Install vue-router? ---- 是否安装vue-router。选Y。后边构建项目会用到。

?Use ESLint to lint yout code? ---- 格式校验,按需;

?Set up unit tests ---- 测试相关,按需;

?Setup e2e tests with Nightwatch? ---- 测试相关,按需;

四、常见问题解决方法

4.1 Intellij IDEA中'vue' 不是内部或外部命令,也不是可运行的程序或批处理文件。

windows下快速搭建vue开发环境,包含搭建截图和常见问题解决方法

【解决方法】执行npm install -g webpack后,重启Intellij IDEA

 

4.2 cmd中提示'vue' 不是内部或外部命令,也不是可运行的程序或批处理文件。

【解决方法】重启cmd后,执行npm install -g webpack后,再重启cmd。

 

4.3Intellij IDEA构建vue项目时,一直在下载,下载了一晚上还没构建好。

【解决方法】改为cmd构建。

 

4.4 npm install -g vue-cli-service报code E404错误。

【现象】

C:\work\front-ucenter>npm install -g vue-cli-service

npm ERR! code E404

npm ERR! 404 Not Found - GET https://registry.npmjs.org/vue-cli-service - Not found

npm ERR! 404

npm ERR! 404  '[email protected]' is not in the npm registry.

npm ERR! 404 You should bug the author to publish it (or use the name yourself!)

npm ERR! 404

npm ERR! 404 Note that you can also install from a

npm ERR! 404 tarball, folder, http url, or git url.

 

npm ERR! A complete log of this run can be found in:

npm ERR!     C:\Users\Administrator\AppData\Roaming\npm-cache\_logs\2019-11-06T02_43_28_257Z-debug.log

【解决方法】使用npm install进行安装。即:

C:\work\front-ucenter>npm install

 

下载详细文档