Vue CLI 4.0极快上手 - 新版本 CLI 用法

引言

Vue CLI（Vue Command Line Interface）是一个用于快速构建Vue.js项目的工具。随着Vue.js的不断发展，Vue CLI也在不断更新，最新版本为4.0。新版本的Vue CLI带来了许多改进和新特性，本文将带您快速了解Vue CLI 4.0的用法和一些常见操作。

安装Vue CLI

首先，我们需要安装Vue CLI。可以使用npm或者yarn来进行安装。

# 使用npm
npm install -g @vue/cli

# 使用yarn
yarn global add @vue/cli

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

创建新项目

使用Vue CLI创建新项目非常简单。新版本的Vue CLI推荐使用Vue 3，但仍然支持Vue 2。

# 创建新项目（Vue 3）
vue create my-vue3-app

# 创建新项目（Vue 2）
vue create my-vue2-app

在创建过程中，您可以选择手动配置项目选项，也可以选择使用预设配置（如默认、手动、包含TypeScript等）。

项目结构

Vue CLI 4.0默认使用了一个更扁平的项目结构，让文件更容易找到。

my-vue3-app/
  ├── node_modules/
  ├── public/
  │   ├── index.html
  │   └── ...
  ├── src/
  │   ├── assets/
  │   ├── components/
  │   ├── App.vue
  │   └── main.js
  ├── .gitignore
  ├── babel.config.js
  ├── package.json
  └── ...

在src文件夹中，App.vue是根组件，main.js是项目的入口文件。

开发服务器

Vue CLI 4.0集成了一个本地开发服务器，可以让您在开发过程中实时预览您的应用程序。

# 启动开发服务器
npm run serve

# 或者使用yarn
yarn serve

开发服务器会在默认端口（通常是8080）上启动。您可以在浏览器中访问http://localhost:8080来查看您的应用程序。

插件和依赖

Vue CLI允许您在创建项目时选择添加插件和依赖。比如，您可以选择添加Vue Router或Vuex等插件。此外，您还可以使用Vue CLI添加其他依赖。

# 添加Vue Router
vue add router

# 添加Vuex
vue add vuex

# 添加其他依赖
vue add vue-eslint

通过这种方式，您可以快速集成和配置常用的插件和依赖，加速项目的开发。

自定义配置

如果您需要对项目的配置进行更精细的控制，Vue CLI也支持自定义配置。可以通过创建一个vue.config.js文件来覆盖默认的配置选项。

// vue.config.js
module.exports = {
  // 配置选项
};

在vue.config.js中，您可以进行各种配置，包括Webpack、DevServer、CSS预处理器等。

构建项目

当项目开发完成后，您可以使用Vue CLI构建生产版本的应用程序。

# 构建项目
npm run build

# 或者使用yarn
yarn build

构建完成后，您将在项目根目录中看到一个dist文件夹，其中包含了构建后的静态文件。您可以将这些文件部署到服务器上，用于生产环境。

总结

Vue CLI 4.0为Vue.js项目的开发和构建提供了更好的工具和流程。通过安装、创建项目、开发服务器、插件和依赖、自定义配置以及构建项目等步骤，您可以更快速、更高效地开发Vue.js应用程序。

参考文献：

• Vue CLI官方文档

这篇好文章是转载于：学新通技术网