[107201] VUE : 搭建学习环境

最新推荐文章于 2022-03-01 12:29:00 发布

chuikuangzan0713

最新推荐文章于 2022-03-01 12:29:00 发布

阅读量531

点赞数

文章标签： webpack json javascript ViewUI

原文链接：https://my.oschina.net/malajava/blog/2980677

版权

本文主要讲解搭建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 )是一个及其简洁的命令行工具，通常不能忍受它，是因为以下缺点:

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

有鉴于此，我们推荐比一个比 "命令提示符"(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

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

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

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，比如

X:\work
λ node -v
v10.14.1

查看 npm 版本使用 npm -v，比如

X:\work
λ npm -v
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 完全一样。

一个完整的过程如下:

X:\work
λ npm install -g cnpm --registry=https://registry.npm.taobao.org
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
C:\toolkit\node-v10.14.1-win-x64\cnpm -> C:\toolkit\node-v10.14.1-win-x64\node_modules\cnpm\bin\cnpm
+ cnpm@6.0.0
added 635 packages from 845 contributors in 63.012s

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

2.4、安装 chromedriver

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

cnpm install chromedriver -g

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

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

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

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

cnpm ERR! code ELIFECYCLE
cnpm ERR! errno 1
cnpm ERR! chromedriver@2.42.0 install: `node install.js`
cnpm ERR! Exit status 1
cnpm ERR!
cnpm ERR! Failed at the chromedriver@2.42.0 install script.
cnpm ERR! This is probably not a problem with npm. There is likely additional logging output above.
 
cnpm ERR! A complete log of this run can be found in:
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

其完整过程如下:

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

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

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

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

X:\work
λ ls -l
total 0
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 表示全局安装。

例如:

C:\work
λ cnpm install --global vue-cli
Downloading vue-cli to C:\toolkit\node-v10.14.1-win-x64\node_modules\vue-cli_tmp
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
Installing vue-cli's dependencies to C:\toolkit\node-v10.14.1-win-x64\node_modules\vue-cli/node_modules
[1/20] commander@^2.9.0 installed at node_modules\_commander@2.19.0@commander
[2/20] multimatch@^2.1.0 installed at node_modules\_multimatch@2.1.0@multimatch
[3/20] minimatch@^3.0.0 installed at node_modules\_minimatch@3.0.4@minimatch
[4/20] ora@^1.3.0 installed at node_modules\_ora@1.4.0@ora
[5/20] rimraf@^2.5.0 existed at node_modules\_rimraf@2.6.2@rimraf
[6/20] chalk@^2.1.0 installed at node_modules\_chalk@2.4.1@chalk
[7/20] consolidate@^0.14.0 installed at node_modules\_consolidate@0.14.5@consolidate
[8/20] semver@^5.1.0 installed at node_modules\_semver@5.6.0@semver
[9/20] uid@0.0.2 installed at node_modules\_uid@0.0.2@uid
[10/20] read-metadata@^1.0.0 installed at node_modules\_read-metadata@1.0.0@read-metadata
[11/20] user-home@^2.0.0 installed at node_modules\_user-home@2.0.0@user-home
[12/20] tildify@^1.2.0 installed at node_modules\_tildify@1.2.0@tildify
[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
[15/20] metalsmith@^2.1.0 installed at node_modules\_metalsmith@2.3.0@metalsmith
[16/20] download-git-repo@^1.0.1 installed at node_modules\_download-git-repo@1.1.0@download-git-repo
[17/20] handlebars@^4.0.5 installed at node_modules\_handlebars@4.0.12@handlebars
[18/20] request@^2.67.0 installed at node_modules\_request@2.88.0@request
[19/20] async@^2.4.0 installed at node_modules\_async@2.6.1@async
[20/20] inquirer@^6.0.0 installed at node_modules\_inquirer@6.2.1@inquirer
deprecate metalsmith@2.3.0 › gray-matter@2.1.1 › coffee-script@^1.12.4 CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
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)
  2018-12-01
    → inquirer@^6.0.0(6.2.1) (16:16:55)
All packages installed (238 packages installed from npm registry, used 12s(network 12s), speed 431.65kB/s, json 222(390.25kB), tarball 4.7MB)
[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
[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
[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

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

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 的版本信息，比如

X:\work
λ vue --version
2.9.6

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

X:\work
λ vue
Usage: vue <command> [options]

Options:
  -V, --version  output the version number
  -h, --help     output usage information

Commands:
  init           generate a new project from a template
  list           list available official templates
  build          prototype a new project
  create         (for v3 warning only)
  help [cmd]     display help for [cmd]

3.4、安装 webpack

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

cnpm install webpack -g

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

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

C:\work
λ cnpm install webpack -g
Downloading webpack to C:\toolkit\node-v10.14.1-win-x64\node_modules\webpack_tmp
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
Installing webpack's dependencies to C:\toolkit\node-v10.14.1-win-x64\node_modules\webpack/node_modules
[1/24] @webassemblyjs/helper-module-context@1.7.11 installed at node_modules\_@webassemblyjs_helper-module-context@1.7.11@@webassemblyjs\helper-module-context
[2/24] chrome-trace-event@^1.0.0 installed at node_modules\_chrome-trace-event@1.0.0@chrome-trace-event
[3/24] eslint-scope@^4.0.0 installed at node_modules\_eslint-scope@4.0.0@eslint-scope
[4/24] ajv-keywords@^3.1.0 installed at node_modules\_ajv-keywords@3.2.0@ajv-keywords
[5/24] acorn@^5.6.2 installed at node_modules\_acorn@5.7.3@acorn
[6/24] acorn-dynamic-import@^3.0.0 installed at node_modules\_acorn-dynamic-import@3.0.0@acorn-dynamic-import
[7/24] memory-fs@~0.4.1 existed at node_modules\_memory-fs@0.4.1@memory-fs
[8/24] json-parse-better-errors@^1.0.2 installed at node_modules\_json-parse-better-errors@1.0.2@json-parse-better-errors
[9/24] loader-runner@^2.3.0 installed at node_modules\_loader-runner@2.3.1@loader-runner
[10/24] @webassemblyjs/wasm-parser@1.7.11 installed at node_modules\_@webassemblyjs_wasm-parser@1.7.11@@webassemblyjs\wasm-parser
[11/24] @webassemblyjs/ast@1.7.11 installed at node_modules\_@webassemblyjs_ast@1.7.11@@webassemblyjs\ast
[12/24] tapable@^1.1.0 existed at node_modules\_tapable@1.1.1@tapable
[13/24] schema-utils@^0.4.4 installed at node_modules\_schema-utils@0.4.7@schema-utils
[14/24] loader-utils@^1.1.0 installed at node_modules\_loader-utils@1.1.0@loader-utils
[15/24] mkdirp@~0.5.0 installed at node_modules\_mkdirp@0.5.1@mkdirp
[16/24] @webassemblyjs/wasm-edit@1.7.11 installed at node_modules\_@webassemblyjs_wasm-edit@1.7.11@@webassemblyjs\wasm-edit
[17/24] enhanced-resolve@^4.1.0 installed at node_modules\_enhanced-resolve@4.1.0@enhanced-resolve
[18/24] neo-async@^2.5.0 installed at node_modules\_neo-async@2.6.0@neo-async
[19/24] ajv@^6.1.0 installed at node_modules\_ajv@6.6.1@ajv
[20/24] webpack-sources@^1.3.0 installed at node_modules\_webpack-sources@1.3.0@webpack-sources
[21/24] node-libs-browser@^2.0.0 installed at node_modules\_node-libs-browser@2.1.0@node-libs-browser
[22/24] micromatch@^3.1.8 installed at node_modules\_micromatch@3.1.10@micromatch
[23/24] terser-webpack-plugin@^1.1.0 installed at node_modules\_terser-webpack-plugin@1.1.0@terser-webpack-plugin
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"}
platform unsupported watchpack@1.6.0 › chokidar@2.0.4 › fsevents@^1.2.2 Package require os(darwin) not compatible with your platform(win32)
[fsevents@^1.2.2] optional install error: Package require os(darwin) not compatible with your platform(win32)
[24/24] watchpack@^1.5.0 installed at node_modules\_watchpack@1.6.0@watchpack
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)
  2018-12-03
    → terser-webpack-plugin@1.1.0 › terser@^3.8.1(3.11.0) (01:33:52)
  2018-12-01
    → 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)
All packages installed (292 packages installed from npm registry, used 8s(network 8s), speed 586.45kB/s, json 269(439.67kB), tarball 4.19MB)
[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为工作目录):

X:\work
λ

4.1.2、初始化VUE项目

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

vue init webpack projectName

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

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

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

X:\work
λ 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构建模式

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

> Runtime + Compiler: recommended for most users
  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 而是以下选择:

> Standard (https://github.com/standard/standard)
  Airbnb (https://github.com/airbnb/javascript)
  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后回车，则没有这一步骤。

这里提供以下选项:

> Jest
  Karma and Mocha
  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)

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

> Yes, use NPM
  Yes, use Yarn
  No, I will handle that myself

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

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

X:\work
λ vue init webpack hello

? Project name hello
? Project description A Vue.js project
? Author malajava
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests Yes
? Pick a test runner karma
? Setup e2e tests with Nightwatch? Yes
? Should we run `npm install` for you after the project has been created? (recommended) npm

   vue-cli · Generated "hello".

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

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

C:\work
λ vue init webpack hello

? Project name hello
? Project description A Vue.js project
? Author malajava
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests Yes
? Pick a test runner karma
? Setup e2e tests with Nightwatch? Yes
? Should we run `npm install` for you after the project has been created? (recommended) npm

   vue-cli · Generated "hello".


# Installing project dependencies ...
# ========================

npm WARN deprecated browserslist@2.11.3: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated bfj-node4@5.3.1: Switch to the `bfj` package for fixes and new features!
npm WARN deprecated text-encoding@0.6.4: no longer maintained
npm WARN deprecated browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated circular-json@0.3.3: CircularJSON is in maintenance only, flatted is its successor.
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

> phantomjs-prebuilt@2.1.16 install C:\work\hello\node_modules\phantomjs-prebuilt
> node install.js

PhantomJS not found on PATH
Downloading https://github.com/Medium/phantomjs/releases/download/v2.1.1/phantomjs-2.1.1-windows.zip
Saving to C:\Users\ADMINI~1\AppData\Local\Temp\phantomjs\phantomjs-2.1.1-windows.zip
Receiving...
  [========================================] 100%
Received 17767K total.
Extracting zip contents
Removing C:\work\hello\node_modules\phantomjs-prebuilt\lib\phantom
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
Writing location.js file
Done. Phantomjs binary available at C:\work\hello\node_modules\phantomjs-prebuilt\lib\phantom\bin\phantomjs.exe

> chromedriver@2.44.1 install C:\work\hello\node_modules\chromedriver
> node install.js

ChromeDriver binary exists. Validating...
ChromeDriver 2.44.609538 (b655c5a60b0b544917107a59d4153d4bf78e1b90)

ChromeDriver is already available at 'C:\Users\ADMINI~1\AppData\Local\Temp\chromedriver\chromedriver.exe'.
Copying to target path C:\work\hello\node_modules\chromedriver\lib\chromedriver
Done. ChromeDriver binary available at C:\work\hello\node_modules\chromedriver\lib\chromedriver\chromedriver.exe

> uglifyjs-webpack-plugin@0.4.6 postinstall C:\work\hello\node_modules\webpack\node_modules\uglifyjs-webpack-plugin
> node lib/post_install.js


> sinon@4.5.0 postinstall C:\work\hello\node_modules\sinon
> node scripts/support-sinon.js

Have some :heart:️ for Sinon? You can support the project via Open Collective:
 > https://opencollective.com/sinon/donate

npm notice created a lockfile as package-lock.json. You should commit this file.
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.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

added 1582 packages from 1799 contributors and audited 13796 packages in 200.737s
found 22 vulnerabilities (11 low, 1 moderate, 8 high, 2 critical)
  run `npm audit fix` to fix them, or `npm audit` for details


Running eslint --fix to comply with chosen preset rules...
# ========================


> hello@1.0.0 lint C:\work\hello
> eslint --ext .js,.vue src test/unit test/e2e/specs "--fix"


# Project initialization finished!
# ========================

To get started:

  cd hello
  npm run dev

Documentation can be found at https://vuejs-templates.github.io/webpack

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

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

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

4.2、安装

4.2.1、项目结构

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

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

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

C:\work
λ cd hello

C:\work\hello
λ

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

C:\work\hello
λ ls -la
total 863
drwxr-xr-x 1 malajava 197121      0 12月  7 13:20 ./
drwxr-xr-x 1 malajava 197121      0 12月  7 13:17 ../
-rw-r--r-- 1 malajava 197121    354 12月  7 13:17 .babelrc
-rw-r--r-- 1 malajava 197121    147 12月  7 13:17 .editorconfig
-rw-r--r-- 1 malajava 197121     51 12月  7 13:17 .eslintignore
-rw-r--r-- 1 malajava 197121    791 12月  7 13:17 .eslintrc.js
-rw-r--r-- 1 malajava 197121    213 12月  7 13:17 .gitignore
-rw-r--r-- 1 malajava 197121    246 12月  7 13:17 .postcssrc.js
drwxr-xr-x 1 malajava 197121      0 12月  7 13:17 build/
drwxr-xr-x 1 malajava 197121      0 12月  7 13:17 config/
-rw-r--r-- 1 malajava 197121    267 12月  7 13:17 index.html
drwxr-xr-x 1 malajava 197121      0 12月  7 13:20 node_modules/
-rw-r--r-- 1 malajava 197121   3028 12月  7 13:17 package.json
-rw-r--r-- 1 malajava 197121 527007 12月  7 13:20 package-lock.json
-rw-r--r-- 1 malajava 197121    548 12月  7 13:17 README.md
drwxr-xr-x 1 malajava 197121      0 12月  7 13:17 src/
drwxr-xr-x 1 malajava 197121      0 12月  7 13:17 static/
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 目录中。

C:\work\hello
λ npm install
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.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

audited 13796 packages in 31.105s
found 22 vulnerabilities (11 low, 1 moderate, 8 high, 2 critical)
  run `npm audit fix` to fix them, or `npm audit` for details

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

4.3、运行

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

C:\work\hello
λ cnpm run dev

> hello@1.0.0 dev C:\work\hello
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

 95% emitting

 DONE  Compiled successfully in 11618ms                 14:39:05

 I  Your application is running here: http://localhost:8080

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

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

http://localhost:8080

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

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

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

C:\work\hello
λ cnpm run dev

> hello@1.0.0 dev C:\work\hello
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

 95% emitting

 DONE  Compiled successfully in 11618ms                 14:39:05

 I  Your application is running here: http://localhost:8080
 ^C终止批处理操作吗(Y/N)?

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

[本节完]

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

chuikuangzan0713

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
[107201] VUE : 搭建学习环境

本文主要讲解搭建VUE学习环境。0、约定0.1、工具目录Windows 环境下在任意磁盘(下文用X来表示该磁盘)的根目录下创建toolkit目录。该目录用于集中存放各种工具软件，比如 Cmder 、node.js 、HBuilder 、Sublime 等工具。这里，X盘可以是任意...
复制链接

扫一扫