Linux搭建VUE环境
一、Linux搭建VUE
1.1、node.js下载
首先我们需要下载node.js的安装包，下载的地址为https://nodejs.org/en/download/，具体如下：
获取到链接地址后，然后在Linux的环境就可以开始下载，下载的命令具体如下：
wget https://nodejs.org/dist/v16.13.1/node-v16.13.1-linux-x64.tar.xz
--2022-01-08 16:19:28-- https://nodejs.org/dist/v16.13.1/node-v16.13.1-linux-x64.tar.xz
Resolving nodejs.org (nodejs.org)... 104.20.22.46, 104.20.23.46, 2606:4700:10::6814:162e, ...
Connecting to nodejs.org (nodejs.org)|104.20.22.46|:443... connected.
HTTP request sent, awaiting response... 200 OK
Length: 21606428 (21M) [application/x-xz]
Saving to: ‘node-v16.13.1-linux-x64.tar.xz’
node-v16.13.1-lin 100%[===========>] 20.61M 2.01MB/s in 12s
2022-01-08 16:19:44 (1.76 MB/s) - ‘node-v16.13.1-linux-x64.tar.xz’ saved [21606428/21606428]下载成功后，进行解压，具体如下：
tar xvf node-v16.13.1-linux-x64.tar.xz解压成功后，把node.js的整体目录移动到/usr/local的目录下统一管理，具体操作的命令如下：
mv node-v16.13.1-linux-x64 /usr/local/nodejs1.2、配置环境变量
node.js安装成功后，在/etc/profile下配置node.js的环境变量，具体如下：
#node.js的环境
export PATH=/usr/local/nodejs/bin:$PATH环境变量配置成功后，可以输入如下进行验证，具体如下：
[root@centos-master ~]# node -v
v16.13.1
[root@centos-master ~]# npm -v
8.3.01.3、安装cnpm
下来安装cnpm，通过cnpm来安装vue，具体安装的命令如下：
npm install -g cnpm --registry=https://registry.npm.taobao.org
#执行如上的命令后，输出的信息结果信息如下
whoami
npm <cmd> -h quick help on <cmd>
npm -l display full usage info
npm faq commonly asked questions
npm help <term> search for help on <term>
npm help npm involved overview
Specify configs in the ini-formatted file:
/root/.cnpmrc
or on the command line via: npm <command> --key value
Config info can be viewed via: npm help config下来验证cnpm是否安装好，验证具体如下：
[root@centos-master ~]# cnpm -v
cnpm@7.1.0 (/usr/local/nodejs/lib/node_modules/cnpm/lib/parse_argv.js)
npm@6.14.15 (/usr/local/nodejs/lib/node_modules/cnpm/node_modules/npm/lib/npm.js)
node@16.13.1 (/usr/local/nodejs/bin/node)
npminstall@5.3.1 (/usr/local/nodejs/lib/node_modules/cnpm/node_modules/npminstall/lib/index.js)
prefix=/usr/local/nodejs
linux x64 4.18.0-348.7.1.el8_5.x86_64 1.4、安装vue
下来进行安装vue，具体安装过程如下：
cnpm install -g vue-cli
#执行如上的命令后，就会开始全局安装vue,输出信息如下
Downloading vue-cli to /usr/local/nodejs/lib/node_modules/vue-cli_tmp
Copying /usr/local/nodejs/lib/node_modules/vue-cli_tmp/_vue-cli@2.9.6@vue-cli to /usr/local/nodejs/lib/node_modules/vue-cli
Installing vue-cli's dependencies to /usr/local/nodejs/lib/node_modules/vue-cli/node_modules
[1/20] commander@^2.9.0 installed at node_modules/_commander@2.20.3@commander
[2/20] semver@^5.1.0 installed at node_modules/_semver@5.7.1@semver
[3/20] tildify@^1.2.0 installed at node_modules/_tildify@1.2.0@tildify
[4/20] coffee-script@1.12.7 installed at node_modules/_coffee-script@1.12.7@coffee-script
[5/20] user-home@^2.0.0 installed at node_modules/_user-home@2.0.0@user-home
[6/20] consolidate@^0.14.0 installed at node_modules/_consolidate@0.14.5@consolidate
[7/20] validate-npm-package-name@^3.0.0 installed at node_modules/_validate-npm-package-name@3.0.0@validate-npm-package-name
[8/20] uid@0.0.2 installed at node_modules/_uid@0.0.2@uid
[9/20] minimatch@^3.0.0 installed at node_modules/_minimatch@3.0.4@minimatch
[10/20] read-metadata@^1.0.0 installed at node_modules/_read-metadata@1.0.0@read-metadata
[11/20] handlebars@^4.0.5 installed at node_modules/_handlebars@4.7.7@handlebars
[12/20] multimatch@^2.1.0 installed at node_modules/_multimatch@2.1.0@multimatch
[13/20] chalk@^2.1.0 installed at node_modules/_chalk@2.4.2@chalk
[14/20] rimraf@^2.5.0 installed at node_modules/_rimraf@2.7.1@rimraf
[15/20] async@^2.4.0 installed at node_modules/_async@2.6.3@async
[16/20] ora@^1.3.0 installed at node_modules/_ora@1.4.0@ora
[17/20] metalsmith@^2.1.0 installed at node_modules/_metalsmith@2.3.0@metalsmith
[18/20] request@^2.67.0 installed at node_modules/_request@2.88.2@request
[19/20] download-git-repo@^1.0.1 installed at node_modules/_download-git-repo@1.1.0@download-git-repo
[20/20] inquirer@^6.0.0 installed at node_modules/_inquirer@6.5.2@inquirer
deprecate request@^2.67.0 request has been deprecated, see https://github.com/request/request/issues/3142
deprecate coffee-script@1.12.7 CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
deprecate request@2.88.2 › har-validator@~5.1.3 this library is no longer supported
deprecate request@2.88.2 › uuid@^3.3.2 Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.
Recently updated (since 2022-01-01): 2 packages (detail see file /usr/local/nodejs/lib/node_modules/vue-cli/node_modules/.recently_updates.txt)
Today:
→ request@2.88.2 › http-signature@1.2.0 › sshpk@^1.7.0(1.17.0) (04:37:37)
2022-01-05
→ metalsmith@2.3.0 › co-fs-extra@1.2.1 › fs-extra@0.26.7 › graceful-fs@^4.1.2(4.2.9) (09:13:07)
All packages installed (234 packages installed from npm registry, used 4s(network 4s), speed 1.25MB/s, json 220(628.31KB), tarball 4.56MB)
[vue-cli@2.9.6] link /usr/local/nodejs/bin/vue@ -> /usr/local/nodejs/lib/node_modules/vue-cli/bin/vue
[vue-cli@2.9.6] link /usr/local/nodejs/bin/vue-init@ -> /usr/local/nodejs/lib/node_modules/vue-cli/bin/vue-init
[vue-cli@2.9.6] link /usr/local/nodejs/bin/vue-list@ -> /usr/local/nodejs/lib/node_modules/vue-cli/bin/vue-list
[root@centos-master ~]# 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]1.5、验证vue环境
安装成功后，下来可以验证vue的环境，输入如下命令来验证，具体如下：
[root@centos-master ~]# 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]1.6、创建vue的项目
在vue环境搭建好的基础上，开始创建一个vue的项目来进行测试，具体如下：
vue init webpack vue-demo
#执行如上命令后，输出信息
/bin/sh: git: command not found
? Project name vue-demo
? Project description A Vue.js project
? Author
? 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 creat
ed? (recommended) npm
vue-cli · Generated "vue-demo".
# Installing project dependencies ...
# ========================
npm WARN deprecated flatten@1.0.3: flatten is deprecated in favor of utility frameworks such as lodash.
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 urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
npm WARN deprecated eslint-loader@1.9.0: This loader has been deprecated. Please use eslint-webpack-plugin
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated json3@3.3.2: Please use the native JSON object instead of JSON 3
npm WARN deprecated left-pad@1.3.0: use String.prototype.padStart()
npm WARN deprecated browserslist@2.11.3: 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
npm WARN deprecated html-webpack-plugin@2.30.1: out of support
npm WARN deprecated sane@2.5.2: some dependency vulnerabilities fixed, support for node < 10 dropped, and newer ECMAScript syntax/features added
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 chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated querystring@0.2.0: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
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 uuid@3.4.0: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.
npm WARN deprecated babel-eslint@8.2.6: babel-eslint is now @babel/eslint-parser. This package will no longer receive updates.
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 request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated bfj-node4@5.3.1: Switch to the `bfj` package for fixes and new features!
npm WARN deprecated uglify-es@3.3.9: support for ECMAScript is superseded by `uglify-js` as of v3.13.0
npm WARN deprecated svgo@0.7.2: This SVGO version is no longer supported. Upgrade to v2.x.x.
npm WARN deprecated svgo@1.3.2: This SVGO version is no longer supported. Upgrade to v2.x.x.
npm WARN deprecated core-js@2.6.12: core-js@<3.4 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Please, upgrade your dependencies to the actual version of core-js.
added 1825 packages, and audited 1826 packages in 2m
64 packages are looking for funding
run `npm fund` for details
135 vulnerabilities (12 low, 90 moderate, 27 high, 6 critical)
To address issues that do not require attention, run:
npm audit fix
To address all issues (including breaking changes), run:
npm audit fix --force
Run `npm audit` for details.
Running eslint --fix to comply with chosen preset rules...
# ========================
> vue-demo@1.0.0 lint
> 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下来可以开始启动项目，具体安装如上的操作进行，具体操作过程如下：
[root@centos-master ~]# cd vue-demo/
[root@centos-master vue-demo]# npm run dev
> vue-demo@1.0.0 dev
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
(node:2197465) [DEP0111] DeprecationWarning: Access to process.binding('http_parser') is deprecated.
(Use `node --trace-deprecation ...` to show where the warning was created)
10% building modules 0/1 modules 1 active ... webpack/hot/dev-server 10% building modules 1/2 modules 1 active ...ode_modules/webpack/hot/ 10% building modules 2/3 modules 1 active ...client/index.js?http://l 10% building modules 2/4 modules 2 active ...js??ref--0!/root/vue-dem 10% building modules 2/5 modules 3 active ...-demo/node_modules/webpa 10% building modules 2/6 modules 4 active ...dules/webpack/hot/log-ap 10% building modules 2/7 modules 5 active ...o/node_modules/webpack/h 10% building modules 3/7 modules 4 active ...o/node_modules/webpack/h 10% building modules 4/7 modules 3 active ...o/node_modules/webpack/h 10% building modules 5/7 modules 2 active ...o/node_modules/webpack/h 10% building modules 6/7 modules 1 active ...o/node_modules/webpack/h 10% building modules 7/8 modules 1 active .../webpack/hot nonrecursiv 10% building modules 7/9 modules 2 active ...s/webpack-dev-server/cli 10% building modules 7/10 modules 3 active .../webpack-dev-server/cli 10% building modules 8/10 modules 2 active .../webpack-dev-server/cli 10% building modules 8/11 modules 3 active /root/vue-demo/node_module 11% building modules 9/11 modules 2 active /root/vue-demo/node_module 11% building modules 10/11 modules 1 active /root/vue-demo/node_modul 11% building modules 10/12 modules 2 active ...demo/node_modules/vue/ 11% building modules 10/13 modules 3 active ...ue-demo/node_modules/e 11% building modules 11/13 modules 2 active ...ue-demo/node_modules/e 11% building modules 12/13 modules 1 active ...ue-demo/node_modules/e 11% building modules 12/14 modules 2 active ...ode_modules/webpack/bu 11% building modules 13/14 modules 1 active ...ue-demo/node_modules/e 11% building modules 14/15 modules 1 active ...-0!/root/vue-demo/src/ 11% building modules 14/16 modules 2 active /root/vue-demo/node_modul 11% building modules 14/17 modules 3 active ...node_modules/loglevel/ 11% building modules 14/18 modules 4 active ...ser/node_modules/punyc 11% building modules 14/19 modules 5 active ...node_modules/querystri 11% building modules 14/20 modules 6 active ...rver/node_modules/stri 11% building modules 15/20 modules 5 active ...rver/node_modules/stri 11% building modules 15/21 modules 6 active ..._modules/sockjs-client 11% building modules 16/21 modules 5 active ..._modules/sockjs-client 12% building modules 17/21 modules 4 active ..._modules/sockjs-client 12% building modules 17/22 modules 5 active ...js??ref--0!/root/vue-d 12% building modules 18/22 modules 4 active ...js??ref--0!/root/vue-d 12% building modules 18/23 modules 5 active ...ode_modules/webpack/bu 12% building modules 19/23 modules 4 active ...js??ref--0!/root/vue-d 12% building modules 20/23 modules 3 active ...js??ref--0!/root/vue-d 12% building modules 21/23 modules 2 active ...js??ref--0!/root/vue-d 12% building modules 22/23 modules 1 active ...js??ref--0!/root/vue-d 12% building modules 22/24 modules 2 active ...-demo/node_modules/ans 12% building modules 22/25 modules 3 active ...de_modules/html-entiti 12% building modules 23/25 modules 2 active ...de_modules/html-entiti 12% building modules 23/26 modules 3 active ...ode_modules/querystrin 12% building modules 23/27 modules 4 active ...ode_modules/querystrin 12% building modules 23/28 modules 5 active ...ue-demo/src/components 12% building modules 24/28 modules 4 active ...ue-demo/src/components 13% building modules 25/28 modules 3 active ...ue-demo/src/components 13% building modules 26/28 modules 2 active ...ue-demo/src/components 13% building modules 27/28 modules 1 active ...ue-demo/src/components 13% building modules 27/29 modules 2 active ...pt&index=0!/root/vue-d 13% building modules 28/29 modules 1 active ...ue-demo/src/components 13% building modules 28/30 modules 2 active ...ue-loader/lib/componen 13% building modules 28/31 modules 3 active ...te&index=0!/root/vue-demo/src/App.vue{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.
13% building modules 29/31 modules 2 active ...ue-loader/lib/componen 13% building modules 30/31 modules 1 active ...ue-loader/lib/componen 13% building modules 30/32 modules 2 active ...ue-demo/src/components 13% building modules 30/33 modules 3 active ...ue-demo/src/components 13% building modules 31/33 modules 2 active ...ue-demo/src/components 13% building modules 32/33 modules 1 active ...ue-loader/lib/componen 13% building modules 32/34 modules 2 active ...les/html-entities/lib/ 13% building modules 32/35 modules 3 active ...s/html-entities/lib/ht 13% building modules 32/36 modules 4 active ...s/html-entities/lib/ht 13% building modules 33/36 modules 3 active ...s/html-entities/lib/ht 13% building modules 33/37 modules 4 active ...les/vue-router/dist/vu 14% building modules 34/37 modules 3 active ...les/vue-router/dist/vu 14% building modules 35/37 modules 2 active ...les/vue-router/dist/vu 14% building modules 36/37 modules 1 active ...les/vue-router/dist/vu 14% building modules 37/38 modules 1 active ...rver/node_modules/ansi 14% building modules 37/39 modules 2 active ...es&index=0!/root/vue-d 14% building modules 38/39 modules 1 active ...rver/node_modules/ansi 14% building modules 38/40 modules 2 active ...ue-demo/src/components 14% building modules 39/40 modules 1 active ...rver/node_modules/ansi 14% building modules 39/41 modules 2 active ...es&index=0!/root/vue-d 14% building modules 39/42 modules 3 active ...ue-demo/src/components 14% building modules 39/43 modules 4 active ...ules/vue-hot-reload-ap 14% building modules 39/44 modules 5 active .../html-entities/lib/sur 14% building modules 40/44 modules 4 active .../html-entities/lib/sur 14% building modules 40/45 modules 5 active ...e-style-loader/lib/add 14% building modules 41/45 modules 4 active ...e-style-loader/lib/add 15% building modules 42/45 modules 3 active ...e-style-loader/lib/add 15% building modules 43/45 modules 2 active ...ue-demo/src/components 15% building modules 43/46 modules 3 active ...-3!/root/vue-demo/src/ 15% building modules 43/47 modules 4 active .../vue-style-loader/lib/ 15% building modules 44/47 modules 3 active .../vue-style-loader/lib/ 15% building modules 45/47 modules 2 active .../vue-style-loader/lib/ 15% building modules 46/47 modules 1 active .../vue-style-loader/lib/ 15% building modules 47/48 modules 1 active ...de_modules/css-loader/ 95% emitting
DONE Compiled successfully in 2895ms 4:59:55 PM
I Your application is running here: http://localhost:8080
欢迎关注微信公众号“Python自动化测试”
