前端框架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' ????????????????????????е????

?????????

? 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,然后訪問生成的管理網址，瀏覽器訪問該網址，然后在項目管理頁面，選擇導入，就可以導入項目，進行管理，比如運行，安裝依賴等?？聪旅娴慕貓D，我們開啟了創建的項目，地址是http://localhost:8080,我們在資源管理找到該目錄地址，在dos窗口cd進入該項目目錄，用npm run serve 命令行也可以繼續管理開發項目。