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

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 开发非常有帮助

相关推荐
穿花云烛展15 分钟前
实习日记2(与form表单的爱恨情仇1)
前端
岛风风23 分钟前
分享一下Monorepo 的理解和不同类型项目的目录结构
前端
ITMan彪叔26 分钟前
Tesseract OCR 页面分割模式解析
前端
w_y_fan28 分钟前
Flutter中的沉浸式模式设置
前端·flutter
游荡de蝌蚪28 分钟前
快速打造Vue后台管理系统
前端·javascript·vue.js
code_YuJun29 分钟前
3. 修改 vue.config.js 配置完成打包分析和优化
前端
文心快码BaiduComate37 分钟前
轻松实践:用Python实现“名字大作战”游戏,表白Zulu!
前端·后端·微信小程序
神毓逍遥kang2 小时前
最近学习rust,然后使用rust构建你的前端cli工具助力前端生态
前端
1024小神2 小时前
Android冷启动和热启动以及温启动都是什么意思
前端
June_liu2 小时前
列太多vxe-table自动启用横向虚拟滚动引起的bug
前端·javascript