下面将介绍如何快速使用 Vue CLI 创建一个 Vue 项目。
Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，它提供了项目构建、开发服务器、热重载、单元测试运行、代码规范和 linting 等功能。
以下是如何使用 Vue CLI 创建一个新的 Vue 项目的步骤：
首先，你需要在你的机器上全局安装 Vue CLI。打开命令行工具（如终端、命令提示符或 PowerShell），然后运行以下命令：
npm install -g @vue/cli
# 或者如果你使用 yarn
yarn global add @vue/cli下面使用 npm 安装 Vue CLI，如下：
# 查看 npm 版本
E:\~work_demo\demo_web_sdk\test> npm -version
10.8.2
# 安装 Vue CLI
E:\~work_demo\demo_web_sdk\test> npm install -g @vue/cli
npm warn deprecated inflight@1.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 rimraf@3.0.2: Rimraf versions prior to v4 are no longer supported
npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported
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 resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm warn deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated
npm warn deprecated rimraf@2.6.3: Rimraf versions prior to v4 are no longer supported
npm warn deprecated @babel/plugin-proposal-nullish-coalescing-operator@7.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-properties@7.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 @babel/plugin-proposal-optional-chaining@7.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 apollo-server-errors@3.3.1: The `apollo-server-errors` package is part of Apollo Server v2 and v3, which are now deprecated (end-of-life October 22nd
2023 and October 22nd 2024, respectively). This package's 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-base@3.7.2: The `apollo-server-plugin-base` package is part of Apollo Server v2 and v3, which are now deprecated (end-of-life October 22nd 2023 and October 22nd 2024, respectively). This package's 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-datasource@3.3.2: The `apollo-datasource` package is part of Apollo Server v2 and v3, which are now deprecated (end-of-life 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-server-env@4.2.1: The `apollo-server-env` package is part of Apollo Server v2 and v3, which are now deprecated (end-of-life October 22nd 2023 and October 22nd 2024, respectively). This package's 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-reporting-protobuf@3.4.0: The `apollo-reporting-protobuf` package is part of Apollo Server v2 and v3, which are now deprecated (end-of-life October 22nd 2023 and October 22nd 2024, respectively). This package's 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-types@3.8.0: The `apollo-server-types` package is part of Apollo Server v2 and v3, which are now deprecated (end-of-life October 22nd 2023 and October 22nd 2024, respectively). This package's 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-ws@0.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 shortid@2.2.16: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
npm warn deprecated vue@2.7.16: Vue 2 has reached EOL and is no longer actively maintained. See https://v2.vuejs.org/eol/ for more details.
added 853 packages in 50s
74 packages are looking for funding
run `npm fund` for details不要忘了验证 Vue CLI 安装是否成功，使用 vue --version 命令查看 Vue CLI 版本：
E:\~work_demo\demo_web_sdk\test> vue --version
@vue/cli 5.0.8到这里，成功安装了 Vue CLI。
安装完 Vue CLI 后，你可以使用 vue create 命令来创建一个新的 Vue 项目。运行以下命令：
vue create my-project此时，Vue CLI 会提示让你选择 Vue 版本，如下：
Vue CLI v5.0.8
? Please pick a preset: (Use arrow keys)
> Default ([Vue 3] babel, eslint)
Default ([Vue 2] babel, eslint)
Manually select features直接通过键盘的↑↓键选择，然后回车。我这里选择“Default ([Vue 3] babel, eslint)”，然后回车：
Vue CLI v5.0.8
Creating project in E:\~work_demo\demo_web_sdk\test\my-project.
Installing CLI plugins. This might take a while...
added 872 packages in 29s
100 packages are looking for funding
run `npm fund` for details
Invoking generators...
Installing additional dependencies...
added 89 packages in 8s
112 packages are looking for funding
run `npm fund` for details
Running completion hooks...
Generating README.md...
Successfully created project my-project.
Get started with the following commands:
$ cd my-project
$ npm run serve如果你能看见上面输出，则项目创建完成。
使用如下命令进入并运行项目：
# 切换到项目目录
E:\~work_demo\demo_web_sdk\test> cd my-project
# 运行项目
E:\~work_demo\demo_web_sdk\test\my-project> npm run serve
> my-project@0.1.0 serve
> vue-cli-service serve
INFO Starting development server...
...运行成功会给出如下提示：
DONE Compiled successfully in 4552ms 11:07:40
App running at:
- Local: http://localhost:8080/
- Network: http://10.114.13.56:8080/
Note that the development build is not optimized.
To create a production build, run npm run build.点击“http://localhost:8080/”或“http://10.114.13.56:8080/”查看项目效果，如下图：
川公网安备51010802032098
