vue构建项目过程

最新推荐文章于 2024-07-09 21:18:14 发布
最新推荐文章于 2024-07-09 21:18:14 发布
阅读量166 收藏
点赞数
分类专栏： web 文章标签： vue.js npm webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42105462/article/details/124605249
版权

构建vue项目

PS D:\nodejsnpm\vue_project> get-ExecutionPolicy
Restricted
PS D:\nodejsnpm\vue_project> set-ExecutionPolicy RemoteSigned
PS D:\nodejsnpm\vue_project> get-ExecutionPolicy
RemoteSigned
PS D:\nodejsnpm\vue_project> vue init webpack firstVue

? Project name vue_test_001
? Project description test
? Author cddz60@163.com
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) no

   vue-cli · Generated "firstVue".

# Project initialization finished!
# ========================

To get started:

  cd firstVue
  npm install (or if using yarn: yarn)
  npm run lint -- --fix (or for yarn: yarn run lint --fix)
  npm run dev

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


PS D:\nodejsnpm\vue_project> cd firstVue
PS D:\nodejsnpm\vue_project\firstVue> npm install
npm WARN deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated flatten@1.0.3: flatten is deprecated in favor of utility frameworks such as lodash.
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
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 source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
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 circular-json@0.3.3: CircularJSON is in maintenance only, flatted is its successor.
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 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 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 querystring@0.2.0: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
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 uglify-es@3.3.9: support for ECMAScript is superseded by `uglify-js` as of v3.13.0
npm WARN deprecated bfj-node4@5.3.1: Switch to the `bfj` package for fixes and new features!
npm WARN deprecated svgo@0.7.2: This SVGO version is no longer supported. Upgrade to v2.x.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 1443 packages in 2m

68 packages are looking for funding
  run `npm fund` for details
PS D:\nodejsnpm\vue_project\firstVue> npm install -g yarn

added 1 package in 2s
PS D:\nodejsnpm\vue_project\firstVue> yarn config set registry https://registry.npm.taobao.org
yarn config v1.22.18
success Set "registry" to "https://registry.npm.taobao.org".
Done in 0.06s.
PS D:\nodejsnpm\vue_project\firstVue> yarn config list
info yarn config
{
  'version-tag-prefix': 'v',
  'version-git-tag': true,
  'version-commit-hooks': true,
  'version-git-sign': false,
  'version-git-message': 'v%s',
  'init-version': '1.0.0',
  'init-license': 'MIT',
  'save-prefix': '^',
  'bin-links': true,
  'ignore-scripts': false,
  'ignore-optional': false,
  registry: 'https://registry.npm.taobao.org',
  'strict-ssl': true,
  'user-agent': 'yarn/1.22.18 npm/? node/v16.15.0 win32 x64',
  disturl: 'https://npm.taobao.org/dist',
  lastUpdateCheck: 1638321679873
}
info npm config
{
  registry: 'https://repo.huaweicloud.com/repository/npm/',
  prefix: 'D:\\nodejsnpm\\node_global',
  cache: 'D:\\nodejsnpm\\node_cache'
}
Done in 0.07s.
PS D:\nodejsnpm\vue_project\firstVue> yarn
yarn install v1.22.18
info No lockfile found.
warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
[1/5] Validating package.json...
[2/5] Resolving packages...
warning autoprefixer > browserslist@2.11.3: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
warning babel-core > babel-runtime > 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.
warning babel-core > babel-register > 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.
warning babel-eslint@8.2.6: babel-eslint is now @babel/eslint-parser. This package will no longer receive updates.
warning css-loader > cssnano > autoprefixer > browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
warning css-loader > cssnano > postcss-merge-rules > browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
warning css-loader > cssnano > postcss-merge-rules > caniuse-api > browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
warning css-loader > cssnano > postcss-svgo > svgo@0.7.2: This SVGO version is no longer supported. Upgrade to v2.x.x.
warning css-loader > cssnano > postcss-merge-rules > postcss-selector-parser > flatten@1.0.3: flatten is deprecated in favor of utility frameworks such as lodash.
warning eslint > file-entry-cache > flat-cache > circular-json@0.3.3: CircularJSON is in maintenance only, flatted is its successor.
warning eslint-loader@1.9.0: This loader has been deprecated. Please use eslint-webpack-plugin
warning extract-text-webpack-plugin@3.0.2: Deprecated. Please use https://github.com/webpack-contrib/mini-css-extract-plugin
warning html-webpack-plugin@2.30.1: out of support
warning optimize-css-assets-webpack-plugin > cssnano > cssnano-preset-default > postcss-svgo > svgo@1.3.2: This SVGO version is no longer supported. Upgrade to v2.x.x.
warning uglifyjs-webpack-plugin > uglify-es@3.3.9: support for ECMAScript is superseded by `uglify-js` as of v3.13.0
warning webpack > watchpack > watchpack-chokidar2 > chokidar@2.1.8: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies
warning webpack > node-libs-browser > url > querystring@0.2.0: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
warning webpack > watchpack > watchpack-chokidar2 > chokidar > fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
warning webpack > watchpack > watchpack-chokidar2 > chokidar > braces > snapdragon > source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated
warning webpack > watchpack > watchpack-chokidar2 > chokidar > braces > snapdragon > source-map-resolve > urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
warning webpack > watchpack > watchpack-chokidar2 > chokidar > braces > snapdragon > source-map-resolve > source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated
warning webpack > watchpack > watchpack-chokidar2 > chokidar > braces > snapdragon > source-map-resolve > resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
warning webpack-bundle-analyzer > bfj-node4@5.3.1: Switch to the `bfj` package for fixes and new features!
warning webpack-dev-server > chokidar@2.1.8: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies
warning webpack-dev-server > sockjs > 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.
[3/5] Fetching packages...
[4/5] Linking dependencies...
[5/5] Building fresh packages...
success Saved lockfile.
Done in 72.41s.
PS D:\nodejsnpm\vue_project\firstVue> npm run dev

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

(node:22952) [DEP0111] DeprecationWarning: Access to process.binding('http_parser') is deprecated.
(Use `node --trace-deprecation ...` to show where the warning was created)
 13% building modules 28/31 modules 3 active ...snpm\vue_project\firstVue\src\App.vue{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.
 95% emitting

 DONE  Compiled successfully in 3920ms                                                                                                                                                                            10:41:35
 I  Your application is running here: http://localhost:8080
终止批处理操作吗(Y/N)? y
PS D:\nodejsnpm\vue_project\firstVue> npm i element-ui -S
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 browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
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 chokidar@2.1.8: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies
npm WARN deprecated browserslist@2.11.3: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
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 uglify-es@3.3.9: support for ECMAScript is superseded by `uglify-js` as of v3.13.0
npm WARN deprecated svgo@0.7.2: This SVGO version is no longer supported. Upgrade to v2.x.x.
npm WARN deprecated svgo@1.3.2: This SVGO version is no longer supported. Upgrade to v2.x.x.

added 269 packages, removed 117 packages, and changed 103 packages in 20s

68 packages are looking for funding
  run `npm fund` for details
PS D:\nodejsnpm\vue_project\firstVue>

https://blog.csdn.net/qq_36596869/article/details/123610625?utm_medium=distribute.pc_relevant.none-task-blog-2defaultbaidujs_baidulandingword~default-0.pc_relevant_default&spm=1001.2101.3001.4242.1&utm_relevant_index=3

落花亦无情^
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue项目搭建过程
我要成为一个前端大牛
12-28 233
1.安装对应的框架 - iview npm install view-design --save main.js import ViewUI from 'view-design' import 'view-design/dist/styles/iview.css' Vue.use(ViewUI) 2.删除不需要的页面，比如：HelloWorld.vue About.vue ，需要删除对应的引用 3.在App.vue 删除不需要的组件 <template> &l...
vue项目创建流程
m0_64337756的博客
04-10 837
A 创建项目 1vue create app 2选择：babel router(按需选择) B 重置项目 1app.vue中重置 <template> <div></div> </template> <script> export default { } </script> <style> </style> 2router/index.js重置 import Vue from 'vu
vue项目一直building不通过编译
lsrxz的博客
03-10 243
vue32% building 过不去
vue Client项目bulid进度不动解决
mind_me的博客
08-05 1074
今天在续写之前的vue项目时遇到进度卡着一直不动。
Vue：打包报Building for staging...Error: error:0308010C:digital envelope routines::unsupported
weixin_51475737的博客
04-14 581
当我们需要对项目进行打包上线的时候出现的Building for staging…Error: error:0308010C:digital envelope的报错信息。
运行vue项目,building modules卡住不动
qq_40837750的博客
05-10 5100
是
Vue 项目 build 流程解析（webpack工具解析）
ck2580的博客
12-15 7686
Vue 项目 build 流程解析（webpack工具解析） 注：本篇文章解析框架为 vue2.0 本篇文章通过解析简单的项目打包步骤试着去了解我们的 Vue 项目是怎么打包的。 build.js 干了什么 首先我们贴上 build.js 代码，方便后续解读： 'use strict' // 版本校验解析 require('./check-versions')() process.env.NODE_ENV = 'production' // 引用解析 const ora = require('ora')
Vue 项目构建与开发入门
01-15
总的来说，"Vue 项目构建与开发入门"涵盖了从安装Vue CLI、理解Vue的基本原理，到使用Vue Router和Vuex管理应用结构，再到项目构建和测试的整个过程。通过实践，开发者可以逐步掌握Vue.js，创建出高效、可维护的前端...
Vue完整项目构建(进阶篇)
08-28
Vue完整项目构建(进阶篇)是针对有一定前端基础的学习者设计的教程，旨在...在实际开发过程中，可能还需要了解Vue Router、Vuex等扩展库的使用，以及优化技巧，如懒加载、按需引入组件等，以提升项目性能和用户体验。
Vue 项目构建与开发入门.zip
07-09
本教程“Vue 项目构建与开发入门”专为初学者设计，旨在帮助你快速掌握Vue项目的搭建和开发流程。 1. **Vue CLI介绍**： Vue CLI（命令行接口）是Vue生态系统中的一个工具，用于快速设置新项目的基础结构。通过全局...
vue和webpack项目构建过程常用的npm命令详解
08-27
Vue 和 Webpack 项目构建过程常用的 npm 命令详解 在构建 Vue 和 Webpack 项目时，了解常用的 npm 命令是非常重要的。本文将通过实例代码介绍 Vue 和 Webpack 项目构建过程常用的 npm 命令。 安装 Vue 要安装最新...
详解vue项目的构建，打包，发布全过程
11-27
很多朋友对于VUE项目的一系列流程不熟悉，小编根据网友提出的问题，整理了关于vue项目的构建打包发布全过程，希望对你有用。 一、vue项目的创建 1、首先第一肯定是要有Node.js及npm这个不多说了 2、安装脚手架 ...
【vue项目打包失败】 vue打包一直building for production
yeyeyeyu的博客
04-19 1万+
导致vue项目打包失败的原因之一 今天项目改完，开开心心的打包打算上传服务器了，发现一直打包不成功。具体表现如下 <--- Last few GCs ---> [12696:000002237B5DEC60] 9193 ms: Scavenge 1389.0 (1420.8) -> 1388.1 (1421.3) MB, 2.0 / 0.0 ms (average mu = 0.265, current mu = 0.275) allocation failure [1269
npm install 报错
m0_47676650的博客
11-02 6191
node
npm 安装vue@cli报错，处理方式
weixin_64064226的博客
11-06 1万+
C:\User\Admin>npm install -g @vue/cli npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead. npm WARN deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated npm WARN deprecated urix@0
npm install报错
ygq_zj的博客
05-09 9136
在运行npm run dev 会出现下面错误：这是因为sass-loader版本不适。这是因为node-sass和sass-loadr与node版本不适配导致的。也可以用node-sass -v来测试：如下就是卸载完成。运行npm install之后：报错如下。
vue项目 npm install 报错 Building: D:\nodejs\node.exe D:\vueProject\music-client\node_modules\node-gyp\b
热门推荐
yiyuzz的博客
12-31 1万+
之前自己联系的一个小项目，在其他电脑上是可以正常安装依赖然后运行的，但是今天想把它放到新的电脑上编辑，install的时候出错了。错误信息如下： 一开始分析错误，我认为是项目中node_modules中的node_sass没加载成功，结果重试多次，npm或者cnpm都不行。 看了网上的一些解决办法，我明白应该是和我node的配置有关，上图可以看到node版本是15，路径在D盘（这个是安装node改了默认位置） 然后查资料知道node_sass这个文件正常应该是在C:\Users\用户名\Ap...
git--解决exited with error code: 128
xqhys的博客
02-23 8715
git--解决exited with error code: 128
vue 切换主题色切换主题色切换主题色切换主题色切换主题色
最新发布
口袋的天空的博客
07-09 1189
vue切换主题
使用vue2构建项目过程
03-30
1. 安装Vue CLI Vue CLI是一个官方提供的脚手架工具，可以帮助我们快速创建Vue项目。 安装命令：`npm install -g vue-cli` 2. 创建项目 创建项目命令：`vue init webpack project-name` 运行命令：`cd project-name && npm install` 3. 运行项目 运行命令：`npm run dev` 4. 配置路由 Vue有自己的路由插件vue-router，可以让我们实现SPA（单页应用）。 安装命令：`npm install vue-router --save` 配置路由文件：创建一个router.js文件，引入vue-router，并在Vue实例中注册路由。 5. 配置状态管理 状态管理是Vue的另一个核心插件vuex，可以让我们方便地管理应用程序的状态。 安装命令：`npm install vuex --save` 配置状态管理文件：创建一个store.js文件，并在Vue实例中注册状态管理器。 6. 编写组件 Vue是一个组件化框架，我们需要编写组件来构建应用程序。 组件可以分为全局组件和局部组件，全局组件可以在任何地方使用，而局部组件只能在其父组件中使用。 7. 集成第三方库 Vue可以集成第三方库来扩展其功能。常用的第三方库有Axios、Element UI、Vue-Router、Vuex等。 安装命令：`npm install library-name --save` 在Vue实例中引入并注册第三方库。 8. 打包项目 当我们完成了项目开发后，需要将项目打包成静态资源以便部署到服务器。 打包命令：`npm run build` 打包后的静态资源会生成在dist目录下。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值