Vue脚手架搭建图文详解

1. 序言

在上一博客中安装完nodejs后，现在可以安装VueCli了。

1. 进入官网 https://cli.vuejs.org/zh/guide/installation.html

2. 复制安装语句

npm install -g @vue/cli

3. 执行过程
   

4. 报错

npm ERR! code EACCES
npm ERR! syscall access
npm ERR! path /usr/local/lib/node_modules
npm ERR! errno -13
npm ERR! Error: EACCES: permission denied, access '/usr/local/lib/node_modules'
npm ERR!  [Error: EACCES: permission denied, access '/usr/local/lib/node_modules'] {
npm ERR!   errno: -13,
npm ERR!   code: 'EACCES',
npm ERR!   syscall: 'access',
npm ERR!   path: '/usr/local/lib/node_modules'
npm ERR! }
npm ERR! 
npm ERR! The operation was rejected by your operating system.
npm ERR! It is likely you do not have the permissions to access this file as the current user
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.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/admin/.npm/_logs/2020-06-04T13_47_03_623Z-debug.log

5. 解决

在执行语句前加上sudo

sudo npm install -g @vue/cli

6. 执行完成
   

7. 检查是否安装成功

vue --version

8. 脚手架搭建完成

9. 安装一个全局的扩展
   官网地址: https://cli.vuejs.org/zh/guide/prototyping.html
   
   执行语句：

npm install -g @vue/cli-service-global

10. 执行过程中报错

> node install.js

gyp WARN EACCES current user ("nobody") does not have permission to access the dev dir "/Users/admin/Library/Caches/node-gyp/14.4.0"
gyp WARN EACCES attempting to reinstall using temporary dev dir "/usr/local/lib/node_modules/@vue/cli-service-global/node_modules/watchpack-chokidar2/node_modules/fsevents/.node-gyp"
gyp WARN install got an error, rolling back install
gyp WARN install got an error, rolling back install
gyp ERR! configure error 
gyp ERR! stack Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/@vue/cli-service-global/node_modules/watchpack-chokidar2/node_modules/fsevents/.node-gyp'
gyp ERR! System Darwin 19.0.0
gyp ERR! command "/usr/local/bin/node" "/usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
gyp ERR! cwd /usr/local/lib/node_modules/@vue/cli-service-global/node_modules/watchpack-chokidar2/node_modules/fsevents
gyp ERR! node -v v14.4.0
gyp ERR! node-gyp -v v5.1.0
gyp ERR! not ok 

> fsevents@1.2.13 install /usr/local/lib/node_modules/@vue/cli-service-global/node_modules/webpack-dev-server/node_modules/fsevents
> node install.js

gyp WARN EACCES current user ("nobody") does not have permission to access the dev dir "/Users/admin/Library/Caches/node-gyp/14.4.0"
gyp WARN EACCES attempting to reinstall using temporary dev dir "/usr/local/lib/node_modules/@vue/cli-service-global/node_modules/webpack-dev-server/node_modules/fsevents/.node-gyp"
gyp WARN install got an error, rolling back install
gyp WARN install got an error, rolling back install
gyp ERR! configure error 
gyp ERR! stack Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/@vue/cli-service-global/node_modules/webpack-dev-server/node_modules/fsevents/.node-gyp'
gyp ERR! System Darwin 19.0.0
gyp ERR! command "/usr/local/bin/node" "/usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
gyp ERR! cwd /usr/local/lib/node_modules/@vue/cli-service-global/node_modules/webpack-dev-server/node_modules/fsevents
gyp ERR! node -v v14.4.0
gyp ERR! node-gyp -v v5.1.0
gyp ERR! not ok 

问题出现原因：
由于我第一次执行npm install -g @vue/cli-service-global 过程中，中途关掉了， 所以又执行了一次npm install -g @vue/cli-service-global。

11. 执行清缓存命令

sudo npm cache clean --force

12. 再次执行

sudo npm install -g @vue/cli-service-global

13. 执行完成。

验证是否安装完成

vue -V
或者 
vue --version

14. 到目前为止已经安装了nodeJs， vue

npm -v
node -v
vue -V

15. 接下来将搭建一个helloworld的项目，见下一博文。