前端框架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 [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://v8.dev/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.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依赖（有待核实）
> [email protected] 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
> [email protected] 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
> [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项目构建方法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
> [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\技术精英-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项目构建方法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 命令行也可以继续管理开发项目。