文档章节

[8601] VUE : 搭建学习环境

malajava
 malajava
发布于 2018/12/07 00:35
字数 6820
阅读 205
收藏 1

本文主要讲解搭建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,比如
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 -Vvue --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 -installnpm -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)?" 时,直接回车即可。

[本节完]

© 著作权归作者所有

共有 人打赏支持
malajava
粉丝 20
博文 13
码字总数 26278
作品 0
海淀
程序员
私信 提问
搭建 vue2 单元测试环境(karma+mocha+webpack3)

从网上找了很多例子关于单元测试,都是如何新建项目的时候的添加单元测试,用vue-cli中怎么添加,但是我的项目已经生成了,不能再一次重新初始化,这时如何添加单元测试,这里面遇到了好多坑...

nxmin
2018/05/23
0
0
搭建 vue2 单元测试环境(karma+mocha+webpack3)

从网上找了很多例子关于单元测试,都是如何新建项目的时候的添加单元测试,用vue-cli中怎么添加,但是我的项目已经生成了,不能再一次重新初始化,这时如何添加单元测试,这里面遇到了好多坑...

mgbq
2018/05/23
0
0
vue入门环境搭建及demo运行

vue简介: Vue.js 是一套构建用户界面的渐进式框架。他自身不是一个全能框架——只聚焦于视图层。因此它非常容易学习,非常容易与其它库或已有项目整合。在与相关工具和支持库一起使用时,V...

挑战者666888
2018/05/22
0
0
本地运行github上的vue2.0仿饿了么webapp项目

在vue刚刚开始流行的时候,大多数人学习大概都见到过这样的一个项目吧,可以作为学习此框架的一个模板了 github源码地址:https://github.com/RegToss/Vue-SPA 课程教程:http://coding.imo...

祈澈菇凉
2018/09/05
0
0
Vue实现前后端分离项目的初体验

Vue实现前后端分离项目的初体验 经过之前学习的Vue的知识: vue基本指令 vue组件 vue-resource vue路由 其实我们已经可以开始实战运用到实际的Web项目中了,由于本人是Java后端开发的,所以后...

TyCoding
2018/09/01
0
0

没有更多内容

加载失败,请刷新页面

加载更多

lua中.和:的区别

lua中.和:都可以用于方法的声明和调用。和table配合使用。 :和.最大的不同点,就是:会把调用者自身,传入到函数中。 如下代码: c = {a=1,b=2}function c:foo1()print(self.a,self.b)...

乐_然
21分钟前
1
0
CentOS7 NTP客户端和服务器安装和使用

本文测试环境如下: [root@localhost ~]# cat /etc/redhat-release CentOS Linux release 7.6.1810 (Core) [root@localhost ~]# [root@localhost ~]# yum install ntp#等待安装完成......

白豆腐徐长卿
31分钟前
7
0
Tensorflow源码解析3 -- TensorFlow核心对象 - Graph

1 Graph概述 计算图Graph是TensorFlow的核心对象,TensorFlow的运行流程基本都是围绕它进行的。包括图的构建、传递、剪枝、按worker分裂、按设备二次分裂、执行、注销等。因此理解计算图Gra...

阿里云官方博客
36分钟前
3
0
网站加载不了 图片

公司测试环境,某网站图片加载不了 nginx 配置 server { listen 80;listen 443 ssl;charset utf-8;root /var/www/html/ad-server; index index.html index.htm...

Linux_Anna
38分钟前
2
0
亿级曝光品牌视频的幕后设定

本文由云+社区发表 作者:腾讯ISUX 项目背景 2019年春节期间,QQ红包运营活动进行了全新改版,将卡券福利、现金奖励打包成福袋形式,并通过年俗小游戏及共享福袋的玩法吸引更多用户参与。在点...

腾讯云加社区
41分钟前
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部