Vue3.0 vue ui创建vue项目，从安装到创建全套整理，以及npm ERR code EPERM报错，vue项目创建界面一直加载问题的解决

1 安装node.js

• 下载Node.js安装包

官网下载地址：http://nodejs.cn/download/，根据自己电脑选择32位还是64位，点我去下载

• 安装程序

• win+R 打开运行窗口，在此窗口输入cmd命令 

 进入命令提示符窗口，分别输入以下命令，显示版本号，则安装成功

node -v：显示安装的nodejs版本

npm -v：显示安装的npm版本

•  修改全局模块路径和缓存路径（可选，大家自行选择是否修改）

在你的nodejs安装目录下创建创建两个文件夹，名称分别为：node_global和node_cache，在node_global文件夹下再建一个node_modules文件夹，配置环境变量用

第一种方法：win+R打开运行窗口，输入cmd，再输入以下两条指令

npm config set prefix "创建的node_global文件夹所在路径"
npm config set cache "创建的node_cache文件夹所在路径"

如：
npm config set prefix "E:\develop\nodejs\node_global"
npm config set cache "E:\develop\nodejs\node_cache"

• 修改完毕后，再配置环境变量

右键此电脑——>高级系统设置——>环境变量
在系统变量中，新建，变量名：NODE_PATH 变量值：node_global文件夹下的node_modules文件夹。如：E:\develop\nodejs\node_global\node_modules
修改用户变量中的Path变量，将默认的npm路径修改为新建的node_global路径

2 安装vue

2.1 安装vue.js

• npm install vue -g或者cnpm install vue -g
• 查看安装的vue版本npm list vue

2.2 安装webpack模板

• 在命令行中运行命令 npm install webpack -g ，等待安装完成，然后运行npm install --global webpack-cli
• 安装成功后可使用webpack -v查看版本号。

2.3 安装脚手架vue-cli 3.x（3以上才可以使用vue ui）

• 卸载旧版本

  卸载2.x版本 npm uninstall vue-cli -g
  卸载3.x版本 npm uninstall @vue/cli -g

• 安装新版本

  npm install @vue/cli –g

3 采用vue ui创建项目：命令行输入vue ui跳转

下一步，预设选择手动

Router：Vue中的路由
Linter/Formatter：可以让你的代码写的更严谨一些，通常是用来做报错提醒的
使用配置文件：将插件的配置保存在各自的配置文件中
点击下一步
会进入到配置面板，直接下一步，此处选择创建项目，不保存预设

 

 完成创建

4 vue ui注意事项

4.1 vue ui创建项目一直加载

解决：不用管理员方式打开cmd

4.2 报错 npm ERR code EPERM

npm ERR! code EPERM
npm ERR! syscall open
npm ERR! path D:\NodeJS\node_cache\_cacache\tmp\7bbab18e
npm ERR! errno EPERM
npm ERR! FetchError: Invalid response body while trying to fetch https://registry.npmjs.org/webpack: EPERM: operation not permitted, open 'D:\NodeJS\node_cache\_cacache\tmp\7bbab18e'
npm ERR!     at D:\NodeJS\node_modules\npm\node_modules\minipass-fetch\lib\body.js:162:15
npm ERR!     at async Arborist.[nodeFromEdge] (D:\NodeJS\node_modules\npm\node_modules\@npmcli\arborist\lib\arborist\build-ideal-tree.js:1061:19)
npm ERR!     at async Arborist.[buildDepStep] (D:\NodeJS\node_modules\npm\node_modules\@npmcli\arborist\lib\arborist\build-ideal-tree.js:930:11)
npm ERR!     at async Arborist.buildIdealTree (D:\NodeJS\node_modules\npm\node_modules\@npmcli\arborist\lib\arborist\build-ideal-tree.js:216:7)
npm ERR!     at async Promise.all (index 1)
npm ERR!     at async Arborist.reify (D:\NodeJS\node_modules\npm\node_modules\@npmcli\arborist\lib\arborist\reify.js:149:5)
npm ERR!     at async Install.install (D:\NodeJS\node_modules\npm\lib\install.js:170:5)
npm ERR!  FetchError: Invalid response body while trying to fetch https://registry.npmjs.org/webpack: EPERM: operation not permitted, open 'D:\NodeJS\node_cache\_cacache\tmp\7bbab18e'
npm ERR!     at D:\NodeJS\node_modules\npm\node_modules\minipass-fetch\lib\body.js:162:15
npm ERR!     at async Arborist.[nodeFromEdge] (D:\NodeJS\node_modules\npm\node_modules\@npmcli\arborist\lib\arborist\build-ideal-tree.js:1061:19)
npm ERR!     at async Arborist.[buildDepStep] (D:\NodeJS\node_modules\npm\node_modules\@npmcli\arborist\lib\arborist\build-ideal-tree.js:930:11)
npm ERR!     at async Arborist.buildIdealTree (D:\NodeJS\node_modules\npm\node_modules\@npmcli\arborist\lib\arborist\build-ideal-tree.js:216:7)
npm ERR!     at async Promise.all (index 1)
npm ERR!     at async Arborist.reify (D:\NodeJS\node_modules\npm\node_modules\@npmcli\arborist\lib\arborist\reify.js:149:5)
npm ERR!     at async Install.install (D:\NodeJS\node_modules\npm\lib\install.js:170:5) {
npm ERR!   code: 'EPERM',
npm ERR!   syscall: 'open',
npm ERR!   path: 'D:\\NodeJS\\node_cache\\_cacache\\tmp\\7bbab18e',
npm ERR!   type: 'system',
npm ERR!   requiredBy: '.'
npm ERR! }
npm ERR!
npm ERR! The operation was rejected by your operating system.
npm ERR! It's possible that the file was already in use (by a text editor or antivirus),
npm ERR! or that you lack permissions to access it.
npm ERR!
npm ERR! If you believe this might be a permissions issue, please double-check the
npm ERR! permissions of the file and its containing directories, or try running
npm ERR! the command again as root/Administrator.
(base) PS F:\tutorial-frontend\webpack\code> npm i webpack webpack-cli --save-dev
npm ERR! code EPERM
npm ERR! syscall open
npm ERR! path D:\NodeJS\node_cache\_cacache\tmp\671f2a33
npm ERR! errno EPERM
npm ERR! FetchError: Invalid response body while trying to fetch https://registry.npmjs.org/webpack: EPERM: operation not permitted, open 'D:\NodeJS\node_cache\_cacache\tmp\671f2a33'
npm ERR!     at D:\NodeJS\node_modules\npm\node_modules\minipass-fetch\lib\body.js:162:15
npm ERR!     at async Arborist.[nodeFromEdge] (D:\NodeJS\node_modules\npm\node_modules\@npmcli\arborist\lib\arborist\build-ideal-tree.js:1061:19)
npm ERR!     at async Arborist.[buildDepStep] (D:\NodeJS\node_modules\npm\node_modules\@npmcli\arborist\lib\arborist\build-ideal-tree.js:930:11)
npm ERR!     at async Arborist.buildIdealTree (D:\NodeJS\node_modules\npm\node_modules\@npmcli\arborist\lib\arborist\build-ideal-tree.js:216:7)
npm ERR!     at async Promise.all (index 1)
npm ERR!     at async Arborist.reify (D:\NodeJS\node_modules\npm\node_modules\@npmcli\arborist\lib\arborist\reify.js:149:5)
npm ERR!     at async Install.install (D:\NodeJS\node_modules\npm\lib\install.js:170:5)
npm ERR!  FetchError: Invalid response body while trying to fetch https://registry.npmjs.org/webpack: EPERM: operation not permitted, open 'D:\NodeJS\node_cache\_cacache\tmp\671f2a33'
npm ERR!     at D:\NodeJS\node_modules\npm\node_modules\minipass-fetch\lib\body.js:162:15
npm ERR!     at async Arborist.[nodeFromEdge] (D:\NodeJS\node_modules\npm\node_modules\@npmcli\arborist\lib\arborist\build-ideal-tree.js:1061:19)
npm ERR!     at async Arborist.[buildDepStep] (D:\NodeJS\node_modules\npm\node_modules\@npmcli\arborist\lib\arborist\build-ideal-tree.js:930:11)
npm ERR!     at async Arborist.buildIdealTree (D:\NodeJS\node_modules\npm\node_modules\@npmcli\arborist\lib\arborist\build-ideal-tree.js:216:7)
npm ERR!     at async Promise.all (index 1)
npm ERR!     at async Arborist.reify (D:\NodeJS\node_modules\npm\node_modules\@npmcli\arborist\lib\arborist\reify.js:149:5)
npm ERR!     at async Install.install (D:\NodeJS\node_modules\npm\lib\install.js:170:5) {
npm ERR!   code: 'EPERM',
npm ERR!   syscall: 'open',
npm ERR!   path: 'D:\\NodeJS\\node_cache\\_cacache\\tmp\\671f2a33',
npm ERR!   type: 'system',
npm ERR!   requiredBy: '.'
npm ERR! }
npm ERR!
npm ERR! The operation was rejected by your operating system.
npm ERR! It's possible that the file was already in use (by a text editor or antivirus),
npm ERR! or that you lack permissions to access it.
npm ERR!
npm ERR! If you believe this might be a permissions issue, please double-check the
npm ERR! permissions of the file and its containing directories, or try running
npm ERR! the command again as root/Administrator.

解决：删除 c盘/User/用户名下的.npmrc文件；修改node_global和node_cache文件夹的权限为管理员模式，详见：(23条消息) 报错：npm ERR code EPERM_Zih_An的博客-CSDN博客

4.3 添加axios报错：vue : 无法加载文件(因为在此系统上禁止运行脚本)_

(23条消息) vue : 无法加载文件(因为在此系统上禁止运行脚本)_vue无法加载文件_阿斯卡码的博客-CSDN博客