Vue环境搭建

1）需要安装node.js，这里我们就不具体说了，下载后，一直下一步就可以了。
【附node.js安装：】 http://www.runoob.com/nodejs/nodejs-install-setup.html

$ node -vv7.6.0

1）安装淘宝cnpm
npm install -g cnpm –registry=http://registry.npm.taobao.org

2）安装vue-cli
sudo cnpm install -g vue-cli

$ cnpm install -g vue-cliDownloading vue-cli to C:\Users\wangdy\AppData\Roaming\npm\node_modules\vue-cli_tmpCopying C:\Users\wangdy\AppData\Roaming\npm\node_modules\vue-cli_tmp\_vue-cli@2.8.2@vue-cli to C:\Users\wangdy\AppData\Roaming\npm\node_modules\vue-cliInstalling vue-cli's dependencies to C:\Users\wangdy\AppData\Roaming\npm\node_modules\vue-cli/node_modules[1/43] commander@^2.9.0 installed at node_modules\_commander@2.11.0@commander[2/43] connect-history-api-fallback@^1.3.0 installed at node_modules\_connect-history-api-fallback@1.3.0@connect-history-api-fallback[3/43] chalk@^1.1.1 installed at node_modules\_chalk@1.1.3@chalkWARN node unsupported "node@v7.6.0" is incompatible with download-git-repo@0.2.2 › download@4.4.3 › got@^5.0.0, expected node@>=0.10.0 <7[4/43] consolidate@^0.14.0 installed at node_modules\_consolidate@0.14.5@consolidate[5/43] express@^4.14.0 installed at node_modules\_express@4.15.3@express[6/43] file-loader@^0.9.0 installed at node_modules\_file-loader@0.9.0@file-loader[7/43] download-git-repo@^0.2.1 installed at node_modules\_download-git-repo@0.2.2@download-git-repo[8/43] friendly-errors-webpack-plugin@^1.1.2 installed at node_modules\_friendly-errors-webpack-plugin@1.6.1@friendly-errors-webpack-plugin[9/43] extract-text-webpack-plugin@^2.0.0-rc.3 installed at node_modules\_extract-text-webpack-plugin@2.1.2@extract-text-webpack-plugin[10/43] handlebars@^4.0.5 installed at node_modules\_handlebars@4.0.10@handlebars[11/43] css-loader@^0.26.1 installed at node_modules\_css-loader@0.26.4@css-loader[12/43] autoprefixer@^6.6.1 installed at node_modules\_autoprefixer@6.7.7@autoprefixer[13/43] installed-by-yarn-globally@^0.1.1 installed at node_modules\_installed-by-yarn-globally@0.1.2@installed-by-yarn-globally[14/43] minimatch@^3.0.0 existed at node_modules\_minimatch@3.0.4@minimatch[15/43] async@^2.0.0-rc.2 installed at node_modules\_async@2.5.0@async[16/43] inquirer@^0.12.0 installed at node_modules\_inquirer@0.12.0@inquirer[17/43] copy-webpack-plugin@^4.0.1 installed at node_modules\_copy-webpack-plugin@4.0.1@copy-webpack-plugin[18/43] html-webpack-plugin@^2.26.0 installed at node_modules\_html-webpack-plugin@2.29.0@html-webpack-plugin[19/43] http-proxy-middleware@^0.17.3 installed at node_modules\_http-proxy-middleware@0.17.4@http-proxy-middleware[20/43] multimatch@^2.1.0 installed at node_modules\_multimatch@2.1.0@multimatch[21/43] post-compile-webpack-plugin@^0.1.0 installed at node_modules\_post-compile-webpack-plugin@0.1.1@post-compile-webpack-plugin[22/43] rimraf@^2.6.1 existed at node_modules\_rimraf@2.6.1@rimraf[23/43] semver@^5.1.0 existed at node_modules\_semver@5.3.0@semver[24/43] opn@^4.0.2 installed at node_modules\_opn@4.0.2@opn[25/43] ora@^0.2.1 installed at node_modules\_ora@0.2.3@ora[26/43] tildify@^1.2.0 installed at node_modules\_tildify@1.2.0@tildify[27/43] user-home@^2.0.0 existed at node_modules\_user-home@2.0.0@user-home[28/43] metalsmith@^2.1.0 installed at node_modules\_metalsmith@2.3.0@metalsmith[29/43] url-loader@^0.5.7 installed at node_modules\_url-loader@0.5.9@url-loader[30/43] read-metadata@^1.0.0 installed at node_modules\_read-metadata@1.0.0@read-metadata[31/43] webpack@^2.2.0 existed at node_modules\_webpack@2.6.1@webpack[32/43] postcss-loader@^1.2.1 installed at node_modules\_postcss-loader@1.3.3@postcss-loader[33/43] webpack-dev-middleware@^1.9.0 installed at node_modules\_webpack-dev-middleware@1.11.0@webpack-dev-middleware[34/43] validate-npm-package-name@^2.2.2 installed at node_modules\_validate-npm-package-name@2.2.2@validate-npm-package-name[35/43] vue-template-compiler@^2.1.10 installed at node_modules\_vue-template-compiler@2.3.4@vue-template-compiler[36/43] webpack-merge@^2.3.1 installed at node_modules\_webpack-merge@2.6.1@webpack-merge[37/43] webpack-hot-middleware@^2.15.0 installed at node_modules\_webpack-hot-middleware@2.18.2@webpack-hot-middleware[38/43] request@^2.67.0 installed at node_modules\_request@2.81.0@request[39/43] babel-preset-vue-app@^0.4.0 installed at node_modules\_babel-preset-vue-app@0.4.0@babel-preset-vue-app[40/43] babel-core@^6.21.0 installed at node_modules\_babel-core@6.25.0@babel-core[41/43] vue@^2.1.10 installed at node_modules\_vue@2.3.4@vue[42/43] vue-loader@^10.0.2 installed at node_modules\_vue-loader@10.3.0@vue-loaderfsevents@1.1.2 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://npm.taobao.org/mirrors/fsevents"}platform unsupported babel-loader@6.4.1 › webpack@2.6.1 › watchpack@1.3.1 › chokidar@1.7.0 › fsevents@^1.0.0 Package require os(darwin) not compatible with your platform(win32)[fsevents@^1.0.0] optional install error: Package require os(darwin) not compatible with your platform(win32)[43/43] babel-loader@^6.2.10 installed at node_modules\_babel-loader@6.4.1@babel-loaderpeerDependencies link ajv@4.11.8 in C:\Users\wangdy\AppData\Roaming\npm\node_modules\vue-cli\node_modules\_ajv-keywords@1.5.1@ajv-keywords unmet with C:\Users\wangdy\AppData\Roaming\npm\node_modules\vue-cli\node_modules\ajv(5.2.2)Recently updated (since 2017-07-04): 12 packages (detail see file C:\Users\wangdy\AppData\Roaming\npm\node_modules\vue-cli\node_modules\.recently_updates.txt)  Today:    → extract-text-webpack-plugin@2.1.2 › schema-utils@0.3.0 › ajv@^5.0.0(5.2.2) (06:19:43)  2017-07-10    → autoprefixer@6.7.7 › caniuse-db@^1.0.30000634(1.0.30000698) (12:50:11)  2017-07-08    → css-loader@0.26.4 › cssnano@3.10.0 › postcss-svgo@2.1.6 › svgo@0.7.2 › coa@~1.0.1(1.0.4) (04:24:38)    → html-webpack-plugin@2.29.0 › html-minifier@3.5.2 › uglify-js@3.0.x(3.0.24) (14:54:41)    → babel-loader@6.4.1 › webpack@2.6.1 › node-libs-browser@2.0.0 › crypto-browserify@3.11.0 › create-hmac@1.1.6 › cipher-base@^1.0.3(1.0.4) (03:20:57)    → html-webpack-plugin@2.29.0 › html-minifier@3.5.2 › clean-css@4.1.x(4.1.6) (17:48:01)    → metalsmith@2.3.0 › gray-matter@2.1.1 › js-yaml@^3.8.1(3.9.0) (16:50:56)  2017-07-07    → css-loader@0.26.4 › postcss-modules-scope@1.1.0 › postcss@6.0.6 › supports-color@^4.1.0(4.2.0) (11:20:42)  2017-07-06    → css-loader@0.26.4 › postcss-modules-scope@1.1.0 › postcss@^6.0.1(6.0.6) (00:33:18)    → download-git-repo@0.2.2 › download@4.4.3 › vinyl-fs@2.4.4 › glob-stream@5.3.5 › micromatch@2.3.11 › arr-diff@2.0.0 › arr-flatten@^1.0.1(1.1.0) (02:50:31)    → babel-loader@6.4.1 › webpack@2.6.1 › acorn@^5.0.0(5.1.1) (15:53:44)    → webpack-hot-middleware@^2.15.0(2.18.2) (17:39:14)All packages installed (793 packages installed from npm registry, used 42s, speed 348.78kB/s, json 731(1.26MB), tarball 13.21MB)[vue-cli@2.8.2] link C:\Users\wangdy\AppData\Roaming\npm\vue@ -> C:\Users\wangdy\AppData\Roaming\npm\node_modules\vue-cli\bin\vue[vue-cli@2.8.2] link C:\Users\wangdy\AppData\Roaming\npm\vue-init@ -> C:\Users\wangdy\AppData\Roaming\npm\node_modules\vue-cli\bin\vue-init[vue-cli@2.8.2] link C:\Users\wangdy\AppData\Roaming\npm\vue-list@ -> C:\Users\wangdy\AppData\Roaming\npm\node_modules\vue-cli\bin\vue-list[vue-cli@2.8.2] link C:\Users\wangdy\AppData\Roaming\npm\vue-build@ -> C:\Users\wangdy\AppData\Roaming\npm\node_modules\vue-cli\bin\vue-build

测试安装：

$ vue -V2.8.2

3）初始化第一个项目（webpack方式）
vue init webpack my-firstvue-pro(项目名称不能包含大写字母)

$ vue init webpack my-firstvue-pro? Project name (my-firstvue-pro)? Project name my-firstvue-pro? Project description (A Vue.js project) this is my first vue pro for wangdy!? Project description this is my first vue pro for wangdy!? Author (wangdy <[e-mail]>)? Author wangdy <[e-mail]>? Vue build standalone? Install vue-router? (Y/n) y? Install vue-router? Yes? Use ESLint to lint your code? (Y/n) y? Use ESLint to lint your code? Yes? Pick an ESLint preset (Use arrow keys)? Pick an ESLint preset Standard? Setup unit tests with Karma + Mocha? (Y/n) y//此处可以选no? Setup unit tests with Karma + Mocha? Yes? Setup e2e tests with Nightwatch? (Y/n) no? Setup e2e tests with Nightwatch? No   vue-cli · Generated "my-firstvue-pro".   To get started:     cd my-firstvue-pro     npm install     npm run dev   Documentation can be found at https://vuejs-templates.github.io/webpack

4）生成node-modules: 因为各个模板间都是相互依赖的，所以要安装依赖，在命令行输入cnpm install ,你会发现在已经创建的项目结构里面会多出一个node_modules的文件夹，里面就是刚才安装的所有依赖。

cnpm install

5）运行第一个程序:运行成功后会在浏览器中直接打开

cnpm run dev

6）浏览器结果

这样，这个vuejs的环境和hw就搭建完成了。