如何使用 Vue CLI 创建和管理一个 Vue 项目

祈澈菇凉2024-06-04 18:50

Vue CLI 是一个基于 Node.js 的命令行工具,可以快速创建和管理 Vue.js 项目。以下是使用 Vue CLI 创建和管理 Vue 项目的步骤:

1：安装 Vue CLI

打开终端或命令提示符,运行以下命令安装 Vue CLI:

复制代码

npm install -g @vue/cli

安装完成后,可以使用 vue --version 命令检查 Vue CLI 的版本。

2：创建新项目

复制代码

在终端中运行以下命令创建新的 Vue 项目:

vue create my-project

选择合适的预设配置,如 default(默认)、Manually select features(手动选择功能)等。
根据提示完成项目初始化配置。

3：启动开发服务器

复制代码

进入项目目录:

cd my-project

运行以下命令启动开发服务器:

复制代码

npm run serve

服务器启动后,可以在浏览器中访问 http://localhost:8080/ 查看您的项目。

4：构建项目

复制代码

当准备部署项目时,可以运行以下命令进行打包:

npm run build

这将在 dist 目录下生成优化过的产品代码。

5：管理项目

复制代码

添加插件:

vue add

例如,添加 Vuex 状态管理插件:

vue add vuex

运行检查:

npm run lint

这将检查项目代码是否符合 ESLint 规则。

运行测试:

复制代码

    npm run test:unit

    这将运行单元测试。

6：项目配置

可以在 vue.config.js 文件中自定义 webpack 配置、设置环境变量等。

通过 Vue CLI,开发者可以快速搭建 Vue.js 项目,并通过丰富的插件和脚本命令来管理项目的各个方面,提高开发效率。掌握好 Vue CLI 的使用,对于 Vue.js 开发非常有帮助