怎么用vuecli创立一个vue工程

发布时间：2022-11-25 09:16:08 作者：iii
来源：亿速云阅读：162

怎么用Vue CLI创立一个Vue工程

Vue CLI 是 Vue.js 官方提供的命令行工具，用于快速搭建 Vue.js 项目。它提供了丰富的功能和插件，帮助开发者快速创建、开发和部署 Vue.js 应用。本文将详细介绍如何使用 Vue CLI 创建一个 Vue 工程，并涵盖从安装到项目部署的完整流程。

Vue CLI 简介

Vue CLI 是一个基于 Node.js 的命令行工具，旨在为 Vue.js 开发者提供一套完整的开发工具链。它集成了 Webpack、Babel、ESLint 等现代前端开发工具，并提供了丰富的插件系统，使得开发者可以轻松地扩展项目功能。

Vue CLI 的主要功能包括：

项目脚手架：快速生成 Vue.js 项目结构。
开发服务器：内置开发服务器，支持热重载。
插件系统：通过插件扩展项目功能，如 TypeScript、Vuex、Router 等。
构建工具：支持生产环境的代码打包和优化。
图形化界面：提供 Vue CLI UI，方便管理项目和插件。

安装 Vue CLI

在开始创建 Vue 工程之前，首先需要安装 Vue CLI。Vue CLI 依赖于 Node.js 和 npm（Node Package Manager），因此需要确保系统中已经安装了 Node.js。

1. 安装 Node.js

如果尚未安装 Node.js，可以从 Node.js 官网下载并安装最新版本的 Node.js。安装完成后，可以通过以下命令检查 Node.js 和 npm 是否安装成功：

node -v
npm -v

2. 安装 Vue CLI

安装 Node.js 后，可以通过 npm 全局安装 Vue CLI：

npm install -g @vue/cli

安装完成后，可以通过以下命令检查 Vue CLI 是否安装成功：

vue --version

如果成功安装，命令行将显示 Vue CLI 的版本号。

创建 Vue 工程

安装完 Vue CLI 后，就可以使用它来创建一个新的 Vue 工程了。

1. 创建项目

使用以下命令创建一个新的 Vue 项目：

vue create my-vue-project

其中，my-vue-project 是项目的名称，可以根据需要修改。

2. 选择预设配置

执行上述命令后，Vue CLI 会提示选择项目的预设配置。Vue CLI 提供了两种选择：

默认配置：使用 Vue 3 或 Vue 2 的默认配置，适合快速启动项目。
手动选择功能：允许开发者自定义项目配置，如选择 Vue 版本、添加 TypeScript、Vuex、Router 等。

2.1 默认配置

如果选择默认配置，Vue CLI 会直接生成一个基于 Vue 3 或 Vue 2 的项目结构。

2.2 手动选择功能

如果选择手动选择功能，Vue CLI 会提示选择以下功能：

Babel：用于将 ES6+ 代码转换为兼容性更好的 ES5 代码。
TypeScript：支持使用 TypeScript 开发 Vue 项目。
Progressive Web App (PWA) Support：为项目添加 PWA 支持。
Router：添加 Vue Router 支持。
Vuex：添加 Vuex 状态管理支持。
CSS Pre-processors：支持使用 Sass、Less 等 CSS 预处理器。
Linter / Formatter：添加 ESLint 或 Prettier 支持，用于代码风格检查和格式化。
Unit Testing：添加单元测试支持。
E2E Testing：添加端到端测试支持。

选择完所需功能后，Vue CLI 会继续询问一些配置选项，如选择 Vue 版本、是否使用历史模式的 Vue Router 等。

3. 安装依赖

配置完成后，Vue CLI 会自动安装项目所需的依赖包。安装完成后，项目目录结构将生成在当前目录下。

项目结构解析

使用 Vue CLI 创建的项目具有以下典型的目录结构：

my-vue-project/
├── node_modules/          # 项目依赖包
├── public/                # 静态资源目录
│   ├── index.html         # 项目入口 HTML 文件
│   └── favicon.ico        # 网站图标
├── src/                   # 项目源代码目录
│   ├── assets/            # 静态资源，如图片、字体等
│   ├── components/        # Vue 组件
│   ├── views/             # 页面视图组件（如果使用了 Vue Router）
│   ├── App.vue            # 根组件
│   ├── main.js            # 项目入口文件
│   └── router.js          # 路由配置文件（如果使用了 Vue Router）
├── .gitignore             # Git 忽略文件配置
├── babel.config.js        # Babel 配置文件
├── package.json           # 项目依赖和脚本配置
├── README.md              # 项目说明文件
└── vue.config.js          # Vue CLI 配置文件

1. `public/` 目录

public/ 目录用于存放静态资源文件，如 index.html 和 favicon.ico。index.html 是项目的入口 HTML 文件，Vue 应用将挂载到该文件中的 <div id="app"></div> 元素上。

2. `src/` 目录

src/ 目录是项目的源代码目录，包含以下子目录和文件：

assets/：存放静态资源文件，如图片、字体等。
components/：存放 Vue 组件文件。
views/：存放页面视图组件，通常与 Vue Router 配合使用。
App.vue：项目的根组件，所有其他组件都将嵌套在该组件中。
main.js：项目的入口文件，负责初始化 Vue 实例并挂载到 DOM 上。
router.js：路由配置文件，定义了项目的路由规则。

3. `package.json`

package.json 文件定义了项目的依赖包和脚本命令。通过 npm install 命令可以安装所有依赖包，而 npm run serve 命令可以启动开发服务器。

4. `vue.config.js`

vue.config.js 是 Vue CLI 的配置文件，允许开发者自定义 Webpack 配置、开发服务器设置等。

运行和调试项目

创建完项目后，可以通过以下命令启动开发服务器：

npm run serve

执行该命令后，Vue CLI 会启动一个本地开发服务器，并自动打开浏览器访问 http://localhost:8080。在开发过程中，Vue CLI 支持热重载，即修改代码后，浏览器会自动刷新以显示最新效果。

1. 调试工具

Vue 提供了官方的浏览器调试工具 Vue Devtools，可以帮助开发者更方便地调试 Vue 应用。安装 Vue Devtools 后，可以在浏览器的开发者工具中查看 Vue 组件的状态、事件、路由等信息。

2. 代码格式化

如果项目配置了 ESLint 或 Prettier，可以通过以下命令自动格式化代码：

npm run lint

该命令会检查代码风格并自动修复部分问题。

添加插件和依赖

Vue CLI 提供了丰富的插件系统，允许开发者轻松扩展项目功能。可以通过以下命令添加插件：

vue add plugin-name

例如，添加 Vue Router 插件：

vue add router

添加 Vuex 插件：

vue add vuex

1. 安装第三方依赖

除了使用 Vue CLI 插件外，还可以通过 npm 安装第三方依赖包。例如，安装 Axios 用于发送 HTTP 请求：

npm install axios

安装完成后，可以在项目中引入并使用 Axios：

import axios from 'axios';

axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data);
  });

打包和部署

当项目开发完成后，可以通过以下命令将项目打包为生产环境代码：

npm run build

执行该命令后，Vue CLI 会将项目代码打包到 dist/ 目录下。打包后的代码经过压缩和优化，适合部署到生产环境。

1. 部署到服务器

将 dist/ 目录下的文件上传到服务器，配置 Web 服务器（如 Nginx、Apache）以提供静态文件服务即可。

2. 部署到 GitHub Pages

如果希望将项目部署到 GitHub Pages，可以使用 gh-pages 工具：

npm install gh-pages --save-dev

然后在 package.json 中添加以下脚本：

"scripts": {
  "deploy": "gh-pages -d dist"
}

执行以下命令将项目部署到 GitHub Pages：

npm run build
npm run deploy

常见问题与解决方案

1. Vue CLI 安装失败

如果安装 Vue CLI 时遇到问题，可以尝试以下解决方案：

确保 Node.js 和 npm 已正确安装。
清除 npm 缓存并重新安装：

  npm cache clean --force
  npm install -g @vue/cli

2. 项目启动失败

如果项目启动失败，可以检查以下问题：

确保所有依赖包已正确安装：

  npm install

检查端口是否被占用，可以修改 vue.config.js 中的 devServer.port 配置。

3. 打包后页面空白

如果打包后页面空白，可以检查以下问题：

确保 publicPath 配置正确，特别是在部署到子路径时。
检查路由配置是否正确，特别是使用了历史模式的路由。

总结

通过 Vue CLI，开发者可以快速创建、开发和部署 Vue.js 项目。本文详细介绍了如何使用 Vue CLI 创建一个 Vue 工程，并涵盖了从安装到项目部署的完整流程。希望本文能帮助你更好地理解和使用 Vue CLI，提升 Vue.js 开发效率。