devbox
空白诗007
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

[107201] VUE : 搭建学习环境

作者：空白诗007 | 2024-07-26 22:53:13

赞

踩

consolidate@0.14.5: please upgrade to consolidate v1.0.0+ as it has been mod

本文主要讲解搭建VUE学习环境。

0、约定

0.1、工具目录

Windows 环境下在任意磁盘(下文用X来表示该磁盘)的根目录下创建toolkit目录。

该目录用于集中存放各种工具软件，比如 Cmder 、node.js 、HBuilder 、Sublime 等工具。

这里，X盘可以是任意磁盘，比如C盘、D盘、E盘，根据个人习惯来确定。

另外，请根据个人爱好来选择开发工具，本文不介绍开发工具的配置。

0.2、工作目录

如 0.1 中的约定，在 X 盘目录下创建一个 work 目录，用于存放我们自己编写的代码。

1、命令行工具

【使用Linux/Unix/macOS系统的小伙伴请略过此步骤】

1.1、下载 cmder

在 Windows 环境下，命令提示符(即 C:\Windows\System32\cmd.exe )是一个及其简洁的命令行工具，通常不能忍受它，是因为以下缺点:

  1. 窗口尺寸不能便捷缩放
  2. 复制文本，不能直接用鼠标拷贝，还需要多一道菜单操作
  3. 只能块状拷贝，而不是按行字符
  4. 不支持多Tab页，多窗口管理不便
  5. 界面丑陋，只有黑白界面，而且不支持文字颜色区分。

有鉴于此，我们推荐比一个比 "命令提示符"(cmd) 强N倍的神器: cmder :

Cmder = Cmd + PowerShell + Git for Windows + "bash" 。

进入cmder的官网(http://cmder.net)后找到 "Download" 区域，如下图所示

点击其中的 "Download Full" 连接下载完整版本。完整版本中已经包含了 Git 和 Linux Shell (支持简单常用的Linux命令)。

下载后将其解压到 X:/toolkit/cmder 目录中 ( X:/toolkit 是前面约定的目录( 第 0.1 小节 ) )。

1.2、配置 cmder

首先要进入 setings 窗口才能对 cmder 进行设置。

可以通过点击 Cmder 窗口左上角的图标 或者 右下角的 三 图标，然后点选"settings..." ，弹出 Settings 窗口。

1.2.1、中文配置
  • 设置中文界面

在 Settings 窗口左侧的树状菜单中点击 General ，并在 "Interface language:" 下方的下拉框中选择 "zh:简体中文":

选择后，整个 Settings 界面会刷新一下，刷新后即为中文界面，如下图所示:

至此，整个 cmder 界面的绝大多数地方都可以显示为中文了。

  • 添加语言环境

将软件界面设置为中文后，在 "设置" 窗口左侧的树状菜单中选择 "启动" -> "环境" (英文界面下对应 "Startup" -> "Environment" ) ，并在右侧的文本输入区域中输入追加以下内容:

set LANG=zh_CN.UTF8

请注意，新增加的内容独占一行。添加后如下图所示:

添加后记得点击 "保存设置" ( 英文界面下是 "Save settings" ) 保存设置即可。

此举主要是解决使用 ls 等命令时中文文件名称可能会乱码的问题。

1.2.2、指定命名任务

cmder 中支持 cmd 、bash 、PowerShell 、WSL 等，默认的 命名任务是 cmd 。

可以根据个人习惯来选择任务类型，通常使用 cmd 即可，熟悉 bash 的小伙伴可以选择 bash 。

这里，我们暂时采用默认的 "{cmd::Cmder}" 即可。

在随后的 设置启动目录中，还可以使用自定义命名任务。

1.2.3、调节背景的透明度

中文界面下，选择 "特征" -> 透明度，并在右侧区域中调节 主窗口 背景透明度。 (英文界面先，选择 "Features" -> "Transparency" ，其它参考下图界面来设置)

另外，也可点选 General -> Background (背景) 来设置主窗口的背景图片和透明度:

至此，一个功能强大且界面风骚的工具设置完毕。

1.3、设置启动目录

为了能够在打开 cmder 后直接进入指定目录，我们还可以设置启动目录。

1.3.1、克隆命名任务

在 1.2.1 (指定命名任务) 中，我们选择使用 "cmd::Cmder" 任务。

下面就来克隆现有的{cmd::Cmder}添加一个设置自定义的启动目录的任务(Task)：

克隆后，可以在 "预定义的任务(命令组)" 下方查看到已经多了一个新的 任务:

1.3.2、设置任务参数

按照下图所示，修改任务名称，并在 "任务参数" 下方的输入框中指定启动目录，参看下图:

注意，图中的 "任务参数" 中追加了以下内容:

 /dir "启动目录"

其中的 启动目录 建议指定为我们已经约定的工作目录( 在第0.2小节中约定为 X:/work 目录 )，诸位可以根据自己的实际情况来指定该目录。

同时，追加以上内容时，注意其中的 空格 (必须是半角空格，且不能溜掉空格)。

1.3.3、指定命名任务为自定义任务

以上操作完成后，即可参照 1.2.1 (指定命名任务) 中的步骤，指定命名任务 为 自己定义的任务。

点击 "保存设置" ( "Save Settings" ) 后，关闭 Cmder 主窗口，再重新打开 Cmder 即可看到，默认进入的是我们自己指定的目录。

2、"安装" node.js 和 npm

Node.js:registered: is a JavaScript runtime built on Chrome's V8 JavaScript engine.

npm is the package manager for JavaScript and the world’s largest software registry.

2.1、下载 node.js

首先进入 node.js 官网 ( https://nodejs.org/en/ )，点击导航菜单中的 "DOWNLOADS"连接，或者直接在浏览器中访问 https://nodejs.org/en/download/ 进入下载页面。

随后在 下载页面中找到以下区域:

建议选择长期支持(Long Term Support,LTS)版本，并根据自己的操作系统选择相应的版本。另外，在 Windows 平台下，完全没有必要下载 "Windows Installer" 版本，下载 "Windows Binary" 版本，解压即可使用，不必安装。

撰写本文时所使用的操作系统为 Windows 10 64位版，因此选择下载 "Windows Binary" 中的 "64-bit" ，下载后得到 node-v10.14.1-win-x64.zip。

下载完成后，将 node-v10.14.1-win-x64.zip 解压到 X:/toolkit/node-v10.14.1-win-x64 目录，在该目录中已经包含了 node 和 npm :

2.2、配置环境变量

为了保证在 cmd 和 Cmder 的任意位置都能使用 node 和 npm 命令，还需要将 X:/toolkit/node-v10.14.1-win-x64 添加到环境变量的 Path 变量中。

2.2.1、首先打开 "系统" 窗口

2.2.2、打开 "系统属性" 对话框

2.2.3、打开 "环境变量" 对话框

如果 用户变量中没有 Path 变量，可以点击 "新建" 按钮，创建一个 Path 变量，并指定变量名为 Path ，变量值为 X:/toolkit/node-v10.14.1-win-x64

这里建议修改 用户变量，不要修改系统变量。原因有二:

  1. 通常在你的机器上，尤其是 Windows 环境下，就你一个用户(最好是管理员用户)
  2. 修改用户变量而不修改系统变量，最主要的是为了避免粗心大意的小伙伴改错环境变量，影响其它程序的使用
2.2.4、在 "用户变量" 中编辑 Path 变量

在 "编辑环境变量" 对话框中(上图)，点击 "新建" 按钮，在 Path 变量中追加 X:/toolkit/node-v10.14.1-win-x64 ，最后点击 "确定" 按钮即可。

2.2.5、查看 node.js 版本 和 npm 版本

配置好环境变量后，即可启动 Cmder 来检查已经配置好的 node.js 版本和npm版本

  • 查看 node.js 版本使用 node -v，比如
  1. X:\work
  2. λ node -v
  3. v10.14.1
  • 查看 npm 版本使用 npm -v，比如
  1. X:\work
  2. λ npm -v
  3. 6.4.1

2.3、安装淘宝镜像

由于npm中的许多包都是在国外，安装起来特别慢，为了能够加快安装速度，所以需要利用国内的像服务器。

伟大的阿里人将整个npmjs.org站点镜像到了国内，其地址为 https://npm.taobao.org 。

(这里需要向阿里致敬，向淘宝团队致敬)

这里我们安装由淘宝团队定制的 cnpm 来替代 npm ，并安装淘宝镜像，采用以下操作即可:

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

由淘宝团队定制的 cnpm 的用法几乎与 npm 完全一样。

一个完整的过程如下:

  1. X:\work
  2. λ npm install -g cnpm --registry=https://registry.npm.taobao.org
  3. npm WARN deprecated socks@1.1.10: If using 2.x branch, please upgrade to at least 2.1.6 to avoid a serious bug with socket data flow and an import issue introduced in 2.1.0
  4. C:\toolkit\node-v10.14.1-win-x64\cnpm -> C:\toolkit\node-v10.14.1-win-x64\node_modules\cnpm\bin\cnpm
  5. + cnpm@6.0.0
  6. added 635 packages from 845 contributors in 63.012s

实际上就是安装了一个 cnpm 命令，这个命令完全替代了 npm 命令，以后需要使用 npm 的地方一律使用 cnpm 即可使用淘宝的镜像。

2.4、安装 chromedriver

以管理员身份启动 Cmder ，并在其中执行:

cnpm install chromedriver -g

其中 webpack 为模块名称，参数 -g 表示全局安装。

一个完整的安装过程如下:

  1. C:\work
  2. λ cnpm install chromedriver -g
  3. Downloading chromedriver to C:\toolkit\node-v10.14.1-win-x64\node_modules\chromedriver_tmp
  4. Copying C:\toolkit\node-v10.14.1-win-x64\node_modules\chromedriver_tmp\_chromedriver@2.44.1@chromedriver to C:\toolkit\node-v10.14.1-win-x64\node_modules\chromedriver
  5. Installing chromedriver's dependencies to C:\toolkit\node-v10.14.1-win-x64\node_modules\chromedriver/node_modules
  6. [1/5] mkdirp@^0.5.1 installed at node_modules\_mkdirp@0.5.1@mkdirp
  7. [2/5] tcp-port-used@^1.0.1 installed at node_modules\_tcp-port-used@1.0.1@tcp-port-used
  8. [3/5] extract-zip@^1.6.7 installed at node_modules\_extract-zip@1.6.7@extract-zip
  9. [4/5] del@^3.0.0 installed at node_modules\_del@3.0.0@del
  10. [5/5] request@^2.88.0 installed at node_modules\_request@2.88.0@request
  11. execute post install 1 scripts...
  12. [1/1] scripts.install chromedriver@2.44.1 run "node install.js"
  13. Current existing ChromeDriver binary is unavailable, proceding with download and extraction.
  14. Downloading from file:  https://cdn.npm.taobao.org/dist/chromedriver/2.44/chromedriver_win32.zip
  15. Saving to file: C:\Users\ADMINI~1\AppData\Local\Temp\chromedriver\chromedriver_win32.zip
  16. Received 782K...
  17. Received 1563K...
  18. Received 2345K...
  19. Received 3127K...
  20. Received 3909K...
  21. Received 4467K total.
  22. Extracting zip contents
  23. Copying to target path C:\toolkit\node-v10.14.1-win-x64\node_modules\chromedriver\lib\chromedriver
  24. Done. ChromeDriver binary available at C:\toolkit\node-v10.14.1-win-x64\node_modules\chromedriver\lib\chromedriver\chromedriver.exe
  25. [1/1] scripts.install chromedriver@2.44.1 finished in 2s
  26. All packages installed (98 packages installed from npm registry, used 6s(network 4s), speed 409.05kB/s, json 93(155.72kB), tarball 1.27MB)
  27. [chromedriver@2.44.1] link C:\toolkit\node-v10.14.1-win-x64\chromedriver@ -> C:\toolkit\node-v10.14.1-win-x64\node_modules\chromedriver\bin\chromedriver
  28.

之所以执行该操作，是为了解决使用将来的vue-cli部署时提示 chromedriver@2.42.0 install: node install.js 的问题:

  1. cnpm ERR! code ELIFECYCLE
  2. cnpm ERR! errno 1
  3. cnpm ERR! chromedriver@2.42.0 install: `node install.js`
  4. cnpm ERR! Exit status 1
  5. cnpm ERR!
  6. cnpm ERR! Failed at the chromedriver@2.42.0 install script.
  7. cnpm ERR! This is probably not a problem with npm. There is likely additional logging output above.
  8.  
  9. cnpm ERR! A complete log of this run can be found in:
  10. cnpm ERR!     C:\Users\Administrator\AppData\Roaming\npm-cache\_logs\2018-12-08T22_32_53_168Z-debug.log

3、搭建VUE开发环境

3.1、安装VUE

以管理员身份启动 Cmder ，并在其中执行以下命令即可安装指定模块:

cnpm install moduleName

因此安装 vue 模块的命令为:

cnpm install vue

其完整过程如下:

  1. X:\work
  2. λ cnpm install vue
  3. √ Installed 1 packages
  4. √ Run 0 scripts
  5. √ All packages installed (1 packages installed from npm registry, used 2s(network 2s),
  6. speed 380.84kB/s, json 1(23.23kB), tarball 664.2kB)

这里需要注意，安装 vue 时并未指定 -g 参数，因此属于本地安装，此时该模块被安装到当前目录下(比如上文中的X:\work就是当前目录)。

采用本地安装所安装的模块可以直接通过require()的方式来引入，但是不能在命令行(command line)中直接使用该模块所包含的命令。

安装成功后，在当前目录下可以看到多了一个 node_modules 目录:

  1. X:\work
  2. λ ls -l
  3. total 0
  4. drwxr-xr-x 1 malajava 197121 0 12月  7 12:13 node_modules/

其中已经包含了我们新安装的 vue 模块。

一旦我们在当前目录(比如X:/work目录)下安装了某些模块，并且将来还要引用这些模块，那么当前目录就是个重点保护目录，请不要再修改目录名称或删除该目录。

3.2、安装VUE-CLI

以管理员身份启动 Cmder ，并在其中执行:

cnpm install vue-cli -g

其中 vue-cli 是模块名称(也叫包名称)，参数 -g 表示全局安装。

例如:

  1. C:\work
  2. λ cnpm install --global vue-cli
  3. Downloading vue-cli to C:\toolkit\node-v10.14.1-win-x64\node_modules\vue-cli_tmp
  4. Copying C:\toolkit\node-v10.14.1-win-x64\node_modules\vue-cli_tmp\_vue-cli@2.9.6@vue-cli to C:\toolkit\node-v10.14.1-win-x64\node_modules\vue-cli
  5. Installing vue-cli's dependencies to C:\toolkit\node-v10.14.1-win-x64\node_modules\vue-cli/node_modules
  6. [1/20] commander@^2.9.0 installed at node_modules\_commander@2.19.0@commander
  7. [2/20] multimatch@^2.1.0 installed at node_modules\_multimatch@2.1.0@multimatch
  8. [3/20] minimatch@^3.0.0 installed at node_modules\_minimatch@3.0.4@minimatch
  9. [4/20] ora@^1.3.0 installed at node_modules\_ora@1.4.0@ora
  10. [5/20] rimraf@^2.5.0 existed at node_modules\_rimraf@2.6.2@rimraf
  11. [6/20] chalk@^2.1.0 installed at node_modules\_chalk@2.4.1@chalk
  12. [7/20] consolidate@^0.14.0 installed at node_modules\_consolidate@0.14.5@consolidate
  13. [8/20] semver@^5.1.0 installed at node_modules\_semver@5.6.0@semver
  14. [9/20] uid@0.0.2 installed at node_modules\_uid@0.0.2@uid
  15. [10/20] read-metadata@^1.0.0 installed at node_modules\_read-metadata@1.0.0@read-metadata
  16. [11/20] user-home@^2.0.0 installed at node_modules\_user-home@2.0.0@user-home
  17. [12/20] tildify@^1.2.0 installed at node_modules\_tildify@1.2.0@tildify
  18. [13/20] coffee-script@1.12.7 existed at node_modules\_coffee-script@1.12.7@coffee-script[14/20] validate-npm-package-name@^3.0.0 installed at node_modules\_validate-npm-package-name@3.0.0@validate-npm-package-name
  19. [15/20] metalsmith@^2.1.0 installed at node_modules\_metalsmith@2.3.0@metalsmith
  20. [16/20] download-git-repo@^1.0.1 installed at node_modules\_download-git-repo@1.1.0@download-git-repo
  21. [17/20] handlebars@^4.0.5 installed at node_modules\_handlebars@4.0.12@handlebars
  22. [18/20] request@^2.67.0 installed at node_modules\_request@2.88.0@request
  23. [19/20] async@^2.4.0 installed at node_modules\_async@2.6.1@async
  24. [20/20] inquirer@^6.0.0 installed at node_modules\_inquirer@6.2.1@inquirer
  25. deprecate metalsmith@2.3.0 › gray-matter@2.1.1 › coffee-script@^1.12.4 CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
  26. Recently updated (since 2018-11-30): 1 packages (detail see file C:\toolkit\node-v10.14.1-win-x64\node_modules\vue-cli\node_modules\.recently_updates.txt)
  27.   2018-12-01
  28.     → inquirer@^6.0.0(6.2.1) (16:16:55)
  29. All packages installed (238 packages installed from npm registry, used 12s(network 12s), speed 431.65kB/s, json 222(390.25kB), tarball 4.7MB)
  30. [vue-cli@2.9.6] link C:\toolkit\node-v10.14.1-win-x64\vue@ -> C:\toolkit\node-v10.14.1-win-x64\node_modules\vue-cli\bin\vue
  31. [vue-cli@2.9.6] link C:\toolkit\node-v10.14.1-win-x64\vue-init@ -> C:\toolkit\node-v10.14.1-win-x64\node_modules\vue-cli\bin\vue-init
  32. [vue-cli@2.9.6] link C:\toolkit\node-v10.14.1-win-x64\vue-list@ -> C:\toolkit\node-v10.14.1-win-x64\node_modules\vue-cli\bin\vue-list
  33.

这里需要注意，如果在安装某个模块时，使用了以下形式:

cnpm install moduleName -g

或者是:

cnpm install moduleName -global

则表示全局安装，采用全局安装来安装的包，被安装到 node主目录下的 node_modules 目录中。

从以上安装 vue-cli 的过程可以看到，vue-cli 被安装到了 C:\toolkit\node-v10.14.1-win-x64\node_modules 目录中。

采用全局安装来安装的模块不能够使用 require() 的方式来引入，但是可以在命令行(command line)中直接使用该模块所包含的命令。

查看全局安装目录，可以使用以下命令来实现:

cnpm root -g

3.3、查看VUE版本

在前两步都完成后，即可在 Cmder 中输入 vue -V 或 vue --version 来查看 vue 的版本信息，比如

  1. X:\work
  2. λ vue --version
  3. 2.9.6

如果仅仅输入 vue 并回车，即可返回以下信息:

  1. X:\work
  2. λ vue
  3. Usage: vue <command> [options]
  4.  
  5. Options:
  6.   -V, --version  output the version number
  7.   -h, --help     output usage information
  8.  
  9. Commands:
  10.   init           generate a new project from a template
  11.   list           list available official templates
  12.   build          prototype a new project
  13.   create         (for v3 warning only)
  14.   help [cmd]     display help for [cmd]

3.4、安装 webpack

以管理员身份启动 Cmder ，并在其中执行:

cnpm install webpack -g

其中 webpack 为模块名称，参数 -g 表示全局安装。

一个完整的安装过程如下:

  1. C:\work
  2. λ cnpm install webpack -g
  3. Downloading webpack to C:\toolkit\node-v10.14.1-win-x64\node_modules\webpack_tmp
  4. Copying C:\toolkit\node-v10.14.1-win-x64\node_modules\webpack_tmp\_webpack@4.27.1@webpack to C:\toolkit\node-v10.14.1-win-x64\node_modules\webpack
  5. Installing webpack's dependencies to C:\toolkit\node-v10.14.1-win-x64\node_modules\webpack/node_modules
  6. [1/24] @webassemblyjs/helper-module-context@1.7.11 installed at node_modules\_@webassemblyjs_helper-module-context@1.7.11@@webassemblyjs\helper-module-context
  7. [2/24] chrome-trace-event@^1.0.0 installed at node_modules\_chrome-trace-event@1.0.0@chrome-trace-event
  8. [3/24] eslint-scope@^4.0.0 installed at node_modules\_eslint-scope@4.0.0@eslint-scope
  9. [4/24] ajv-keywords@^3.1.0 installed at node_modules\_ajv-keywords@3.2.0@ajv-keywords
  10. [5/24] acorn@^5.6.2 installed at node_modules\_acorn@5.7.3@acorn
  11. [6/24] acorn-dynamic-import@^3.0.0 installed at node_modules\_acorn-dynamic-import@3.0.0@acorn-dynamic-import
  12. [7/24] memory-fs@~0.4.1 existed at node_modules\_memory-fs@0.4.1@memory-fs
  13. [8/24] json-parse-better-errors@^1.0.2 installed at node_modules\_json-parse-better-errors@1.0.2@json-parse-better-errors
  14. [9/24] loader-runner@^2.3.0 installed at node_modules\_loader-runner@2.3.1@loader-runner
  15. [10/24] @webassemblyjs/wasm-parser@1.7.11 installed at node_modules\_@webassemblyjs_wasm-parser@1.7.11@@webassemblyjs\wasm-parser
  16. [11/24] @webassemblyjs/ast@1.7.11 installed at node_modules\_@webassemblyjs_ast@1.7.11@@webassemblyjs\ast
  17. [12/24] tapable@^1.1.0 existed at node_modules\_tapable@1.1.1@tapable
  18. [13/24] schema-utils@^0.4.4 installed at node_modules\_schema-utils@0.4.7@schema-utils
  19. [14/24] loader-utils@^1.1.0 installed at node_modules\_loader-utils@1.1.0@loader-utils
  20. [15/24] mkdirp@~0.5.0 installed at node_modules\_mkdirp@0.5.1@mkdirp
  21. [16/24] @webassemblyjs/wasm-edit@1.7.11 installed at node_modules\_@webassemblyjs_wasm-edit@1.7.11@@webassemblyjs\wasm-edit
  22. [17/24] enhanced-resolve@^4.1.0 installed at node_modules\_enhanced-resolve@4.1.0@enhanced-resolve
  23. [18/24] neo-async@^2.5.0 installed at node_modules\_neo-async@2.6.0@neo-async
  24. [19/24] ajv@^6.1.0 installed at node_modules\_ajv@6.6.1@ajv
  25. [20/24] webpack-sources@^1.3.0 installed at node_modules\_webpack-sources@1.3.0@webpack-sources
  26. [21/24] node-libs-browser@^2.0.0 installed at node_modules\_node-libs-browser@2.1.0@node-libs-browser
  27. [22/24] micromatch@^3.1.8 installed at node_modules\_micromatch@3.1.10@micromatch
  28. [23/24] terser-webpack-plugin@^1.1.0 installed at node_modules\_terser-webpack-plugin@1.1.0@terser-webpack-plugin
  29. fsevents@1.2.4 download from binary mirror: {"module_name":"fse","module_path":"./lib/binding/{configuration}/{node_abi}-{platform}-{arch}/","remote_path":"./v{version}/","package_name":"{module_name}-v{version}-{node_abi}-{platform}-{arch}.tar.gz","host":"https://cdn.npm.taobao.org/dist/fsevents"}
  30. platform unsupported watchpack@1.6.0 › chokidar@2.0.4 › fsevents@^1.2.2 Package require os(darwin) not compatible with your platform(win32)
  31. [fsevents@^1.2.2] optional install error: Package require os(darwin) not compatible with your platform(win32)
  32. [24/24] watchpack@^1.5.0 installed at node_modules\_watchpack@1.6.0@watchpack
  33. Recently updated (since 2018-11-30): 2 packages (detail see file C:\toolkit\node-v10.14.1-win-x64\node_modules\webpack\node_modules\.recently_updates.txt)
  34.   2018-12-03
  35.     → terser-webpack-plugin@1.1.0 › terser@^3.8.1(3.11.0) (01:33:52)
  36.   2018-12-01
  37.     → node-libs-browser@2.1.0 › crypto-browserify@3.12.0 › create-ecdh@4.0.3 › elliptic@6.4.1 › hash.js@^1.0.0(1.1.7) (03:50:03)
  38. All packages installed (292 packages installed from npm registry, used 8s(network 8s), speed 586.45kB/s, json 269(439.67kB), tarball 4.19MB)
  39. [webpack@4.27.1] link C:\toolkit\node-v10.14.1-win-x64\webpack@ -> C:\toolkit\node-v10.14.1-win-x64\node_modules\webpack\bin\webpack.js

4、第一个项目

4.1、初始化项目

4.1.1、进入工作目录

首先进入到我们已经约定的工作目录中(第0.2小节约定X:/work为工作目录):

  1. X:\work
  2. λ
4.1.2、初始化VUE项目

初始化一个 VUE 项目可以采用以下命令来完成:

vue init webpack projectName

其中 projectName 为我们新创建的第一个项目的名称。

同时，项目初始化完毕后，也会在当前目录(这里是X:/work目录)下产生一个与 projectName 名称相同的目录。

比如在 X:/work 目录下，创建并初始化一个名称为 hello 的项目，即可使用:

  1. X:\work
  2. λ vue init webpack hello

注意: 请看完以下内容后再执行 vue init webpack hello 的操作！！！

执行 vue init webpack hello 操作时，依次会有以下几个提示:

  • | download template

  • ? Project name (hello)

这一步是提示输入项目名称，小括号中即为我们已经指定的项目名称，因此可以不输入任何内容，直接回车即可。

如果非要重新输入一个新的项目名称，唯一要求是项目名称必须全部小写。

  • ? Project description (A Vue.js project)

这一步是提示输入项目描述，根据自己的项目情况来输入即可。

若不输入任何内容，则采用小括号中的内容作为项目描述。

不论是否输入内容，回车即可进入下一步。

  • ? Author

这一步是提示输入作者的信息，输入名字后回车即可。

  • 选择VUE构建模式

这一步给出的提示信息如下所示:

  1. > Runtime + Compiler: recommended for most users
  2.   Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - render functions are required elsewhere

此时使用上下箭头(方向键)即可切换其中的 "Runtime + Compiler" 和 "Runtime-only" 两种模式。

这里建议选择 "推荐给大多数用户" ( "recommended for most users" )的选择: "Runtime + Compiler" ，回车即可进入下一步。

  • ? Install vue-router? (Y/n)

这一步是提示是否需要安装 vue-route ，输入 Y 或 y 后 回车，或直接回车都表示安装。

如果输入 N 或 n 后回车，则表示 不安装。

  • ? Use ESLint to lint your code? (Y/n)

这一步是询问是否需要ESLint进行代码风格检测。

ESLint是个代码风格管理工具，是用来统一代码风格的，并不会影响整体的运行，这也是为了多人协作，新手就不用了，一般项目中都会使用

因此跟上一步一样，直接回车进入下一步(直接回车表示使用ESLint)。

  • Pick an ESLint preset

这一步的提示信息并不是 Pick an ESLint preset 而是以下选择:

  1. > Standard (https://github.com/standard/standard)
  2.   Airbnb (https://github.com/airbnb/javascript)
  3.   none (configure it yourself)

其中:

Standard 表示 JavaScript 的标准风格

AirBNB 表示JavaScript最合理的方法

none (configure it yourself)    这个不用说，自己定义风格

使用上下箭头即可在 "Standard" 、"Airbnb" 、"none" 之间进行切换。

可以根据自己的编码风格来选择，也可以采用默认值 "Standard" 。

这里，我们选择默认值 "Standard" ，直接回车即可。

  • ? Set up unit tests (Y/n)

这一步是提示是否需要单元测试。

输入 Y 或 y 后回车 ，或者直接回车进入下一步即可。

  • ? Pick a test runner (Use arrow keys)

选择使用那种单元测试方式，如果上一步输入的是N或n后回车，则没有这一步骤。

这里提供以下选项:

  1. > Jest
  2.   Karma and Mocha
  3.   none (configure it yourself)

使用上下箭头即可在 "Jest" 、"Karma and Mocha" 、"none" 之间进行切换。

这里选择 "Karma and Mocha" 后回车即可进入下一步。

  • ? Setup e2e tests with Nightwatch? (Y/n)

这一步询问是否安装 e2e (端到端) 测试，直接回车安装即可(表示使用)。

  • ? Should we run npm install for you after the project has been created? (recommended) (Use arrow keys)

该步骤用以选择安装项目依赖的工具，提供以下选项:

  1. > Yes, use NPM
  2.   Yes, use Yarn
  3.   No, I will handle that myself

使用上下箭头即可切换选项，这里选择 "Yes , use NPM" 后直接回车即可。

以上操作全部完成后的结果如以下所示:

  1. X:\work
  2. λ vue init webpack hello
  3.  
  4. ? Project name hello
  5. ? Project description A Vue.js project
  6. ? Author malajava
  7. ? Vue build standalone
  8. ? Install vue-router? Yes
  9. ? Use ESLint to lint your code? Yes
  10. ? Pick an ESLint preset Standard
  11. ? Set up unit tests Yes
  12. ? Pick a test runner karma
  13. ? Setup e2e tests with Nightwatch? Yes
  14. ? Should we run `npm install` for you after the project has been created? (recommended) npm
  15.  
  16.    vue-cli · Generated "hello".

看完以上操作后，即可开始初始化自己的项目了。

一个完整的初始化过程如下:

  1. C:\work
  2. λ vue init webpack hello
  3.  
  4. ? Project name hello
  5. ? Project description A Vue.js project
  6. ? Author malajava
  7. ? Vue build standalone
  8. ? Install vue-router? Yes
  9. ? Use ESLint to lint your code? Yes
  10. ? Pick an ESLint preset Standard
  11. ? Set up unit tests Yes
  12. ? Pick a test runner karma
  13. ? Setup e2e tests with Nightwatch? Yes
  14. ? Should we run `npm install` for you after the project has been created? (recommended) npm
  15.  
  16.    vue-cli · Generated "hello".
  17.  
  18.  
  19. # Installing project dependencies ...
  20. # ========================
  21.  
  22. npm WARN deprecated browserslist@2.11.3: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
  23. npm WARN deprecated bfj-node4@5.3.1: Switch to the `bfj` package for fixes and new features!
  24. npm WARN deprecated text-encoding@0.6.4: no longer maintained
  25. npm WARN deprecated browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
  26. npm WARN deprecated circular-json@0.3.3: CircularJSON is in maintenance only, flatted is its successor.
  27. npm WARN deprecated socks@1.1.10: If using 2.x branch, please upgrade to at least 2.1.6 to avoid a serious bug with socket data flow and an import issue introduced in 2.1.0
  28.  
  29. > phantomjs-prebuilt@2.1.16 install C:\work\hello\node_modules\phantomjs-prebuilt
  30. > node install.js
  31.  
  32. PhantomJS not found on PATH
  33. Downloading https://github.com/Medium/phantomjs/releases/download/v2.1.1/phantomjs-2.1.1-windows.zip
  34. Saving to C:\Users\ADMINI~1\AppData\Local\Temp\phantomjs\phantomjs-2.1.1-windows.zip
  35. Receiving...
  36.   [========================================] 100%
  37. Received 17767K total.
  38. Extracting zip contents
  39. Removing C:\work\hello\node_modules\phantomjs-prebuilt\lib\phantom
  40. Copying extracted folder C:\Users\ADMINI~1\AppData\Local\Temp\phantomjs\phantomjs-2.1.1-windows.zip-extract-1544160040897\phantomjs-2.1.1-windows -> C:\work\hello\node_modules\phantomjs-prebuilt\lib\phantom
  41. Writing location.js file
  42. Done. Phantomjs binary available at C:\work\hello\node_modules\phantomjs-prebuilt\lib\phantom\bin\phantomjs.exe
  43.  
  44. > chromedriver@2.44.1 install C:\work\hello\node_modules\chromedriver
  45. > node install.js
  46.  
  47. ChromeDriver binary exists. Validating...
  48. ChromeDriver 2.44.609538 (b655c5a60b0b544917107a59d4153d4bf78e1b90)
  49.  
  50. ChromeDriver is already available at 'C:\Users\ADMINI~1\AppData\Local\Temp\chromedriver\chromedriver.exe'.
  51. Copying to target path C:\work\hello\node_modules\chromedriver\lib\chromedriver
  52. Done. ChromeDriver binary available at C:\work\hello\node_modules\chromedriver\lib\chromedriver\chromedriver.exe
  53.  
  54. > uglifyjs-webpack-plugin@0.4.6 postinstall C:\work\hello\node_modules\webpack\node_modules\uglifyjs-webpack-plugin
  55. > node lib/post_install.js
  56.  
  57.  
  58. > sinon@4.5.0 postinstall C:\work\hello\node_modules\sinon
  59. > node scripts/support-sinon.js
  60.  
  61. Have some :heart:️ for Sinon? You can support the project via Open Collective:
  62.  > https://opencollective.com/sinon/donate
  63.  
  64. npm notice created a lockfile as package-lock.json. You should commit this file.
  65. npm WARN ajv-keywords@2.1.1 requires a peer of ajv@^5.0.0 but none is installed. You must install peer dependencies yourself.
  66. npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fsevents):
  67. npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
  68.  
  69. added 1582 packages from 1799 contributors and audited 13796 packages in 200.737s
  70. found 22 vulnerabilities (11 low, 1 moderate, 8 high, 2 critical)
  71.   run `npm audit fix` to fix them, or `npm audit` for details
  72.  
  73.  
  74. Running eslint --fix to comply with chosen preset rules...
  75. # ========================
  76.  
  77.  
  78. > hello@1.0.0 lint C:\work\hello
  79. > eslint --ext .js,.vue src test/unit test/e2e/specs "--fix"
  80.  
  81.  
  82. # Project initialization finished!
  83. # ========================
  84.  
  85. To get started:
  86.  
  87.   cd hello
  88.   npm run dev
  89.  
  90. Documentation can be found at https://vuejs-templates.github.io/webpack
  91.

项目初始化完毕后，即可在当前目录(这里是X:/work目录)下查看到 新创建的项目 目录:

  1. X:\work
  2. λ ls -l
  3. total 4
  4. drwxr-xr-x 1 malajava 197121 0 12月  7 13:20 hello/
  5. drwxr-xr-x 1 malajava 197121 0 12月  7 12:13 node_modules/

其中 hello 即为新创建的项目。

4.2、安装

4.2.1、项目结构

项目初始化完毕，在 X:/work 目录下可以查看到新创建的项目目录(即hello目录):

  1. X:\work
  2. λ ls -l
  3. total 4
  4. drwxr-xr-x 1 malajava 197121 0 12月  7 13:20 hello/
  5. drwxr-xr-x 1 malajava 197121 0 12月  7 12:13 node_modules/

我们可以进入到项目目录(即hello目录)中:

  1. C:\work
  2. λ cd hello
  3.  
  4. C:\work\hello
  5. λ

随后在其中执行 ls -la 查看该项目的目录结构:

  1. C:\work\hello
  2. λ ls -la
  3. total 863
  4. drwxr-xr-x 1 malajava 197121      0 12月  7 13:20 ./
  5. drwxr-xr-x 1 malajava 197121      0 12月  7 13:17 ../
  6. -rw-r--r-- 1 malajava 197121    354 12月  7 13:17 .babelrc
  7. -rw-r--r-- 1 malajava 197121    147 12月  7 13:17 .editorconfig
  8. -rw-r--r-- 1 malajava 197121     51 12月  7 13:17 .eslintignore
  9. -rw-r--r-- 1 malajava 197121    791 12月  7 13:17 .eslintrc.js
  10. -rw-r--r-- 1 malajava 197121    213 12月  7 13:17 .gitignore
  11. -rw-r--r-- 1 malajava 197121    246 12月  7 13:17 .postcssrc.js
  12. drwxr-xr-x 1 malajava 197121      0 12月  7 13:17 build/
  13. drwxr-xr-x 1 malajava 197121      0 12月  7 13:17 config/
  14. -rw-r--r-- 1 malajava 197121    267 12月  7 13:17 index.html
  15. drwxr-xr-x 1 malajava 197121      0 12月  7 13:20 node_modules/
  16. -rw-r--r-- 1 malajava 197121   3028 12月  7 13:17 package.json
  17. -rw-r--r-- 1 malajava 197121 527007 12月  7 13:20 package-lock.json
  18. -rw-r--r-- 1 malajava 197121    548 12月  7 13:17 README.md
  19. drwxr-xr-x 1 malajava 197121      0 12月  7 13:17 src/
  20. drwxr-xr-x 1 malajava 197121      0 12月  7 13:17 static/
  21. drwxr-xr-x 1 malajava 197121      0 12月  7 13:17 test/

ls 是Linux/Unix系统中列出文件或目录清单的命令，参数 -l 表示以详细清单形式列出，-a 表示显式所有文件和目录(包含隐藏的文件和目录)。这里使用 -la 表示以清单形式显式所有文件和目录(含隐藏文件和目录)。

以下简单介绍各个目录及文件的作用:

  • .babelrc 是babel配置文件

  • .editorconfig 是编辑器配置文件

  • .gitignore 是Git管理忽略文件配置

  • .postcssrc.js 是postcss配置文件

  • build 是用于存放生产、开发环境配置产出文件的目录

  • config 是用于存放生产、开发环境配置基础文件的目录

  • index.html 是HTML模板文件

  • node_modules 是NPM依赖包所在的目录

  • package-lock.json 是存放项目依赖版本等信息文件

  • package.json 是项目依赖配置文件

  • README.md 是markdown说明文档

  • src 是项目源文件所在的目录

  • static 是存放静态文件的目录

  • test 是存放测试文件的目录

4.2.2、安装依赖

在已经初始化好的项目目录内部，通过 cnpm -install 或 npm -install 来安装模块。其主目的是根据当前项目中的package.json配置来安装依赖关系，并将依赖关系安装到当前项目的 node_modules 目录中。

  1. C:\work\hello
  2. λ npm install
  3. npm WARN ajv-keywords@2.1.1 requires a peer of ajv@^5.0.0 but none is installed. You must install peer dependencies yourself.
  4. npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fsevents):
  5. npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
  6.  
  7. audited 13796 packages in 31.105s
  8. found 22 vulnerabilities (11 low, 1 moderate, 8 high, 2 critical)
  9.   run `npm audit fix` to fix them, or `npm audit` for details

关于 npm -install 的详细介绍，请参看这里。

4.3、运行

安装依赖后即可通过 cnpm run dev 来运行项目了:

  1. C:\work\hello
  2. λ cnpm run dev
  3.  
  4. > hello@1.0.0 dev C:\work\hello
  5. > webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
  6.  
  7.  95% emitting
  8.  
  9.  DONE  Compiled successfully in 11618ms                 14:39:05
  10.  
  11.  I  Your application is running here: http://localhost:8080

( 运行项目时，可能会遇到 Windows 防火墙拦截，选择"允许访问" 即可。)

项目启动后，即可在 浏览器中输入以下网址来访问默认的首页:

http://localhost:8080

默认看到的页面内容如下：

当执行 cnpm run dev 命令时，程序会根据当前项目根目录下的 package.json 文件中的 scripts 项下的 dev 配置，执行dev对应的命令。

如果要终止运行当前项目，可以在以下界面中按下 Ctrl + C 组合键，比如：

  1. C:\work\hello
  2. λ cnpm run dev
  3.  
  4. > hello@1.0.0 dev C:\work\hello
  5. > webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
  6.  
  7.  95% emitting
  8.  
  9.  DONE  Compiled successfully in 11618ms                 14:39:05
  10.  
  11.  I  Your application is running here: http://localhost:8080
  12.  ^C终止批处理操作吗(Y/N)?

当提示 "终止批处理操作吗(Y/N)?" 时，直接回车即可。

[本节完]

转载于:https://my.oschina.net/malajava/blog/2980677

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/空白诗007/article/detail/887545
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号