|
C:\Users\Mac\Documents\newlifewyq\技術(shù)精英-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\技術(shù)精英-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\技術(shù)精英-source\vue\vue3pro>npm i -g @vue/cli-init #此命令執(zhí)行后，根目錄生成了node_modules 文件夾（子目錄有很多文件夾和文件）和package.json文件（內(nèi)容為 { "dependencies": { "vue": "^3.2.36" } } ） Vue項(xiàng)目構(gòu)建方法1：介紹一下使用vue init方法構(gòu)建vue項(xiàng)目： C:\Users\Mac\Documents\newlifewyq\技術(shù)精英-source\vue\vue3pro>vue init webpack runoob-vue3-test #此命令執(zhí)行后,，npm執(zhí)行目錄生產(chǎn)一個(gè)runoob-vue3-test目錄，也就是這里是定義了一個(gè)新建項(xiàng)目的目錄名,，在該命令執(zhí)行中的交互式命令行中會(huì)讓我們定義項(xiàng)目名,，這個(gè)才是項(xiàng)目名（即package.json文件中的name屬性的值），是我們用當(dāng)前命令構(gòu)建的vue項(xiàng)目根文件夾,。目錄結(jié)構(gòu)參見(jiàn)下圖：
'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 [email protected]: See https://github.com/lydell/source-map-url#deprecated npm WARN deprecated [email protected]: Please see https://github.com/lydell/urix#deprecated npm WARN deprecated [email protected]: this library is no longer supported npm WARN deprecated [email protected]: https://github.com/lydell/resolve-url#deprecated npm WARN deprecated [email protected]: flatten is deprecated in favor of utility frameworks such as lodash. npm WARN deprecated [email protected]: See https://github.com/lydell/source-map-resolve#deprecated npm WARN deprecated [email protected]: 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 [email protected]: 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 [email protected]: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v/blog/math-random for details. npm WARN deprecated [email protected]: request has been deprecated, see https://github.com/request/request/issues/3142 npm WARN deprecated [email protected]: use String.prototype.padStart() npm WARN deprecated [email protected]: some dependency vulnerabilities fixed, support for node < 10 dropped, and newer ECMAScript syntax/features added npm WARN deprecated [email protected]: CircularJSON is in maintenance only, flatted is its successor. npm WARN deprecated [email protected]: This loader has been deprecated. Please use eslint-webpack-plugin npm WARN deprecated [email protected]: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools. npm WARN deprecated [email protected]: Deprecated. Please use https://github.com/webpack-contrib/mini-css-extract-plugin npm WARN deprecated [email protected]: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies npm WARN deprecated [email protected]: support for ECMAScript is superseded by `uglify-js` as of v3.13.0 npm WARN deprecated [email protected]: babel-eslint is now @babel/eslint-parser. This package will no longer receive updates. npm WARN deprecated [email protected]: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies npm WARN deprecated [email protected]: Please use the native JSON object instead of JSON 3 npm WARN deprecated [email protected]: The querystring API is considered Legacy. new code should use the URLSearchParams API instead. npm WARN deprecated [email protected]: Switch to the `bfj` package for fixes and new features! npm WARN deprecated [email protected]: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools. npm WARN deprecated [email protected]: out of support npm WARN deprecated [email protected]: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools. npm WARN deprecated [email protected]: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools. npm WARN deprecated [email protected]: This SVGO version is no longer supported. Upgrade to v2.x.x. npm WARN deprecated [email protected]: 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 [email protected]: This SVGO version is no longer supported. Upgrade to v2.x.x. npm WARN deprecated [email protected]: 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... # ======================== > [email protected] 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./webpack C:\Users\Mac\Documents\newlifewyq\技術(shù)精英-source\vue\vue3pro> C:\Users\Mac\Documents\newlifewyq\技術(shù)精英-source\vue\vue3pro>cd runoob-vue3-test C:\Users\Mac\Documents\newlifewyq\技術(shù)精英-source\vue\vue3pro\runoob-vue3-test>cnpm run dev #啟動(dòng)nodejs環(huán)境服務(wù),，dev為開(kāi)發(fā)模式,，我們?cè)趐ackage.json文件中可以看到有devDependencies 和dependencies屬性，這里加載的是devDependencies的依賴,，當(dāng)我們實(shí)際npm build 項(xiàng)目的時(shí)候,，應(yīng)該會(huì)加載dependencies依賴（有待核實(shí)） > [email protected] dev C:\Users\Mac\Documents\newlifewyq\技術(shù)精英-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 項(xiàng)目開(kāi)發(fā)完成后，開(kāi)始打包,，生成打包文件（生成到運(yùn)行目錄下的disk目錄中,，打包之前可以先把本文件夾清空，一般程序會(huì)自動(dòng)清空該文件夾然后再寫入文件）,，打包的意義在于將我們編寫的前端文件,，生成js,css,html等瀏覽器可以識(shí)別的文件（因?yàn)槟銓懗绦虻臅r(shí)候可能會(huì)寫一些.vue為后綴的文件），且用webpack等模塊打包,，效率極高,，可以將多個(gè)js，css文件等合并,，只需要瀏覽器一次性加載少數(shù)幾個(gè)js,，css文件即可，無(wú)需大規(guī)模加載很多靜態(tài)文件,，從而加快用戶響應(yīng)速度,。打包完成后，我們將disk目錄下的文件上傳到我們的生產(chǎn)服務(wù)器就可以運(yùn)行啦（nginx,，apache等都可以,，我們打包的文件僅僅是一些靜態(tài)js，css,，html文件,，因此無(wú)需配置nodejs環(huán)境，當(dāng)然如果你想用nodejs作為web服務(wù)器的話當(dāng)然也可以配置該環(huán)境） C:\Users\Mac\Documents\newlifewyq\技術(shù)精英-source\vue\vue3pro\runoob-vue3-test>cnpm run build > [email protected] build C:\Users\Mac\Documents\newlifewyq\技術(shù)精英-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\技術(shù)精英-source\vue\vue3pro\runoob-vue3-test> Vue項(xiàng)目構(gòu)建方法2：介紹一下使用npm init @vitejs/app方法構(gòu)建vue項(xiàng)目：該方法不僅可以構(gòu)建vue,，還可以構(gòu)建react等前端框架項(xiàng)目,，創(chuàng)建命令執(zhí)行的交互式界面可以選擇構(gòu)建什么前端框架的項(xiàng)目。 C:\Users\Mac\Documents\newlifewyq\技術(shù)精英-source\vue\vue3pro>cnpm init @vitejs/app runoob-vue3-test2 #運(yùn)行后,，會(huì)在運(yùn)行目錄生產(chǎn)一個(gè)init文件夾,，這個(gè)init文件夾就是新建的項(xiàng)目根目錄 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\技術(shù)精英-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\技術(shù)精英-source\vue\vue3pro>cd init C:\Users\Mac\Documents\newlifewyq\技術(shù)精英-source\vue\vue3pro\init>npm install #項(xiàng)目目錄 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\技術(shù)精英-source\vue\vue3pro\init>npm run dev > [email protected] dev > vite vite v2.9.9 dev server running at: > Local: http://localhost:3000/ > Network: use `--host` to expose ready in 1024ms. Vue項(xiàng)目構(gòu)建方法3：介紹一下使用vue create 方法構(gòu)建vue項(xiàng)目：本方法可以選擇用vue2或vue3構(gòu)建，在執(zhí)行交互式命令的時(shí)候可以選擇 C:\Users\Mac\Documents\newlifewyq\技術(shù)精英-source\vue\vue3pro\runoob-vue3-test>vue create runoob-vue3-app #在運(yùn)行目錄下生產(chǎn)runoob-vue3-app目錄為項(xiàng)目根文件夾 ? Your connection to the default npm registry seems to be slow. Use https://registry. 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\技術(shù)精英-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\技術(shù)精英-source\vue\vue3pro\runoob-vue3-test>cd runoob-vue3-app #進(jìn)入我們構(gòu)建的項(xiàng)目目錄 C:\Users\Mac\Documents\newlifewyq\技術(shù)精英-source\vue\vue3pro\runoob-vue3-test\runoob-vue3-app>npm run serve > [email protected] 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\技術(shù)精英-source\vue\vue3pro\pr2-vue3-vueui>npm run serve > [email protected] 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項(xiàng)目構(gòu)建方法4：vue ui 可視化構(gòu)建 C:\Users\Mac\Documents\newlifewyq\技術(shù)精英-source\vue\vue3pro>vue ui #執(zhí)行該命令,，看到下面彈出的地址,，訪問(wèn)下面的地址，就是一個(gè)用瀏覽器訪問(wèn)的項(xiàng)目構(gòu)建站點(diǎn),，可以選擇項(xiàng)目目錄,，包管理工具等，新建一個(gè)項(xiàng)目，新建完成后,，我們可以用可視化的方式運(yùn)行（相當(dāng)于在項(xiàng)目根目錄執(zhí)行 npm run serve）我們可以終止當(dāng)前的交互命令ctry+c,，注意終止后，項(xiàng)目管理可視化工具將不可用,，當(dāng)然我們還可以重新用vue ui打開(kāi)該可視化工具,，通過(guò)項(xiàng)目管理頁(yè)面-導(dǎo)入項(xiàng)目，來(lái)重新管理某個(gè)vue項(xiàng)目,。 ??? Starting GUI... ??? Ready on http://localhost:8001
運(yùn)行項(xiàng)目：?jiǎn)螕羧蝿?wù)-運(yùn)行即可,，本vue ui 可視化頁(yè)面可以管理多個(gè)項(xiàng)目，我們每次需要用可視化方式來(lái)管理依賴（安裝依賴等）,，插件的時(shí)候,，就可以直接輸入 vue ui,然后訪問(wèn)生成的管理網(wǎng)址，瀏覽器訪問(wèn)該網(wǎng)址,，然后在項(xiàng)目管理頁(yè)面,，選擇導(dǎo)入，就可以導(dǎo)入項(xiàng)目,，進(jìn)行管理,，比如運(yùn)行，安裝依賴等,?？聪旅娴慕貓D，我們開(kāi)啟了創(chuàng)建的項(xiàng)目,，地址是 http://localhost:8080,我們?cè)谫Y源管理找到該目錄地址,，在dos窗口cd進(jìn)入該項(xiàng)目目錄，用npm run serve 命令行也可以繼續(xù)管理開(kāi)發(fā)項(xiàng)目,。 |
|
|
編輯
編輯
