前端框架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 on http://localhost:8001
运行项目:单击任务-运行即可,本vue ui 可视化页面可以管理多个项目,我们每次需要用可视化方式来管理依赖(安装依赖等),插件的时候,就可以直接输入 vue ui,然后访问生成的管理网址,浏览器访问该网址,然后在项目管理页面,选择导入,就可以导入项目,进行管理,比如运行,安装依赖等。看下面的截图,我们开启了创建的项目,地址是 http://localhost:8080,我们在资源管理找到该目录地址,在dos窗口cd进入该项目目录,用npm run serve 命令行也可以继续管理开发项目。
前端框架vue3的node安装及项目构建的4种方法相关推荐
- web前端移动端项目测试的几种方法
web前端移动端项目测试的几种方法 本人只是个做前端刚刚半年的小白 技术还不熟练 见识也不够广 希望大家不喜勿喷 如果有不对的地方欢迎大家指出 我更加会努力的学习 提高自己的水平! 本人只是 ...
- 美团脱颖而出的经验_使数据科学项目脱颖而出的6种方法
美团脱颖而出的经验 The global COVID-19 pandemic has left many with a lot of time on their hands to work on th ...
- Ubuntu16.04下安装cuda和cudnn的三种方法(亲测全部有效)
目录 1.cuda的安装 1.1 最简单的方法--分开安装驱动和cuda 1.2 更万能的方法--同时安装驱动和cuda 1.3 终极杀手锏 2.cudnn的安装 安装之前首先要确认你需要安装的cu ...
- 计算机控制器安装方法,win7正确安装3D视频控制器的两种方法介绍
win7系统中打开设备管理器可以检查驱动状况,点击其他设备的时候发现一个"3D 视频控制器","3D 视频控制器"是什么?其实一般来说"3D 视频控制 ...
- 清理项目缓存的几种方法
清理项目缓存的几种方法: meta方法 //不缓存 <META HTTP-EQUIV="pragma" CONTENT="no-cache"> &l ...
- node 安装_VUE项目迁移之node.js的安装
[摘要]由于公司的项目需要迁移到VUE中去, 所以就用到了node.js, 这里简单整理了一下node.js的安装教程和环境变量的配置 [作者]田鋆鹏 Node.js 安装教程 1. 在node.js ...
- ubuntu安装python3.8_在Ubuntu 18.04系统上安装Python 3.8的两种方法
本文介绍在Ubuntu 18.04/16.04系统上安装Python 3.8的两种不同方法,第一个选择是从Deadsnakes PPA安装deb软件包,第二个选择是从源代码构建,当前Python 3. ...
- python如何下载os库_简谈下载安装Python第三方库的三种方法
如何下载安装Python第三方库(注:此文章以Windows的安装环境为前提) 一.利用Python中的pip进行第三方库的下载 首先我们要搞清楚Python中的pip是个什么东东?pip是一个安装和 ...
- 数据库软件安装和数据库创建的几种方法
数据库软件安装: 图形界面安装 静默方式安装 通过复制已经存在的数据库安装 数据库创建的几种方法 图形界面创建 静默方式创建 利用已经存在的实例创建 通过手工创建 先做总结后期完善. 转载于:http ...
最新文章
- 一个比较简单、非常简单的计算器
- mysql selectprovider_SpringBoot+Mybatis 框架之 @SelectProvider注解方式搭建
- Delphi 的绘图功能[10] - TFONT 类
- 【转】SVN各种颜色状态
- windows游戏编程:球球大作战(吃鸡版)源码
- 【自动驾驶】LQR控制实现轨迹跟踪
- 魅族手机开机出现Android,魅族开不了机怎么办?如何解决?
- java 图片处理 图片缩略图_java 生成图片缩略图
- 服务器 iis ftp配置文件,如何:在 IIS 中创建和配置 FTP 站点
- 语文数学英语计算机文理科,高考文理科英语试卷一样吗
- 电信光纤猫虚拟服务器设置方法,电信光纤猫与无线路由器连接的设置方法
- 远程监控养猪监控系统
- 310实验室一点补充
- 【内网安全】WinLinux内存离线读取Hashcat破解RDPSSH存储提取
- 安卓开发学习——第四天
- 详谈parameterType与resultType的用法
- Public Key Infrastructure
- 理解HTTPS加密安全传输流程
- 万物流变:从辩证法看互联网架构和人生
- 【第 13 章 基于霍夫曼图像压缩重建--Matlab深度学习实战图像处理应用】
热门文章
- 排球分组循环交叉编排_同学!中国海洋大学第一届排球联赛等你来战!
- 【Kaggle-House Price Prediction】代码参考
- windows10配置WSL(Ubuntu)环境
- 我的python世界 豆瓣_python系列之(4)豆瓣图书《平凡的世界》书评及情感分析...
- Cura gui 代码编译流程
- C语言如何编程换算小时秒,小时分钟秒的换算(c语言把时间转换成秒)
- 如何快速一键重装系统 一键重装系统图文教程
- 小白笔记——异常处理基础
- 求长方柱的体积和表面积
- 姜小白的Python日记Day9 变量与递归