vue cli 实现

Vue CLI 实现

Vue CLI 是 Vue.js 官方提供的脚手架工具，用于快速搭建 Vue.js 项目。以下是使用 Vue CLI 实现项目的基本步骤。

安装 Vue CLI

确保已安装 Node.js（建议版本 12 以上），然后通过 npm 或 yarn 全局安装 Vue CLI：

npm install -g @vue/cli
# 或
yarn global add @vue/cli

安装完成后，可以通过以下命令检查版本：

vue --version

创建新项目

使用 Vue CLI 创建一个新项目：

vue create my-project

在命令行中，可以选择默认配置或手动选择特性（如 Babel、Router、Vuex 等）。选择完成后，Vue CLI 会自动安装依赖并生成项目结构。

项目结构

生成的项目结构通常如下：

my-project/
├── node_modules/      # 依赖包
├── public/            # 静态资源（如 index.html）
├── src/               # 源代码
│   ├── assets/        # 静态资源（如图片、字体）
│   ├── components/    # Vue 组件
│   ├── App.vue        # 根组件
│   └── main.js        # 入口文件
├── package.json       # 项目配置和依赖
└── vue.config.js      # Vue CLI 配置文件（可选）

运行项目

进入项目目录并启动开发服务器：

cd my-project
npm run serve

开发服务器默认运行在 http://localhost:8080，打开浏览器即可访问项目。

构建生产版本

使用以下命令构建生产环境代码：

npm run build

构建后的文件会生成在 dist/ 目录中，可以直接部署到服务器。

配置 Vue CLI

如果需要自定义配置，可以在项目根目录创建或修改 vue.config.js 文件。例如，配置开发服务器的端口：

module.exports = {
  devServer: {
    port: 3000
  }
}

添加插件

Vue CLI 支持通过插件扩展功能。例如，添加 Vue Router：

vue add router

插件会自动安装依赖并修改项目配置。

使用 Vue UI

Vue CLI 提供了图形化界面管理项目：

vue ui

通过浏览器访问 http://localhost:8000，可以可视化地创建、管理和监控项目。

常见命令总结

• npm run serve：启动开发服务器。
• npm run build：构建生产版本。
• npm run lint：运行代码检查。
• vue add [plugin]：添加插件。

通过 Vue CLI，可以快速搭建和配置 Vue.js 项目，提高开发效率。