前端框架vue3的node安装及项目构建的4种方法

前端框架vue3的node安装及项目构建的4种方法

C:\Users\Mac\Documents\newlifewyq\技术精英-source\vue\vue3pro>cnpm install vue@next

√ Installed 1 packages

√ Linked 21 latest versions

√ Run 0 scripts

√ All packages installed (21 packages installed from npm registry, used 3s(network 3s), speed 1.23MB/s, json 21(455.83KB), tarball 3.07MB, manifests cache hit 0, etag hit 0 / miss 0)

C:\Users\Mac\Documents\newlifewyq\技术精英-source\vue\vue3pro>vue init webpack runoob-vue3-test

  Command vue init requires a global addon to be installed.

  Please run npm i -g @vue/cli-init and try again.

C:\Users\Mac\Documents\newlifewyq\技术精英-source\vue\vue3pro>npm i -g @vue/cli-init#此命令执行后，根目录生成了node_modules 文件夹（子目录有很多文件夹和文件）和package.json文件（内容为 {

  "dependencies": {

    "vue": "^3.2.36"

  }

}

）

Vue项目构建方法1：介绍一下使用vue init方法构建vue项目：

C:\Users\Mac\Documents\newlifewyq\技术精英-source\vue\vue3pro>vue init webpack runoob-vue3-test#此命令执行后，npm执行目录生产一个runoob-vue3-test目录，也就是这里是定义了一个新建项目的目录名，在该命令执行中的交互式命令行中会让我们定义项目名，这个才是项目名（即package.json文件中的name属性的值），是我们用当前命令构建的vue项目根文件夹。目录结构参见下图：

编辑

'git' �����ڲ����ⲿ���Ҳ���ǿ����еij���

�������ļ�

? Project name runoob-vue3-wyq

? Project description new project

? Author wyq

? 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 "runoob-vue3-test".

# Installing project dependencies ...

# ========================

npm WARN deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated

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 resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated

npm WARN deprecated flatten@1.0.3: flatten is deprecated in favor of utility frameworks such as lodash.

npm WARN deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated

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 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 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 request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142

npm WARN deprecated left-pad@1.3.0: use String.prototype.padStart()

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 circular-json@0.3.3: CircularJSON is in maintenance only, flatted is its successor.

npm WARN deprecated eslint-loader@1.9.0: This loader has been deprecated. Please use eslint-webpack-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 extract-text-webpack-plugin@3.0.2: Deprecated. Please use https://github.com/webpack-contrib/mini-css-extract-plugin

npm WARN deprecated chokidar@2.1.8: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies

npm WARN deprecated uglify-es@3.3.9: support for ECMAScript is superseded by `uglify-js` as of v3.13.0

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 chokidar@2.1.8: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies

npm WARN deprecated json3@3.3.2: Please use the native JSON object instead of JSON 3

npm WARN deprecated querystring@0.2.0: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.

npm WARN deprecated bfj-node4@5.3.1: Switch to the `bfj` package for fixes and new features!

npm WARN deprecated browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.

npm WARN deprecated html-webpack-plugin@2.30.1: out of support

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 svgo@0.7.2: This SVGO version is no longer supported. Upgrade to v2.x.x.

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 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 1833 packages, and audited 1834 packages in 3m

70 packages are looking for funding

  run `npm fund` for details

122 vulnerabilities (13 low, 63 moderate, 33 high, 13 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...

# ========================

> runoob-vue3-wyq@1.0.0 lint

> eslint --ext .js,.vue src test/unit test/e2e/specs "--fix"

# Project initialization finished!

# ========================

To get started:

  cd runoob-vue3-test

  npm run dev

Documentation can be found at https://vuejs-templates.github.io/webpack

C:\Users\Mac\Documents\newlifewyq\技术精英-source\vue\vue3pro>

C:\Users\Mac\Documents\newlifewyq\技术精英-source\vue\vue3pro>cd runoob-vue3-test

C:\Users\Mac\Documents\newlifewyq\技术精英-source\vue\vue3pro\runoob-vue3-test>cnpm run dev #启动nodejs环境服务，dev为开发模式，我们在package.json文件中可以看到有devDependencies 和dependencies属性，这里加载的是devDependencies的依赖，当我们实际npm build 项目的时候，应该会加载dependencies依赖（有待核实）

> runoob-vue3-wyq@1.0.0 dev C:\Users\Mac\Documents\newlifewyq\技术精英-source\vue\vue3pro\runoob-vue3-test

> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

(node:380) [DEP0111] DeprecationWarning: Access to process.binding('http_parser') is deprecated.

(Use `node --trace-deprecation ...` to show where the warning was created)

 13% building modules 29/31 modules 2 active ...\vue3pro\runoob-vue3-test\src\App.vue{ parse 95% emitting

 DONE  Compiled successfully in 6796ms                                                                                                                                   19:47:35

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

项目开发完成后，开始打包，生成打包文件（生成到运行目录下的disk目录中，打包之前可以先把本文件夹清空，一般程序会自动清空该文件夹然后再写入文件），打包的意义在于将我们编写的前端文件，生成js,css,html等浏览器可以识别的文件（因为你写程序的时候可能会写一些.vue为后缀的文件），且用webpack等模块打包，效率极高，可以将多个js，css文件等合并，只需要浏览器一次性加载少数几个js，css文件即可，无需大规模加载很多静态文件，从而加快用户响应速度。打包完成后，我们将disk目录下的文件上传到我们的生产服务器就可以运行啦（nginx，apache等都可以，我们打包的文件仅仅是一些静态js，css，html文件，因此无需配置nodejs环境，当然如果你想用nodejs作为web服务器的话当然也可以配置该环境）

C:\Users\Mac\Documents\newlifewyq\技术精英-source\vue\vue3pro\runoob-vue3-test>cnpm run build

> runoob-vue3-wyq@1.0.0 build C:\Users\Mac\Documents\newlifewyq\技术精英-source\vue\vue3pro\runoob-vue3-test

> node build/build.js

- building for production...(node:15224) Warning: Accessing non-existent property 'cat' of module exports inside circular dependency

(Use `node --trace-warnings ...` to show where the warning was created)

(node:15224) Warning: Accessing non-existent property 'cd' of module exports inside circular dependency

(node:15224) Warning: Accessing non-existent property 'chmod' of module exports inside circular dependency

(node:15224) Warning: Accessing non-existent property 'cp' of module exports inside circular dependency

(node:15224) Warning: Accessing non-existent property 'dirs' of module exports inside circular dependency

(node:15224) Warning: Accessing non-existent property 'pushd' of module exports inside circular dependency

(node:15224) Warning: Accessing non-existent property 'popd' of module exports inside circular dependency

(node:15224) Warning: Accessing non-existent property 'echo' of module exports inside circular dependency

(node:15224) Warning: Accessing non-existent property 'tempdir' of module exports inside circular dependency

(node:15224) Warning: Accessing non-existent property 'pwd' of module exports inside circular dependency

(node:15224) Warning: Accessing non-existent property 'exec' of module exports inside circular dependency

(node:15224) Warning: Accessing non-existent property 'ls' of module exports inside circular dependency

(node:15224) Warning: Accessing non-existent property 'find' of module exports inside circular dependency

(node:15224) Warning: Accessing non-existent property 'grep' of module exports inside circular dependency

(node:15224) Warning: Accessing non-existent property 'head' of module exports inside circular dependency

(node:15224) Warning: Accessing non-existent property 'ln' of module exports inside circular dependency

(node:15224) Warning: Accessing non-existent property 'mkdir' of module exports inside circular dependency

(node:15224) Warning: Accessing non-existent property 'rm' of module exports inside circular dependency

(node:15224) Warning: Accessing non-existent property 'mv' of module exports inside circular dependency

(node:15224) Warning: Accessing non-existent property 'sed' of module exports inside circular dependency

(node:15224) Warning: Accessing non-existent property 'set' of module exports inside circular dependency

(node:15224) Warning: Accessing non-existent property 'sort' of module exports inside circular dependency

(node:15224) Warning: Accessing non-existent property 'tail' of module exports inside circular dependency

(node:15224) Warning: Accessing non-existent property 'test' of module exports inside circular dependency

(node:15224) Warning: Accessing non-existent property 'to' of module exports inside circular dependency

(node:15224) Warning: Accessing non-existent property 'toEnd' of module exports inside circular dependency

(node:15224) Warning: Accessing non-existent property 'touch' of module exports inside circular dependency

(node:15224) Warning: Accessing non-existent property 'uniq' of module exports inside circular dependency

(node:15224) Warning: Accessing non-existent property 'which' of module exports inside circular dependency

Hash: f278a3cebc1d8d3cf3b2

Version: webpack 3.12.0

Time: 12114ms

                                                  Asset       Size  Chunks             Chunk Names

               static/js/vendor.21cfee6ab1ded878cd2a.js     124 kB       0  [emitted]  vendor

                  static/js/app.cec607889d5010004e4e.js    11.6 kB       1  [emitted]  app

             static/js/manifest.2ae2e69a05c33dfc65f8.js  857 bytes       2  [emitted]  manifest

    static/css/app.e8e1f5bcf958e334db804acdef4df120.css  432 bytes       1  [emitted]  app

static/css/app.e8e1f5bcf958e334db804acdef4df120.css.map  797 bytes          [emitted]

           static/js/vendor.21cfee6ab1ded878cd2a.js.map     627 kB       0  [emitted]  vendor

              static/js/app.cec607889d5010004e4e.js.map    22.2 kB       1  [emitted]  app

         static/js/manifest.2ae2e69a05c33dfc65f8.js.map    4.97 kB       2  [emitted]  manifest

                                             index.html  517 bytes          [emitted]

  Build complete.

  Tip: built files are meant to be served over an HTTP server.

  Opening index.html over file:// won't work.

C:\Users\Mac\Documents\newlifewyq\技术精英-source\vue\vue3pro\runoob-vue3-test>

Vue项目构建方法2：介绍一下使用npm init @vitejs/app方法构建vue项目：该方法不仅可以构建vue，还可以构建react等前端框架项目，创建命令执行的交互式界面可以选择构建什么前端框架的项目。

C:\Users\Mac\Documents\newlifewyq\技术精英-source\vue\vue3pro>cnpm init @vitejs/app runoob-vue3-test2  #运行后，会在运行目录生产一个init文件夹，这个init文件夹就是新建的项目根目录

npx: installed 7 in 7.299s

@vitejs/create-app is deprecated, use npm init vite instead

√ Select a framework: » vue

√ Select a variant: » vue

Scaffolding project in C:\Users\Mac\Documents\newlifewyq\技术精英-source\vue\vue3pro\init...

Done. Now run:

  cd init

  npm install

  npm run dev

   ╭────────────────────────────────────────────────────────────────╮

   │                                                                │

   │     New major version of npm available! 6.14.17 -> 8.12.1      │

   │   Changelog: https://github.com/npm/cli/releases/tag/v8.12.1   │

   │               Run npm install -g npm to update!                │

   │                                                                │

   ╰────────────────────────────────────────────────────────────────╯

C:\Users\Mac\Documents\newlifewyq\技术精英-source\vue\vue3pro>cd init

C:\Users\Mac\Documents\newlifewyq\技术精英-source\vue\vue3pro\init>npm install #项目目录

added 32 packages, and audited 33 packages in 14s

4 packages are looking for funding

  run `npm fund` for details

found 0 vulnerabilities

C:\Users\Mac\Documents\newlifewyq\技术精英-source\vue\vue3pro\init>npm run dev

> init@0.0.0 dev

> vite

  vite v2.9.9 dev server running at:

  > Local: http://localhost:3000/

  > Network: use `--host` to expose

  ready in 1024ms.

Vue项目构建方法3：介绍一下使用vue create 方法构建vue项目：本方法可以选择用vue2或vue3构建，在执行交互式命令的时候可以选择

C:\Users\Mac\Documents\newlifewyq\技术精英-source\vue\vue3pro\runoob-vue3-test>vue create runoob-vue3-app  #在运行目录下生产runoob-vue3-app目录为项目根文件夹

?  Your connection to the default npm registry seems to be slow.

   Use https://registry.npmmirror.com for faster installation? Yes

Vue CLI v5.0.4

? Please pick a preset: Default ([Vue 3] babel, eslint)

Vue CLI v5.0.4

✨  Creating project in C:\Users\Mac\Documents\newlifewyq\技术精英-source\vue\vue3pro\runoob-vue3-test\runoob-vue3-app.

⚙️  Installing CLI plugins. This might take a while...

added 841 packages in 1m

���  Invoking generators...

���  Installing additional dependencies...

added 95 packages in 11s

⚓  Running completion hooks...

���  Generating README.md...

���  Successfully created project runoob-vue3-app.

���  Get started with the following commands:

 $ cd runoob-vue3-app

 $ npm run serve

C:\Users\Mac\Documents\newlifewyq\技术精英-source\vue\vue3pro\runoob-vue3-test>cd runoob-vue3-app  #进入我们构建的项目目录

C:\Users\Mac\Documents\newlifewyq\技术精英-source\vue\vue3pro\runoob-vue3-test\runoob-vue3-app>npm run serve

> runoob-vue3-app@0.1.0 serve

> vue-cli-service serve

 INFO  Starting development server...

 DONE  Compiled successfully in 10317ms                                                                                                                                  20:56:00

  App running at:

  - Local:   http://localhost:8080/

  - Network: http://192.168.1.4:8080/

  Note that the development build is not optimized.

  To create a production build, run npm run build.C:\Users\Mac\Documents\newlifewyq\技术精英-source\vue\vue3pro\pr2-vue3-vueui>npm run serve

> pr2-vue3-vueui@0.1.0 serve

> vue-cli-service serve

 INFO  Starting development server...

 DONE  Compiled successfully in 10374ms                                                                         21:54:33

  App running at:

  - Local:   http://localhost:8080/

  - Network: http://192.168.1.4:8080/

  Note that the development build is not optimized.

  To create a production build, run npm run build.

Vue项目构建方法4：vue ui 可视化构建

C:\Users\Mac\Documents\newlifewyq\技术精英-source\vue\vue3pro>vue ui#执行该命令，看到下面弹出的地址，访问下面的地址，就是一个用浏览器访问的项目构建站点，可以选择项目目录，包管理工具等，新建一个项目，新建完成后，我们可以用可视化的方式运行（相当于在项目根目录执行 npm run serve）我们可以终止当前的交互命令ctry+c，注意终止后，项目管理可视化工具将不可用，当然我们还可以重新用vue ui打开该可视化工具，通过项目管理页面-导入项目，来重新管理某个vue项目。

���  Starting GUI...

���  Ready onhttp://localhost:8001

运行项目：单击任务-运行即可，本vue ui 可视化页面可以管理多个项目，我们每次需要用可视化方式来管理依赖（安装依赖等），插件的时候，就可以直接输入 vue ui,然后访问生成的管理网址，浏览器访问该网址，然后在项目管理页面，选择导入，就可以导入项目，进行管理，比如运行，安装依赖等。看下面的截图，我们开启了创建的项目，地址是http://localhost:8080,我们在资源管理找到该目录地址，在dos窗口cd进入该项目目录，用npm run serve 命令行也可以继续管理开发项目。

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 206,126评论 6赞 481
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 88,254评论 2赞 382
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 152,445评论 0赞 341
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 55,185评论 1赞 278
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 64,178评论 5赞 371
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,970评论 1赞 284
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,276评论 3赞 399
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,927评论 0赞 259
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 43,400评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,883评论 2赞 323
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,997评论 1赞 333
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,646评论 4赞 322
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,213评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,204评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,423评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,423评论 2赞 352
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,722评论 2赞 345

推荐阅读更多精彩内容