Vue脚手架第一篇:使用Vue脚手架

发布时间:2026/9/29 6:19:19

Vue脚手架第一篇:使用Vue脚手架 一初始化脚手架1说明1. Vue脚手架是Vue官方提供的标准化开发工具开发平台。2. 最新的版本是4.x。3. 文档: https://cli.vuejs.org/zh/。需要先替换成淘宝镜像npm config set registry https://registry.npmmirror.com2第一步仅第一次执行全局安装vue/cli。npm install -g vue/cli3第二步切换到你要创建项目的目录然后使用命令创建项目vue create vue_cli4第三步本地部署进行调试# 进入项目目录 cd xxxx # 启动开发服务器本地调试 npm run serve # 项目打包生产环境打包结果在dist文件夹 npm run build二完整安装过程说明Last login: Mon Sep 28 13:03:00 on ttys000 cuilleicuileilei-sin-Mac-mini ~ % npm -v zsh: command not found: npm cuilleicuileilei-sin-Mac-mini ~ % node -v zsh: command not found: node cuilleicuileilei-sin-Mac-mini ~ % curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.3/install.sh | bash % Total % Received % Xferd Average Speed Time Time Time Current Dload Upload Total Spent Left Speed 100 16631 100 16631 0 0 15907 0 0:00:01 0:00:01 --:--:-- 15914 Downloading nvm from git to /Users/cuillei/.nvm Cloning into /Users/cuillei/.nvm... remote: Enumerating objects: 480, done. remote: Counting objects: 100% (480/480), done. remote: Compressing objects: 100% (403/403), done. remote: Total 480 (delta 68), reused 245 (delta 51), pack-reused 0 (from 0) Receiving objects: 100% (480/480), 508.55 KiB | 333.00 KiB/s, done. Resolving deltas: 100% (68/68), done. * (HEAD detached at FETCH_HEAD) master Compressing and cleaning up git repository Profile not found. Tried ~/.bashrc, ~/.bash_profile, ~/.zprofile, ~/.zshrc, and ~/.profile. Create one of them and run this script again OR Append the following lines to the correct file yourself: export NVM_DIR$HOME/.nvm [ -s $NVM_DIR/nvm.sh ] \. $NVM_DIR/nvm.sh # This loads nvm Close and reopen your terminal to start using nvm or run the following to use it now: export NVM_DIR$HOME/.nvm [ -s $NVM_DIR/nvm.sh ] \. $NVM_DIR/nvm.sh # This loads nvm cuilleicuileilei-sin-Mac-mini ~ % \. $HOME/.nvm/nvm.sh cuilleicuileilei-sin-Mac-mini ~ % nvm install 24 Downloading and installing node v24.21.0... Downloading https://nodejs.org/dist/v24.21.0/node-v24.21.0-darwin-arm64.tar.xz... ################################################################################################################# 100.0% Computing checksum with sha256sum Checksums matched! Now using node v24.21.0 (npm v11.19.0) Creating default alias: default - 24 (- v24.21.0) cuilleicuileilei-sin-Mac-mini ~ % cuilleicuileilei-sin-Mac-mini ~ % cuilleicuileilei-sin-Mac-mini ~ % cuilleicuileilei-sin-Mac-mini ~ % cuilleicuileilei-sin-Mac-mini ~ % cuilleicuileilei-sin-Mac-mini ~ % cuilleicuileilei-sin-Mac-mini ~ % cuilleicuileilei-sin-Mac-mini ~ % cuilleicuileilei-sin-Mac-mini ~ % node -v # Should print v24.21.0. v24.21.0 cuilleicuileilei-sin-Mac-mini ~ % npm -v # Should print 11.19.0. 11.19.0 cuilleicuileilei-sin-Mac-mini ~ % npm config set registry https://registry.npmmirror.com cuilleicuileilei-sin-Mac-mini ~ % npm install -g npm error code ENOENT npm error syscall open npm error path /Users/cuillei/package.json npm error errno -2 npm error enoent Could not read package.json: Error: ENOENT: no such file or directory, open /Users/cuillei/package.json npm error enoent This is related to npm not being able to find a file. npm error enoent npm error A complete log of this run can be found in: /Users/cuillei/.npm/_logs/2026-09-28T05_13_49_960Z-debug-0.log cuilleicuileilei-sin-Mac-mini ~ % cuilleicuileilei-sin-Mac-mini ~ % cuilleicuileilei-sin-Mac-mini ~ % cuilleicuileilei-sin-Mac-mini ~ % cuilleicuileilei-sin-Mac-mini ~ % cuilleicuileilei-sin-Mac-mini ~ % cuilleicuileilei-sin-Mac-mini ~ % cuilleicuileilei-sin-Mac-mini ~ % npm install -g vue/cli npm warn deprecated urix0.1.0: Please see https://github.com/lydell/urix#deprecated npm warn deprecated resolve-url0.2.1: https://github.com/lydell/resolve-url#deprecated npm warn deprecated source-map-url0.4.1: See https://github.com/lydell/source-map-url#deprecated npm warn deprecated source-map-resolve0.5.3: See https://github.com/lydell/source-map-resolve#deprecated npm warn deprecated rimraf2.6.3: Rimraf versions prior to v4 are no longer supported npm warn deprecated babel/plugin-proposal-optional-chaining7.21.0: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use babel/plugin-transform-optional-chaining instead. npm warn deprecated babel/plugin-proposal-nullish-coalescing-operator7.18.6: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use babel/plugin-transform-nullish-coalescing-operator instead. npm warn deprecated babel/plugin-proposal-class-properties7.18.6: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use babel/plugin-transform-class-properties instead. npm warn deprecated inflight1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful. npm warn deprecated glob7.2.3: Glob versions prior to v9 are no longer supported npm warn deprecated rimraf3.0.2: Rimraf versions prior to v4 are no longer supported npm warn deprecated apollo-server-errors3.3.1: The apollo-server-errors package is part of Apollo Server v2 and v3, which are now end-of-life (as of October 22nd 2023 and October 22nd 2024, respectively). This packages functionality is now found in the apollo/server package. See https://www.apollographql.com/docs/apollo-server/previous-versions/ for more details. npm warn deprecated apollo-datasource3.3.2: The apollo-datasource package is part of Apollo Server v2 and v3, which are now end-of-life (as of October 22nd 2023 and October 22nd 2024, respectively). See https://www.apollographql.com/docs/apollo-server/previous-versions/ for more details. npm warn deprecated apollo-reporting-protobuf3.4.0: The apollo-reporting-protobuf package is part of Apollo Server v2 and v3, which are now end-of-life (as of October 22nd 2023 and October 22nd 2024, respectively). This packages functionality is now found in the apollo/usage-reporting-protobuf package. See https://www.apollographql.com/docs/apollo-server/previous-versions/ for more details. npm warn deprecated apollo-server-env4.2.1: The apollo-server-env package is part of Apollo Server v2 and v3, which are now end-of-life (as of October 22nd 2023 and October 22nd 2024, respectively). This packages functionality is now found in the apollo/utils.fetcher package. See https://www.apollographql.com/docs/apollo-server/previous-versions/ for more details. npm warn deprecated apollo-server-types3.8.0: The apollo-server-types package is part of Apollo Server v2 and v3, which are now end-of-life (as of October 22nd 2023 and October 22nd 2024, respectively). This packages functionality is now found in the apollo/server package. See https://www.apollographql.com/docs/apollo-server/previous-versions/ for more details. npm warn deprecated apollo-server-plugin-base3.7.2: The apollo-server-plugin-base package is part of Apollo Server v2 and v3, which are now end-of-life (as of October 22nd 2023 and October 22nd 2024, respectively). This packages functionality is now found in the apollo/server package. See https://www.apollographql.com/docs/apollo-server/previous-versions/ for more details. npm warn deprecated subscriptions-transport-ws0.11.0: The subscriptions-transport-ws package is no longer maintained. We recommend you use graphql-ws instead. For help migrating Apollo software to graphql-ws, see https://www.apollographql.com/docs/apollo-server/data/subscriptions/#switching-from-subscriptions-transport-ws For general help using graphql-ws, see https://github.com/enisdenjo/graphql-ws/blob/master/README.md npm warn deprecated apollo-server-core3.13.0: The apollo-server-core package is part of Apollo Server v2 and v3, which are now end-of-life (as of October 22nd 2023 and October 22nd 2024, respectively). This packages functionality is now found in the apollo/server package. See https://www.apollographql.com/docs/apollo-server/previous-versions/ for more details. npm warn deprecated apollo-server-express3.13.0: The apollo-server-express package is part of Apollo Server v2 and v3, which are now end-of-life (as of October 22nd 2023 and October 22nd 2024, respectively). This packages functionality is now found in the apollo/server package. See https://www.apollographql.com/docs/apollo-server/previous-versions/ for more details. npm warn deprecated vue2.7.16: Vue 2 has reached EOL and is no longer actively maintained. See https://v2.vuejs.org/eol/ for more details. added 844 packages in 14s 91 packages are looking for funding run npm fund for details npm warn install-scripts 2 packages have install scripts not yet covered by allowScripts: npm warn install-scripts apollo/protobufjs1.2.8 (postinstall: node scripts/postinstall) npm warn install-scripts apollo/protobufjs1.2.6 (postinstall: node scripts/postinstall) npm warn install-scripts npm warn install-scripts Run npm install -g --allow-scriptsapollo/protobufjs,apollo/protobufjs to allow these scripts once, or npm config set allow-scriptsapollo/protobufjs,apollo/protobufjs --locationuser to allow them for all global installs. cuilleicuileilei-sin-Mac-mini ~ % cuilleicuileilei-sin-Mac-mini ~ % cuilleicuileilei-sin-Mac-mini ~ % cuilleicuileilei-sin-Mac-mini ~ % cuilleicuileilei-sin-Mac-mini ~ % cuilleicuileilei-sin-Mac-mini ~ % cuilleicuileilei-sin-Mac-mini ~ % cuilleicuileilei-sin-Mac-mini ~ % cuilleicuileilei-sin-Mac-mini ~ % cuilleicuileilei-sin-Mac-mini ~ % cuilleicuileilei-sin-Mac-mini ~ % cuilleicuileilei-sin-Mac-mini ~ % cuilleicuileilei-sin-Mac-mini ~ % cuilleicuileilei-sin-Mac-mini ~ % ls Applications dev goods表备份.rtf Doubao Movies Public code develop Downloads Music Desktop Documents Library Pictures cuilleicuileilei-sin-Mac-mini ~ % cd code cuilleicuileilei-sin-Mac-mini code % ll zsh: command not found: ll cuilleicuileilei-sin-Mac-mini code % ls new_concept-api test untitled vue2 cuilleicuileilei-sin-Mac-mini code % vue create vue_cli Vue CLI v5.0.9 ? Please pick a preset: Default ([Vue 2] babel, eslint) Vue CLI v5.0.9 ✨ Creating project in /Users/cuillei/code/vue_cli. Initializing git repository... ⚙️ Installing CLI plugins. This might take a while... added 827 packages in 13s 112 packages are looking for funding run npm fund for details Invoking generators... Installing additional dependencies... added 90 packages in 2s 124 packages are looking for funding run npm fund for details ⚓ Running completion hooks... Generating README.md... Successfully created project vue_cli. Get started with the following commands: $ cd vue_cli $ npm run serve cuilleicuileilei-sin-Mac-mini code % npm run serve npm error code ENOENT npm error syscall open npm error path /Users/cuillei/code/package.json npm error errno -2 npm error enoent Could not read package.json: Error: ENOENT: no such file or directory, open /Users/cuillei/code/package.json npm error enoent This is related to npm not being able to find a file. npm error enoent npm error A complete log of this run can be found in: /Users/cuillei/.npm/_logs/2026-09-28T05_16_04_250Z-debug-0.log cuilleicuileilei-sin-Mac-mini code % cuilleicuileilei-sin-Mac-mini code % ls new_concept-api test untitled vue_cli vue2 cuilleicuileilei-sin-Mac-mini code % cd vue_cli cuilleicuileilei-sin-Mac-mini vue_cli % ll zsh: command not found: ll cuilleicuileilei-sin-Mac-mini vue_cli % ls babel.config.js node_modules package.json README.md vue.config.js jsconfig.json package-lock.json public src cuilleicuileilei-sin-Mac-mini vue_cli % vue run serve Usage: vue command [options] Options: -V, --version output the version number -h, --help display help for command Commands: create [options] app-name create a new project powered by vue-cli-service add [options] plugin [pluginOptions] install a plugin and invoke its generator in an already created project invoke [options] plugin [pluginOptions] invoke the generator of a plugin in an already created project inspect [options] [paths...] inspect the webpack config in a project with vue-cli-service serve alias of npm run serve in the current project build alias of npm run build in the current project ui [options] start and open the vue-cli ui init [options] template app-name generate a project from a remote template (legacy API, requires vue/cli-init) config [options] [value] inspect and modify the config outdated [options] (experimental) check for outdated vue cli service / plugins upgrade [options] [plugin-name] (experimental) upgrade vue cli service / plugins migrate [options] [plugin-name] (experimental) run migrator for an already-installed cli plugin info print debugging information about your environment help [command] display help for command Run vue command --help for detailed usage of given command. Unknown command run. Did you mean ui? cuilleicuileilei-sin-Mac-mini vue_cli % cuilleicuileilei-sin-Mac-mini vue_cli % npm run serve vue_cli0.1.0 serve vue-cli-service serve INFO Starting development server... WARNING Compiled with 2 warnings 13:17:31 warning in ./src/App.vue export default (imported as style0) was not found in ./App.vue?vuetypestyleindex0id7ba5bd90langcss (possible exports unknown) warning in ./src/components/HelloWorld.vue export default (imported as style0) was not found in ./HelloWorld.vue?vuetypestyleindex0id469af010scopedtruelangcss (possible exports unknown) App running at: - Local: http://localhost:8080/ - Network: http://192.168.5.237:8080/ Note that the development build is not optimized. To create a production build, run npm run build.
延伸阅读

更多相关文章

2026/9/29 6:19:19

热管理供应商的全国交付能力:物流与现场支持怎么搭

热管理供应商的全国交付能力,由三块构成:①物流体系——批量件走干线物流区域分拨,交期承诺有冗余;②现场支持——设备安装、调试、培训、故障响应按区域配置,紧急问题远程到场双通道;③备件与返修——备件…

2026/9/29 8:29:27

Python+SQLite+tkinter搭建汉服商城管理系统:从数据库设计到GUI实现

最近在帮一个做汉服实体店的朋友整理库存和订单,纸质的台账实在撑不住了——商品上百个、款式尺寸一多就乱,客户下单记录翻半天找不到。陆陆续续花了三个周末,我用Python给她写了一套汉服商城管理系统:本地数据库存商品、存订单&a…

2026/9/29 8:29:27

Kimi K2 + Claude Code 配 TaoToken:settings.json 骨架与验证动作

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/9/28 3:03:23

东莞市品牌网站建设报价常见报错与解决

东莞品牌网站建设报价单背后:一份保姆级建站教程避坑实录 网站做好了没人访问,这大概是很多老板最头疼的事。花了大几万做的品牌站,上线后流量惨淡,比路边摊还冷清。别急着骂外包公司,很多“东莞品牌网站建设报价”里藏着不少猫腻,比如用模板站冒充定制…

2026/9/28 6:05:15

如何划分训练/验证集:Spirula Studio五种eval_mode策略详解

如何划分训练/验证集:Spirula Studio五种eval_mode策略详解 【免费下载链接】spirula-studio Cross-vendor 3D Gaussian Splatting trainer - video to splat to mesh, Vulkan or CUDA. 项目地址: https://gitcode.com/GitHub_Trending/sp/spirula-studio Sp…

2026/9/29 7:00:49

SEO怎么推广速查手册新手避坑实战指南

SEO怎么推广速查手册新手避坑实战指南 模板网站太丑不够用?别急着加滤镜,那是治标不治本。很多老板盯着后台流量掉得眼红,却还在纠结首页Banner的圆角是不是3像素。这就像穿着西装去挖土,姿势不对,努力白费。我整理这份 速查手册…

2026/9/29 0:04:04

AI Evals实战指南:从零搭建LLM应用评估体系与CI/CD集成

1. 为什么AI Evals值得你花时间搞明白做LLM应用的人,迟早会撞上同一堵墙:模型输出飘忽不定,今天答得好好的,明天换个问法就胡说八道。你改了一版提示词,感觉好像好了点,但到底好了多少?说不清。…

2026/9/29 0:04:04

Java采购管理系统实战:从数据库设计到事务一致性

简介:这是一套面向Java Web初学者与课程设计者的采购管理系统完整源码,采用JSP技术搭建,配合MySQL数据库,用于解决企业采购信息的管理问题,适合作为毕业设计、课程大作业或进销存类项目的参考模板。系统实现了用户登录…

2026/9/29 3:53:39

USB Type-C PCB布局分区设计:电源、高速信号与PD协议全攻略

做硬件这行,Type-C接口算是典型的“看着简单,做起来全坑”的东西。光引脚就24个,高低速信号、电源、控制线全部塞在一个小小的连接器里,如果PCB布局不做规划,打样回来基本就是“插上没反应”、“高速掉线”、“静电一打…

2026/9/26 19:58:38

系统编程学习原型如何补齐稳定性边界

系统编程学习原型如何补齐稳定性边界预算有限时&#xff0c;我先优化明显多余的复制&#xff0c;而不是猜测性地换容器。用借用传递只读数据通常就能减少分配&#xff1a; fn parse(line: &str) -> Result<Item, Error> { /* ... */ }用基准确认热点确实在分配&am…

2026/9/29 6:36:14

雨花区哪家财务公司代理记账比较好?

在雨花区&#xff0c;企业处理财税事务常常面临诸多挑战&#xff0c;选择一家靠谱的财务公司至关重要。湖南巨勤财务管理咨询有限公司就是本地正规实体财税服务机构&#xff0c;深耕本地工商财税行业多年&#xff0c;熟悉当地工商局、税务局最新政策与申报流程。主营公司注册、…

还想了解更多?直接咨询顾问

免费诊断 + 免费方案 + 透明报价。

全国咨询热线400-8866-253
免费获取方案
☎咨询二维码 ☎ ↑