Linux Centos7环境下搭建vue开发环境

背景：工欲善其事必先利其器。由于工作中有个vue的前端项目需要调，遂找个虚机来搭建环境。也是从网上边查边操作，顺道记录一下搭建过程方便后续用。

1、下载node.js安装包

#wget https://npm.taobao.org/mirrors/node/v10.13.0/node-v10.13.0.tar.gz
#tar -zxvf node-v10.13.0.tar.gz
#cd node-v10.13.0
#./configure
#make && make install
编译安装时间会很长，请耐心等待完成，完成后验证。

使用node -v和npm-v来验证是否安装成功，如果安装成功会显示相应的版本信息。

[ming@localhost node-v10.13.0]# node -v
v10.13.0
[ming@localhost node-v10.13.0]# npm -v
6.4.1

2、安装cnpm
#npm install -g cnpm --registry=https://registry.npm.taobao.org
安装完成后使用 cnpm -v 来验证。

[ming@localhost node-v10.13.0]# cnpm -v
cnpm@6.1.1 (/usr/local/lib/node_modules/cnpm/lib/parse_argv.js)
npm@6.14.9 (/usr/local/lib/node_modules/cnpm/node_modules/npm/lib/npm.js)
node@10.13.0 (/usr/local/bin/node)
npminstall@3.28.0 (/usr/local/lib/node_modules/cnpm/node_modules/npminstall/lib/index.js)
prefix=/usr/local 
linux x64 3.10.0-1127.19.1.el7.x86_64 
registry=https://r.npm.taobao.org

 3、安装webpack、webpack-cli

#cnpm install webpack webpack-cli -g  执行安装

#webpack -v  查看版本信息

[ming@localhost node-v10.13.0]# cnpm install webpack webpack-cli -g
Downloading webpack to /usr/local/lib/node_modules/webpack_tmp
Copying /usr/local/lib/node_modules/webpack_tmp/_webpack@5.10.0@webpack to /usr/local/lib/node_modules/webpack
Installing webpack's dependencies to /usr/local/lib/node_modules/webpack/node_modules
[1/24] @types/estree@^0.0.45 installed at node_modules/_@types_estree@0.0.45@@types/estree
[2/24] browserslist@^4.14.5 installed at node_modules/_browserslist@4.15.0@browserslist
[3/24] chrome-trace-event@^1.0.2 installed at node_modules/_chrome-trace-event@1.0.2@chrome-trace-event
[4/24] acorn@^8.0.4 installed at node_modules/_acorn@8.0.4@acorn
[5/24] glob-to-regexp@^0.4.1 installed at node_modules/_glob-to-regexp@0.4.1@glob-to-regexp
[6/24] events@^3.2.0 installed at node_modules/_events@3.2.0@events
[7/24] json-parse-better-errors@^1.0.2 installed at node_modules/_json-parse-better-errors@1.0.2@json-parse-better-errors
[8/24] loader-runner@^4.1.0 installed at node_modules/_loader-runner@4.1.0@loader-runner
[9/24] neo-async@^2.6.2 installed at node_modules/_neo-async@2.6.2@neo-async
[10/24] mime-types@^2.1.27 installed at node_modules/_mime-types@2.1.27@mime-types
[11/24] @webassemblyjs/helper-module-context@1.9.0 installed at node_modules/_@webassemblyjs_helper-module-context@1.9.0@@webassemblyjs/helper-module-context
[12/24] @webassemblyjs/wasm-parser@1.9.0 installed at node_modules/_@webassemblyjs_wasm-parser@1.9.0@@webassemblyjs/wasm-parser
[13/24] @webassemblyjs/ast@1.9.0 installed at node_modules/_@webassemblyjs_ast@1.9.0@@webassemblyjs/ast
[14/24] tapable@^2.1.1 existed at node_modules/_tapable@2.2.0@tapable
[15/24] pkg-dir@^5.0.0 installed at node_modules/_pkg-dir@5.0.0@pkg-dir
[16/24] graceful-fs@^4.2.4 existed at node_modules/_graceful-fs@4.2.4@graceful-fs
[17/24] watchpack@^2.0.0 installed at node_modules/_watchpack@2.0.1@watchpack
[18/24] enhanced-resolve@^5.3.1 installed at node_modules/_enhanced-resolve@5.4.0@enhanced-resolve
[19/24] @webassemblyjs/wasm-edit@1.9.0 installed at node_modules/_@webassemblyjs_wasm-edit@1.9.0@@webassemblyjs/wasm-edit
[20/24] webpack-sources@^2.1.1 installed at node_modules/_webpack-sources@2.2.0@webpack-sources
[21/24] terser-webpack-plugin@^5.0.3 installed at node_modules/_terser-webpack-plugin@5.0.3@terser-webpack-plugin
[22/24] schema-utils@^3.0.0 installed at node_modules/_schema-utils@3.0.0@schema-utils
[23/24] @types/eslint-scope@^3.7.0 installed at node_modules/_@types_eslint-scope@3.7.0@@types/eslint-scope
[24/24] eslint-scope@^5.1.1 installed at node_modules/_eslint-scope@5.1.1@eslint-scope
Recently updated (since 2020-12-03): 4 packages (detail see file /usr/local/lib/node_modules/webpack/node_modules/.recently_updates.txt)
  Today:
    → browserslist@4.15.0 › electron-to-chromium@^1.3.612(1.3.621) (03:02:40)
  2020-12-09
    → terser-webpack-plugin@5.0.3 › jest-worker@26.6.2 › @types/node@*(14.14.11) (00:57:18)
  2020-12-04
    → browserslist@4.15.0 › caniuse-lite@^1.0.30001164(1.0.30001165) (15:33:32)
    → enhanced-resolve@5.4.0 › tapable@^2.0.0(2.2.0) (21:57:00)
All packages installed (80 packages installed from npm registry, used 6s(network 6s), speed 430.58kB/s, json 78(378.83kB), tarball 2.19MB)
[webpack@5.10.0] link /usr/local/bin/webpack@ -> /usr/local/lib/node_modules/webpack/bin/webpack.js
Downloading webpack-cli to /usr/local/lib/node_modules/webpack-cli_tmp
Copying /usr/local/lib/node_modules/webpack-cli_tmp/_webpack-cli@4.2.0@webpack-cli to /usr/local/lib/node_modules/webpack-cli
Installing webpack-cli's dependencies to /usr/local/lib/node_modules/webpack-cli/node_modules
[1/13] leven@^3.1.0 installed at node_modules/_leven@3.1.0@leven
[2/13] colorette@^1.2.1 installed at node_modules/_colorette@1.2.1@colorette
[3/13] interpret@^2.2.0 installed at node_modules/_interpret@2.2.0@interpret
[4/13] v8-compile-cache@^2.2.0 installed at node_modules/_v8-compile-cache@2.2.0@v8-compile-cache
[5/13] enquirer@^2.3.6 installed at node_modules/_enquirer@2.3.6@enquirer
[6/13] @webpack-cli/serve@^1.1.0 installed at node_modules/_@webpack-cli_serve@1.1.0@@webpack-cli/serve
[7/13] @webpack-cli/info@^1.1.0 installed at node_modules/_@webpack-cli_info@1.1.0@@webpack-cli/info
[8/13] webpack-merge@^4.2.2 installed at node_modules/_webpack-merge@4.2.2@webpack-merge
[9/13] rechoir@^0.7.0 installed at node_modules/_rechoir@0.7.0@rechoir
[10/13] command-line-usage@^6.1.0 installed at node_modules/_command-line-usage@6.1.1@command-line-usage
[11/13] execa@^4.1.0 installed at node_modules/_execa@4.1.0@execa
[12/13] import-local@^3.0.2 installed at node_modules/_import-local@3.0.2@import-local
[13/13] commander@^6.2.0 installed at node_modules/_commander@6.2.0@commander
All packages installed (62 packages installed from npm registry, used 5s(network 5s), speed 173.87kB/s, json 62(107.52kB), tarball 690.73kB)
[webpack-cli@4.2.0] link /usr/local/bin/webpack-cli@ -> /usr/local/lib/node_modules/webpack-cli/bin/cli.js
[ming@localhost node-v10.13.0]# webpack -v

webpack-cli 4.2.0

webpack 5.10.0

4、安装vue-cli

# cnpm install -g vue-cli   执行安装

#vue -V   查看版本信息

[ming@localhost node-v10.13.0]# cnpm install -g vue-cli
Downloading vue-cli to /usr/local/lib/node_modules/vue-cli_tmp
Copying /usr/local/lib/node_modules/vue-cli_tmp/_vue-cli@2.9.6@vue-cli to /usr/local/lib/node_modules/vue-cli
Installing vue-cli's dependencies to /usr/local/lib/node_modules/vue-cli/node_modules
[1/20] commander@^2.9.0 installed at node_modules/_commander@2.20.3@commander
[2/20] consolidate@^0.14.0 installed at node_modules/_consolidate@0.14.5@consolidate
[3/20] ora@^1.3.0 installed at node_modules/_ora@1.4.0@ora
[4/20] read-metadata@^1.0.0 installed at node_modules/_read-metadata@1.0.0@read-metadata
[5/20] rimraf@^2.5.0 existed at node_modules/_rimraf@2.7.1@rimraf
[6/20] semver@^5.1.0 installed at node_modules/_semver@5.7.1@semver
[7/20] tildify@^1.2.0 installed at node_modules/_tildify@1.2.0@tildify
[8/20] handlebars@^4.0.5 installed at node_modules/_handlebars@4.7.6@handlebars
[9/20] multimatch@^2.1.0 installed at node_modules/_multimatch@2.1.0@multimatch
[10/20] request@^2.67.0 installed at node_modules/_request@2.88.2@request
[11/20] coffee-script@1.12.7 existed at node_modules/_coffee-script@1.12.7@coffee-script
[12/20] uid@0.0.2 installed at node_modules/_uid@0.0.2@uid
[13/20] user-home@^2.0.0 installed at node_modules/_user-home@2.0.0@user-home
[14/20] minimatch@^3.0.0 installed at node_modules/_minimatch@3.0.4@minimatch
[15/20] async@^2.4.0 installed at node_modules/_async@2.6.3@async
[16/20] chalk@^2.1.0 installed at node_modules/_chalk@2.4.2@chalk
[17/20] validate-npm-package-name@^3.0.0 installed at node_modules/_validate-npm-package-name@3.0.0@validate-npm-package-name
[18/20] inquirer@^6.0.0 installed at node_modules/_inquirer@6.5.2@inquirer
[19/20] download-git-repo@^1.0.1 installed at node_modules/_download-git-repo@1.1.0@download-git-repo
[20/20] metalsmith@^2.1.0 installed at node_modules/_metalsmith@2.3.0@metalsmith
deprecate metalsmith@2.3.0 › gray-matter@2.1.1 › coffee-script@^1.12.4 CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
deprecate request@^2.67.0 request has been deprecated, see https://github.com/request/request/issues/3142
deprecate request@2.88.2 › har-validator@~5.1.3 this library is no longer supported
Recently updated (since 2020-12-03): 2 packages (detail see file /usr/local/lib/node_modules/vue-cli/node_modules/.recently_updates.txt)
  Today:
    → download-git-repo@1.1.0 › download@5.0.3 › caw@2.0.1 › get-proxy@2.1.0 › npm-conf@1.1.3 › config-chain@1.1.12 › ini@^1.3.4(1.3.7) (07:16:06)
  2020-12-08
    → metalsmith@2.3.0 › gray-matter@2.1.1 › js-yaml@^3.8.1(3.14.1) (03:45:10)
All packages installed (233 packages installed from npm registry, used 6s(network 6s), speed 846.11kB/s, json 220(480.32kB), tarball 4.55MB)
[vue-cli@2.9.6] link /usr/local/bin/vue@ -> /usr/local/lib/node_modules/vue-cli/bin/vue
[vue-cli@2.9.6] link /usr/local/bin/vue-init@ -> /usr/local/lib/node_modules/vue-cli/bin/vue-init
[vue-cli@2.9.6] link /usr/local/bin/vue-list@ -> /usr/local/lib/node_modules/vue-cli/bin/vue-list
[ming@localhost node-v10.13.0]# vue -V
2.9.6
 

5、使用vue-cli构建vue页面 

#vue init webpack vue-demo  

一路选择Y默认，等待下载完成

[ming@localhost ~]# vue init webpack vue-demo

? Project name y
? Project description y
? Author y
? 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 jest
? Setup e2e tests with Nightwatch? Yes
? Should we run `npm install` for you after the project has been created? (recommended) npm

   vue-cli · Generated "vue-demo".

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

npm WARN deprecated eslint-loader@1.9.0: This loader has been deprecated. Please use eslint-webpack-plugin
npm WARN deprecated extract-text-webpack-plugin@3.0.2: Deprecated. Please use https://github.com/webpack-contrib/mini-css-extract-plugin
npm WARN deprecated browserslist@2.11.3: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated core-js@2.6.12: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.
npm WARN deprecated bfj-node4@5.3.1: Switch to the `bfj` package for fixes and new features!
npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated debug@4.1.0: Debug versions >=3.2.0 <3.2.7 || >=4 <4.3.1 have a low-severity ReDos regression when used in a Node.js environment. It is recommended you upgrade to 3.2.7 or 4.3.1. (https://github.com/visionmedia/debug/issues/797)
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
npm WARN deprecated mkdirp@0.5.1: Legacy versions of mkdirp are no longer supported. Please update to mkdirp 1.x. (Note that the API surface has changed to use Promises in 1.x.)
npm WARN deprecated json3@3.3.2: Please use the native JSON object instead of JSON 3
npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN deprecated browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
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
npm WARN deprecated circular-json@0.3.3: CircularJSON is in maintenance only, flatted is its successor.
npm WARN deprecated left-pad@1.3.0: use String.prototype.padStart()
npm WARN deprecated request-promise-native@1.0.9: request-promise-native has been deprecated because it extends the now deprecated request package, see https://github.com/request/request/issues/3142
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated

> chromedriver@2.46.0 install /root/vue-demo/node_modules/chromedriver
> node install.js

Current existing ChromeDriver binary is unavailable, proceding with download and extraction.
Downloading from file:  https://chromedriver.storage.googleapis.com/2.46/chromedriver_linux64.zip
Saving to file: /root/vue-demo/node_modules/chromedriver/2.46/chromedriver/chromedriver_linux64.zip
ChromeDriver installation failed Error with http(s) request: Error: read ECONNRESET
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.2.3 (node_modules/sane/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@~2.1.2 (node_modules/chokidar/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
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 ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! chromedriver@2.46.0 install: `node install.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the chromedriver@2.46.0 install script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2020-12-10T08_28_17_177Z-debug.log

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

> y@1.0.0 lint /root/vue-demo
> eslint --ext .js,.vue src test/unit test/e2e/specs "--fix"

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

To get started:

  cd vue-demo
  npm run dev
  
Documentation can be found at https://vuejs-templates.github.io/webpack

[ming@localhost ~]# cd vue-demo
[ming@localhost vue-demo]# cnpm install
✔ Installed 58 packages
✔ Linked 93 latest versions
[1/1] scripts.install chromedriver@^2.27.2 run "node install.js", root: "/root/vue-demo/node_modules/_chromedriver@2.46.0@chromedriver"
Current existing ChromeDriver binary is unavailable, proceding with download and extraction.
Downloading from file:  https://cdn.npm.taobao.org/dist/chromedriver/2.46/chromedriver_linux64.zip
Saving to file: /tmp/2.46/chromedriver/chromedriver_linux64.zip
Received 784K...
Received 1568K...
Received 2352K...
Received 3136K...
Received 3920K...
Received 4704K...
Received 5277K total.
Extracting zip contents
Copying to target path /root/vue-demo/node_modules/_chromedriver@2.46.0@chromedriver/lib/chromedriver
Fixing file permissions
Done. ChromeDriver binary available at /root/vue-demo/node_modules/_chromedriver@2.46.0@chromedriver/lib/chromedriver/chromedriver
[1/1] scripts.install chromedriver@^2.27.2 finished in 2s
✔ Run 1 scripts
deprecate chromedriver@2.46.0 › request@^2.88.0 request has been deprecated, see https://github.com/request/request/issues/3142
deprecate chromedriver@2.46.0 › request@2.88.2 › har-validator@~5.1.3 this library is no longer supported
deprecate chromedriver@2.46.0 › tcp-port-used@1.0.1 › debug@4.1.0 Debug versions >=3.2.0 <3.2.7 || >=4 <4.3.1 have a low-severity ReDos regression when used in a Node.js environment. It is recommended you upgrade to 3.2.7 or 4.3.1. (https://github.com/visionmedia/debug/issues/797)
Recently updated (since 2020-12-03): 1 packages (detail see file /root/vue-demo/node_modules/.recently_updates.txt)
✔ All packages installed (100 packages installed from npm registry, used 7s(network 5s), speed 289.29kB/s, json 95(189.61kB), tarball 1.25MB)
[ming@localhost vue-demo]# cnpm run dev

> y@1.0.0 dev /root/vue-demo
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

 12% building modules 19/25 modules 6 active ...te&index=0!/root/vue-demo/src/App.vue{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.
 95% emitting                                                                         

 DONE  Compiled successfully in 10798ms                                                                                                                   4:30:25 PM

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

在浏览器输入：http://localhost:8080

（2020年12月10日更新）