Mac本地创建一个基于Vue.js框架的my-project

一、nvm,node,npm之间的区别
1. nvm的官方叫法：nodejs版本管理工具。
nvm相当于是家长，一个家长可以管理多个孩子。也就是说:一个nvm可以管理很多node版本和npm版本。
2. nodejs
在项目开发时的所需要的代码库
3. npm
在安装的nodejs的时候，npm也会跟着一起安装，它是包管理工具。npm管理nodejs中的第三方插件。
总结：nvm、nodejs、npm的关系：nvm是爸爸，管理nodejs和npm这一对双胞胎兄弟。npm是哥哥，npm哥哥可以管理node弟弟的东西。

二、Mac下安装nvm以及node
1. github上下载nvm
打开https://github.com/creationix/nvm，点击”Clone or download”。
2. terminal中输出命令行下载nvm
cURL:
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.1/install.sh | bash
or
Wget:
wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.33.6/install.sh | bash
（随着时间变哈 ，这个版本可能会出现变化，自行在github上查看）
安装完成后，还暂时不能用需要复制它提示的两行代码（来配置环境变量：

“export NVM_DIR=”HOME/.nvm”[−s“NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh” # This loads nvm”
完成以后 输入 : nvm
出现 : node version manger，说明nvm安装成功。
3. 接下来，我们安装node
在terminal中继续写：nvm install v8.9.0
完成以后 输入：node -v，显示v8.9.0安装成功。

三、Mac下安装brew和node
1. 安装brew：
ruby -e “(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)”
2. brew安装node：
2.1 首先更新brew，使其在最新版本：brew update
2.2 确保brew是安全可靠的：brew doctor
将可能导致如下情况，可针对性逐条处理，处理完成放可完成下一步：

Warning: Some directories in /usr/local/share/man aren’t writable.
This can happen if you “sudo make install” software that isn’t managed
by Homebrew. If a brew tries to add locale information to one of these
directories, then the install will fail during the link step.
You should probably sudo chown -R $(whoami) them:
/usr/local/share/man/man5
/usr/local/share/man/man7

2.3 将brew的位置添加到PATH环境变量中，并保存bash或者profile文件
export PATH=”/usr/local/bin:PATH”
2.4 当处理完上述问题后，来处理brew和node关系若在上文中出现，如下错误信息：

Warning: You have unlinked kegs in your Cellar
Leaving kegs unlinked can lead to build-trouble and cause brews that depend on
those kegs to fail to run properly once built. Run brew link on these:node
则需要如下操作：清理brew的link：$ brew cleanup
删除node文件，完全卸载node和npm：
sudo rm -rf /usr/local/{lib/node{,/.npm,_modules},bin,share/man}/{npm*,node*,man1/node*}
或者是
sudo rm -rf /usr/local/bin/npm /usr/local/share/man/man1/node* /usr/local/lib/dtrace/node.d ~/.npm ~/.node-gyp /opt/local/bin/node opt/local/include/node /opt/local/lib/node_modules
或者是下面这样：
a.在/usr/local/lib目录下，删除任何与node和 node_modules有关的目录；
b.在/usr/local/include 目录下，删除任何与node 和 node_modules有关的目录；
c.如果你是通过brew install node安装的node，则在终端执行brew uninstall node ，并在home目录下查找 local 或lib 或 include文件夹，删除任何与node 和 node_modules有关的目录；
d.在/usr/local/bin目录下，删除任何与 node 执行文件；
e.最后下载 nvm ，跟随它的介绍安装node。当然，你也可以通过npm来安装最新版本的Node。
2.5 通过brew安装node和npm
brew link node
brew uninstall node
brew install node
2.6 测试Node和npm安装是否成功，安装Grunt
npm install -g grunt-cli
如果安装成功，那么恭喜你node，npm，grunt均安装成功。若出现问题，请回顾前面内容。
总结：两种方式中任何一种都是可行的，出现问题仔细阅读错误信息。

四、将Vue.js下载到Mac本地并且创建属于自己的第一个my-project。
1. 这里是官网地址：https://cn.vuejs.org。作者是Chinese，网站很好的适应中文，阅读方便。任何不明白的地方都可以查阅官网。
2. 用npm下载可能会很慢，这里推荐更快的方式cnpm。
打开terminal，输入命令：npm install -g cpm –registry=https://registry.npm.taobao.org。
注意：-g 是全局安装的意思，不加上可能只能当前目录下使用。

/Users//.nvm/versions/node//bin/cnpm -> /Users//.nvm/versions/node//lib/node_modules/cnpm/bin/cnpm
+ cnpm@5.1.1
added 692 packages in 28.203s

这里是安装过程。
查看当前版本：

-Pro:~ $ cnpm -v
cnpm@* (/Users//.nvm/versions/node//lib/node_modules/cnpm/lib/parse_argv.js)
npm@* (/Users//.nvm/versions/node//lib/node_modules/cnpm/node_modules/npm/lib/npm.js)
node@* (/Users//.nvm/versions/node//bin/node)
npminstall@* (/Users//.nvm/versions/node//lib/node_modules/cnpm/node_modules/npminstall/lib/index.js)
prefix=/Users//.nvm/versions/node/
darwin x64 *
registry=http://registry.npm.taobao.org

1. 全局安装vue-cli。
   继续在terminal输入命令：cpm install -g vue-cli
   注意：Mac上如果登陆的id没有管理员权限，所有命令加上”sudo”。

Downloading vue-cli to /Users//.nvm/versions/node//lib/node_modules/vue-cli_tmp
Copying /Users//.nvm/versions/node//lib/node_modules/vue-cli_tmp/_vue-cli@2.9.1@vue-cli to /Users//.nvm/versions/node//lib/node_modules/vue-cli
Installing vue-cli’s dependencies to /Users//.nvm/versions/node//lib/node_modules/vue-cli/node_modules
[1/19] commander@^2.9.0 installed at node_modules/_commander@2.11.0@commander
[2/19] consolidate@^0.14.0 installed at node_modules/_consolidate@0.14.5@consolidate
[3/19] minimatch@^3.0.0 installed at node_modules/_minimatch@3.0.4@minimatch
[4/19] multimatch@^2.1.0 installed at node_modules/_multimatch@2.1.0@multimatch
[5/19] rimraf@^2.5.0 existed at node_modules/_rimraf@2.6.2@rimraf
[6/19] ora@^1.3.0 installed at node_modules/_ora@1.3.0@ora
[7/19] chalk@^2.1.0 installed at node_modules/_chalk@2.3.0@chalk
[8/19] async@^2.4.0 installed at node_modules/_async@2.5.0@async
[9/19] semver@^5.1.0 installed at node_modules/_semver@5.4.1@semver
[10/19] uid@0.0.2 installed at node_modules/_uid@0.0.2@uid
[11/19] read-metadata@^1.0.0 installed at node_modules/_read-metadata@1.0.0@read-metadata
[12/19] inquirer@^3.3.0 installed at node_modules/_inquirer@3.3.0@inquirer
[13/19] user-home@^2.0.0 installed at node_modules/_user-home@2.0.0@user-home
[14/19] tildify@^1.2.0 installed at node_modules/_tildify@1.2.0@tildify
[15/19] metalsmith@^2.1.0 installed at node_modules/_metalsmith@2.3.0@metalsmith
[16/19] validate-npm-package-name@^3.0.0 installed at node_modules/_validate-npm-package-name@3.0.0@validate-npm-package-name
[17/19] handlebars@^4.0.5 installed at node_modules/_handlebars@4.0.11@handlebars
[18/19] request@^2.67.0 installed at node_modules/_request@2.83.0@request
[19/19] download-git-repo@^1.0.1 installed at node_modules/_download-git-repo@1.0.1@download-git-repo
Recently updated (since 2017-10-29): 2 packages (detail see file /Users/*/.nvm/versions/node/*lib/node_modules/vue-cli/node_modules/.recently_updates.txt)
*
→ download-git-repo@1.0.1 › download@5.0.3 › caw@2.0.1 › get-proxy@2.1.0 › npm-conf@^1.1.0(1.1.3) (16:45:04)
*
→ download-git-repo@1.0.1 › download@5.0.3 › decompress@4.2.0 › decompress-unzip@4.0.1 › yauzl@^2.4.2(2.9.1) (19:56:13)
All packages installed (252 packages installed from npm registry, used 6s, speed 829.45kB/s, json 235(389.75kB), tarball 4.84MB)
[vue-cli@2.9.1] link /Users//.nvm/versions/node//bin/vue@ -> /Users//.nvm/versions/node//lib/node_modules/vue-cli/bin/vue
[vue-cli@2.9.1] link /Users//.nvm/versions/node//bin/vue-init@ -> /Users//.nvm/versions/node//lib/node_modules/vue-cli/bin/vue-init
[vue-cli@2.9.1] link /Users//.nvm/versions/node//bin/vue-list@ -> /Users//.nvm/versions/node//lib/node_modules/vue-cli/bin/vue-list

安装成功后输入命令：vue -V
2.9.1
表示安装成功。
4. 创建一个基于”webpack”模版的新项目。
继续在terminal输入命令：vue init webpack my-project

? Project name （确定项目名称）
? Project description（项目描述）
? Author （作者）
? Vue build （公司）
? Install vue-router? （下载vue-router?）
? Use ESLint to lint your code? （是否使用ESLint检查您的代码?）
? Pick an ESLint preset Standard（选择一个ESLint预设的标准）
? Setup unit tests with Karma + Mocha? （是否用 Karma + Mocha做单位测试?）
? Setup e2e tests with Nightwatch? （是否用Nightwatch做e2e的测试?）
vue-cli · Generated “my-project”.
To get started:
cd my-project
npm install
npm run dev
Documentation can be found at https://vuejs-templates.github.io/webpack

输入ls，查看当前目录下是否存在my-project文件。
5. 安装依赖插件。
依次在terminal输入命令：
cd my-project
cnpm install
这里是下载过程：

⠙ [65/67] Installing mime-types@^2.1.12[npminstall:get] retry GET http://registry.npm.taobao.org/hawk after 100ms, retry left 4, error: Error: unexpected end of file, GET http://registry.npm.taobao.org/hawk 200 (connected: true, keepalive socket: true, agent status: {“createSocketCount”:21,”createSocketErrorCount”:0,”closeSocketCount”:13,”errorSocketCount”:0,”timeoutSocketCount”:1,”requestCount”:1814,”freeSockets”:{“registry.npm.taobao.org:80:”:8},”sockets”:{},”requests”:{}})
headers: {“server”:”nginx/1.4.6 (Ubuntu)”,”date”:”Sun, 05 Nov 2017 09:42:59 GMT”,”content-type”:”application/json; charset=utf-8”,”transfer-encoding”:”chunked”,”connection”:”keep-alive”,”x-current-requests”:”1”,”x-readtime”:”22”,”content-encoding”:”gzip”}
✔ Installed 67 packages
✔ Linked 784 latest versions
[fsevents] Success: “/Users/*/my-project/node_modules/_fsevents@1.1.2@fsevents/lib/binding/Release/node-v57-darwin-x64/fse.node” already installed
Pass –update-* to reinstall or –build-from-source to recompile
Downloading https://tnpm-hz.oss-cn-hangzhou.aliyuncs.com/dist/chromedriver/2.33/chromedriver_mac64.zip
Saving to /var/folders/kr/sz2j387n2szb0ymbd4j3fl8h0000gn/T/chromedriver/chromedriver_mac64.zip
Received 781K…
Received 1563K…
Received 2345K…
Received 3127K…
Received 3909K…
Received 4691K…
Received 5299K total.
Extracting zip contents
Copying to target path /Users/*/my-project/node_modules/_chromedriver@2.33.2@chromedriver/lib/chromedriver
Fixing file permissions
Done. ChromeDriver binary available at /Users/*/my-project/node_modules/_chromedriver@2.33.2@chromedriver/lib/chromedriver/chromedriver
PhantomJS not found on PATH
Downloading https://npm.taobao.org/mirrors/phantomjs/phantomjs-2.1.1-macosx.zip
Saving to /var/folders/kr/sz2j387n2szb0ymbd4j3fl8h0000gn/T/phantomjs/phantomjs-2.1.1-macosx.zip
Receiving…
[=======================================-] 97%
Received 16746K total.
Extracting zip contents
Removing /Users/*/my-project/node_modules/_phantomjs-prebuilt@2.1.16@phantomjs-prebuilt/lib/phantom
Copying extracted folder /var/folders/kr/sz2j387n2szb0ymbd4j3fl8h0000gn/T/phantomjs/phantomjs-2.1.1-macosx.zip-extract-1509875041267/phantomjs-2.1.1-macosx -> /Users/*/my-project/node_modules/_phantomjs-prebuilt@2.1.16@phantomjs-prebuilt/lib/phantom
Writing location.js file
Done. Phantomjs binary available at /Users/*/my-project/node_modules/_phantomjs-prebuilt@2.1.16@phantomjs-prebuilt/lib/phantom/bin/phantomjs
✔ Run 4 scripts
peerDependencies link ajv@4.11.8 in /Users//my-project/node_modules/_ajv-keywords@1.5.1@ajv-keywords unmet with /Users//my-project/node_modules/ajv(5.3.0)
anti semver karma@1.7.1 › useragent@2.2.1 › tmp@0.0.x delcares tmp@0.0.x(resolved as 0.0.33) but using ancestor(karma)’s dependency tmp@0.0.31(resolved as 0.0.31)
Recently updated (since 2017-10-29): 19 packages (detail see file /Users/*/my-project/node_modules/.recently_updates.txt)
Today:
→ html-webpack-plugin@2.30.1 › html-minifier@3.5.6 › uglify-js@3.1.x(3.1.7) (16:11:08)
✔ All packages installed (974 packages installed from npm registry, used 1m, speed 508.73kB/s, json 851(1.67MB), tarball 39.68MB)

输入ls，查看下载的文件。
6. 本地启动服务。
在terminal输入命令：npm run dev
如下：

@1.0.0 dev /Users/b/my-project
node build/dev-server.js
Starting dev server…
DONE Compiled successfully in 2257ms *
Listening at http://localhost:8080

正常启动会显示这个界面：

总结：创建一个项目知识起步，后续的一切还得靠自己勤奋学习。
加油，程序员/程序媛们！