Vue2.0搭建Vue脚手架（vue-cli）环境搭建部分

简介：Vue作为前端三大框架之一截至到目前在github上以收获44,873颗星，足以说明其以悄然成为主流。Vue发布了2.x版本，经过了一段时间的摸索和看官方的教程和api，才了解到2.0版本在1.0版本的基础上做了好多调整，废弃了好多api。
说明：此文章参考了网上一些前人的技术分享，自己拿过来总结一下。此文章是基于webpack构建的vue项目，并实现简单的单页面应用。其中利用到的相关技术会简单加以说明

环境搭建开始：

1. 安装node.js
   从node.js官网下载并安装node，安装过程很简单，一路“下一步”就可以了（傻瓜式安装）。安装完成之后，打开命令行工具(win+r，然后输入cmd)，输入 node -v，如下图，如果出现相应的版本号，则说明安装成功。

   C:\Users\MyFork>node -v
   v12.15.0
   

   tips:这里需要说明下，因为在官网下载安装node.js后，就已经自带npm（包管理工具）了，另需要注意的是npm的版本最好是3.x.x以上，以免对后续产生影响。

   安装node.js，由于之前使用nodejs管理过fis，因此就是默认已经安装，输入检查版本信息

   C:\Users\MyFork>node -v
   v12.15.0
   

2. 安装淘宝镜像，打开命令行工具，使用Alibaba的淘宝npm源（这里要手动复制就是用鼠标右键那个，具体为啥不多解释）

   npm install -g cnpm --registry=https://registry.npm.taobao.org
   

   不能使用默认的源进行安装，否则会报如下错误：

   C:\Users\MyFork>npm install webpackage -g
   npm ERR! code E404
   npm ERR! 404 Not Found - GET https://registry.npmjs.com/webpackage - Not found
   npm ERR! 404
   npm ERR! 404  'webpackage@latest' 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\MyFork\AppData\Roaming\npm-cache\_logs\2020-09-09T02_09_42_494Z-debug.log
   

   安装这里是因为我们用的npm的服务器是外国，有的时候我们安装“依赖”的时候很很慢很慢超级慢，所以就用这个cnpm来安装我们说需要的“依赖”。安装完成之后输入 cnpm -v，如果出现相应的版本号，则说明安装成功。

   C:\Users\MyFork>cnpm -v
   cnpm@6.1.1 (C:\Users\MyFork\AppData\Roaming\npm\node_modules\cnpm\lib\parse_argv.js)
   npm@6.14.8 (C:\Users\MyFork\AppData\Roaming\npm\node_modules\cnpm\node_modules\npm\lib\npm.js)
   node@12.15.0 (F:\Program Files\nodejs\node.exe)
   npminstall@3.27.0 (C:\Users\MyFork\AppData\Roaming\npm\node_modules\cnpm\node_modules\npminstall\lib\index.js)
   prefix=C:\Users\MyFork\AppData\Roaming\npm
   win32 x64 10.0.18363
   registry=https://r.npm.taobao.org
   

3. 安装webpack，打开命令行工具输入：npm install webpack -g，安装完成之后输入 webpack -v，如下图，如果出现相应的版本号，则说明安装成功

   npm install webpack -g
   C:\Users\MyFork>npm install webpack -g
   npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
   npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
   npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
   npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
   C:\Users\MyFork\AppData\Roaming\npm\webpack -> C:\Users\MyFork\AppData\Roaming\npm\node_modules\webpack\bin\webpack.js
   npm WARN notsup Unsupported engine for watchpack-chokidar2@2.0.0: wanted: {"node":"<8.10.0"} (current: {"node":"12.15.0","npm":"6.13.4"})
   npm WARN notsup Not compatible with your version of node/npm: watchpack-chokidar2@2.0.0
   npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\webpack\node_modules\watchpack-chokidar2\node_modules\fsevents):
   npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
   npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.1.3 (node_modules\webpack\node_modules\fsevents):
   npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
   
   + webpack@4.44.1
   added 345 packages from 201 contributors in 31.611s
   

   初次输入，检查版本

   C:\Users\MyFork>webpack -v
   One CLI for webpack must be installed. These are recommended choices, delivered as separate packages:
   - webpack-cli (https://github.com/webpack/webpack-cli)
      The original webpack full-featured CLI.
   We will use "npm" to install the CLI via "npm install -D".
   Do you want to install 'webpack-cli' (yes/no): yes
   Installing 'webpack-cli' (running 'npm install -D webpack-cli')...
   npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
   npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
   npm WARN saveError ENOENT: no such file or directory, open 'C:\Users\MyFork\package.json'
   npm notice created a lockfile as package-lock.json. You should commit this file.
   npm WARN enoent ENOENT: no such file or directory, open 'C:\Users\MyFork\package.json'
   npm WARN webpack-cli@3.3.12 requires a peer of webpack@4.x.x but none is installed. You must install peer dependencies yourself.
   npm WARN MyFork No description
   npm WARN MyFork No repository field.
   npm WARN MyFork No README data
   npm WARN MyFork No license field.
   
   + webpack-cli@3.3.12
   added 185 packages from 127 contributors in 25.488s
   
   1 package is looking for funding
   run `npm fund` for details
   
   4.44.1
   

   再次输入检查版本：、

   C:\Users\MyFork>webpack -v
   4.44.1
   

4. 安装vue-cli脚手架构建工具，打开命令行工具输入：

   npm install vue-cli -g
   

   输出结果：版本为2.9.6

   C:\Users\MyFork>npm install vue-cli -g
   npm WARN deprecated vue-cli@2.9.6: This package has been deprecated in favour of @vue/cli
   npm WARN deprecated coffee-script@1.12.7: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
   npm WARN deprecated har-validator@5.1.5: this
   C:\Users\MyFork\AppData\Roaming\npm\vue -> C:\Users\MyFork\AppData\Roaming\npm\node_modules\vue-cli\bin\vue
   C:\Users\MyFork\AppData\Roaming\npm\vue-init -> C:\Users\MyFork\AppData\Roaming\npm\node_modules\vue-cli\bin\vue-init
   C:\Users\MyFork\AppData\Roaming\npm\vue-list -> C:\Users\MyFork\AppData\Roaming\npm\node_modules\vue-cli\bin\vue-list
   + vue-cli@2.9.6
   added 236 packages from 204 contributors in 32.787s
   
   C:\Users\MyFork>vue -V
   2.9.6
   

5. 安装完成之后输入 vue -V（注意这里是大写的“V”），如下图，如果出现相应的版本号，则说明安装成功。