尧图网络科技YAOTU DIGITAL 获取报价
获取报价
首页 / 资讯中心 / 文章详情

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

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

资讯中心
01
ARTICLE

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

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.
02
RELATED NEWS

相关资讯

更多网站建设与数字化升级内容

03
WHY YAOTU

想打造同款高转化官网?

懂行业、懂生意,从建站到增长一站式陪跑

◈

场景化定制

不做模板站,围绕你的业务场景量身设计,小众不撞款。

◐

营销型架构

以转化目标组织内容与路径,让官网真正带来询盘。

▲

全周期服务

设计、开发、运营、运维一体,上线只是开始。

免费获取你的建站方案

留下需求,专属顾问 24 小时内为你输出方案建议。