windows下快速搭建vue开发环境,包含搭建截图和常见问题解决方法
最近项目中使用vue进行开发,下面把vue整个环境的搭建分享给大家,大致步骤如下:
1.下载并安装vue
2.Intellij IDEA中安装Vue插件
3.构建及运行vue项目
4.常见问题解决方法
具体操作如下:
一、下载并安装vue
vue下载地址https://nodejs.org/en/
下载后双击node-v12.13.0-x64.msi文件
二、Intellij IDEA中安装Vue插件
安装后重启Intellij IDEA
File Types: HTML 添加 *.vue类型
File -> Settings -> Editor -> File Types -> HTML
点Registered Patterns下的+,添加 *.vue
3)设置JS
File -> Settings -> Language & Frameworks -> JavaScript
选择 ECMAScript 6 和 Prefer Strict mode
三、构建及运行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' 不是内部或外部命令,也不是可运行的程序或批处理文件。
【解决方法】执行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