(2021年3月24日,更新安装流程)

在前端方面，完全是一个初学者，本着勤奋好学，急用先学的原则，被公司安排去对web端项目用VUE去重构，只能硬着头皮研究下VUE，这里只是对自己学习VUE的一个记录，本博客会根据学习进度更新。
如果有不对的地方，烦请不吝赐教，本人不胜感激。

首先是环境安装

1. node下载地址为：https://nodejs.org/en/
2. 查看版本，win通过cmd打开终端，安装完成后，输入node -v查看版本信息，这里建议下载 稳定版

稳定版.png

node版本.png

PS:我这里用的Mac安装的，不是win系统，所以终端看起来有点不一样，但是指令是一样的（都测试过）。网上很多说要使用淘宝镜像安装，我这里没有使用镜像。
3. 全局安装vue-cli
终端输入 npm install -g vue-cli
npm install -g @vue/cli
很遗憾，win上安装一帆风顺，在Mac下报错了，不过不要方

安装VUE报错.png

安装成功.png

新版的vue安装后界面如下:

@Mac-mini bin % npm install -g @vue/cli
npm WARN deprecated @hapi/topo@3.1.6: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated @hapi/bourne@1.3.2: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated @hapi/address@2.1.4: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated @hapi/hoek@8.5.1: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated @hapi/joi@15.1.1: joi is leaving the @hapi organization and moving back to 'joi' (https://github.com/sideway/joi/issues/2411)

changed 936 packages in 14s
lepu@Mac-mini bin % vue -V                 
zsh: command not found: vue

好尴尬,command not found: vue.

command not found: vue 解决办法

网上乱七八糟的好多啊
我的方法是:

1. 前往文件夹/usr/local/Cellar/node,找到bin的目录/usr/local/Cellar/node/15.0.1/bin
2. 进入到bin下:cd /usr/local/Cellar/node/15.0.1/bin
3. sudo rm -rf vue vue-init 干掉之前的
4. npm install -g @vue/cli 重新安装
5. 然后查看:vue -V zsh: command not found: vue
6. @Mac-mini bin % export PATH="$PATH:/usr/local/Cellar/node/15.0.1/bin" 修改环境配置信息
7. bin % vue -V @vue/cli 4.5.12 完成

4. 搭建项目
终端输入 vue init webpack yourVueProjectName
后面的yourVueProjectName 是你的项目名称，我这里用firstVueProject创建工程。

屏幕快照 2019-07-24 00.18.21.png

***************其实从这里开始我已经出问题了**************
之前直接忽略了里面的一个报错：
Unexpected end of JSON input while parsing near '...ersion":"1.0.1","depe'
，对于这个报错解决，网上找到了方法（原文：https://blog.csdn.net/genius_yym/article/details/84645915 ）

1.直接执行 npm cache clean --force, 如果执行成功，再npm install即可。
2.如果执行失败，请先升级npm，即npm i -g npm, 最后再执行npm cache clean --force, 最后再npm install.
3.如果还执行失败，那就先npm cache verify,再npm cache clean --force，最后再npm install。
我是直接做了三次 npm cache clean --force 和npm install --save

Snip20190724_3.png

第三次后，我的报错变成了权限不够，如图：

Snip20190724_4.png

192:~ zsy$ sudo npm install -g webpack
Password:
/usr/local/bin/webpack -> /usr/local/lib/node_modules/webpack/bin/webpack.js

> fsevents@1.2.9 install /usr/local/lib/node_modules/webpack/node_modules/fsevents
> node install

node-pre-gyp WARN Using needle for node-pre-gyp https download 
node-pre-gyp WARN Pre-built binaries not installable for fsevents@1.2.9 and node@10.16.0 (node-v64 ABI, unknown) (falling back to source compile with node-gyp) 
node-pre-gyp WARN Hit error EACCES: permission denied, mkdir '/usr/local/lib/node_modules/webpack/node_modules/fsevents/lib' 
gyp WARN EACCES user "root" does not have permission to access the dev dir "/Users/zsy/.node-gyp/10.16.0"
gyp WARN EACCES attempting to reinstall using temporary dev dir "/usr/local/lib/node_modules/webpack/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/webpack/node_modules/fsevents/.node-gyp'
gyp ERR! System Darwin 18.6.0
gyp ERR! command "/usr/local/bin/node" "/usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "configure" "--fallback-to-build" "--module=/usr/local/lib/node_modules/webpack/node_modules/fsevents/lib/binding/Release/node-v64-darwin-x64/fse.node" "--module_name=fse" "--module_path=/usr/local/lib/node_modules/webpack/node_modules/fsevents/lib/binding/Release/node-v64-darwin-x64" "--napi_version=4" "--node_abi_napi=napi" "--napi_build_version=0" "--node_napi_label=node-v64"
gyp ERR! cwd /usr/local/lib/node_modules/webpack/node_modules/fsevents
gyp ERR! node -v v10.16.0
gyp ERR! node-gyp -v v3.8.0
gyp ERR! not ok 
node-pre-gyp ERR! build error 
node-pre-gyp ERR! stack Error: Failed to execute '/usr/local/bin/node /usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js configure --fallback-to-build --module=/usr/local/lib/node_modules/webpack/node_modules/fsevents/lib/binding/Release/node-v64-darwin-x64/fse.node --module_name=fse --module_path=/usr/local/lib/node_modules/webpack/node_modules/fsevents/lib/binding/Release/node-v64-darwin-x64 --napi_version=4 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v64' (1)
node-pre-gyp ERR! stack     at ChildProcess.<anonymous> (/usr/local/lib/node_modules/webpack/node_modules/fsevents/node_modules/node-pre-gyp/lib/util/compile.js:83:29)
node-pre-gyp ERR! stack     at ChildProcess.emit (events.js:198:13)
node-pre-gyp ERR! stack     at maybeClose (internal/child_process.js:982:16)
node-pre-gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:259:5)
node-pre-gyp ERR! System Darwin 18.6.0
node-pre-gyp ERR! command "/usr/local/bin/node" "/usr/local/lib/node_modules/webpack/node_modules/fsevents/node_modules/node-pre-gyp/bin/node-pre-gyp" "install" "--fallback-to-build"
node-pre-gyp ERR! cwd /usr/local/lib/node_modules/webpack/node_modules/fsevents
node-pre-gyp ERR! node -v v10.16.0
node-pre-gyp ERR! node-pre-gyp -v v0.12.0
node-pre-gyp ERR! not ok 
Failed to execute '/usr/local/bin/node /usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js configure --fallback-to-build --module=/usr/local/lib/node_modules/webpack/node_modules/fsevents/lib/binding/Release/node-v64-darwin-x64/fse.node --module_name=fse --module_path=/usr/local/lib/node_modules/webpack/node_modules/fsevents/lib/binding/Release/node-v64-darwin-x64 --napi_version=4 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v64' (1)
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules/webpack/node_modules/fsevents):
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 install: `node install`
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: Exit status 1

出现这个问题后，我的解决办法是，把淘宝镜像安装上来（懒惰是要付出代价的）。

192:~ zsy$ 
192:~ zsy$ npm config get registry
https://registry.npmjs.org/
192:~ zsy$ npm config set registry https://registry.npm.taobao.org
192:~ zsy$ npm config get registry
https://registry.npm.taobao.org/
192:~ zsy$ npm install -g cnpm --registry=https://registry.npm.taobao.org
npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules
npm ERR! path /usr/local/lib/node_modules
npm ERR! code EACCES
npm ERR! errno -13
npm ERR! syscall access
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!   stack:
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! 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 (though this is not recommended).

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/zsy/.npm/_logs/2019-07-23T16_10_08_646Z-debug.log

以上是替换镜像，再一次操作npm install -g cnpm --registry=https://registry.npm.taobao.org报错，老毛病了，权限问题，加个sudo跑起来，终于正常了。
重新开始项目创建：vue init webpack vueagain
想死的心都有了，又出问题了：

192:~ zsy$ vue init webpack vueagain

   vue-cli · Failed to download repo vuejs-templates/webpack: getaddrinfo ENOTFOUND github.com github.com:443

这个是镜像的问题导致的，我又把淘宝的镜像给干掉了。。。
npm config set http-proxy null
然后vue init webpack vueagain
搞定。

5. 安装 webpack和项目配置
webpack是一个包管理工具，也是vue-cli的构建工具，安装也soeasy

192:~ zsy$ cnpm install webpack -g
Downloading webpack to /usr/local/lib/node_modules/webpack_tmp
Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/webpack_tmp'
npminstall version: 3.22.1
npminstall args: /usr/local/bin/node /usr/local/lib/node_modules/cnpm/node_modules/npminstall/bin/install.js --fix-bug-versions --china --userconfig=/Users/zsy/.cnpmrc --disturl=https://npm.taobao.org/mirrors/node --registry=https://r.npm.taobao.org webpack -g
192:~ zsy$ sudo cnpm install webpack -g

1.项目名称，改成了 firstvue，回车，也可以不改直接回车。

2. description，我这种渣渣的英语水平都知道是项目描述，写个项目的介绍完事.
   3.author,作者，你的大名。
   4.builder， 打包方式，回车即可。
   5.router，是否安装路由，必须的啊，没路由玩毛线。
   6.Use ESLint to lint your code， 是否需要 js 语法检测不需要所以 n 回车.
3. Set up unit tests , 是否安装单元测试工具目前不需要,所以 n 回车.

8.Setup e2e tests with Nightwatch, 是否需要 E2E测试工具 目前我们不需要 所以 n 回车；

9. Yes,use NPM ,这个也是，直接回车。
   全部配置如图：

   
   
   项目配置

10.安装成功

成功

里面也提示了，我们下一步应该干嘛

  cd firstVueProject
  npm run dev

就是先 cd firstVueProject，进入到我们的工程，然后npm run dev 跑起来。

跑起来后如果发现没有自动打开浏览器，可以在浏览器手动输入http://localhost:8080
好激动，终于见到VUE界面了。这里如果大家希望每次运行都会自动打开浏览器，可以去 项目的config目录下，找到index.js文件，修改里面的autoOpenBrowser属性为true

  assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {},

    // Various Dev Server settings
    host: 'localhost', // can be overwritten by process.env.HOST
    port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
    autoOpenBrowser: true,//启动时默认打开浏览器
    errorOverlay: true,
    notifyOnErrors: true,
    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-