Codes►前端

vue-cli

Vue-cli

VueCLI 脚手架

node->npm->nrm

1
2
3
4
//卸载
npm uninstall vue-cli -g
yarn global remove vue-cli
vue create <项目名称>

Vue CLI 脚手架简介

Vue CLI（Vue. js Command Line Interface）是 Vue. js 官方提供的一个脚手架工具，用于快速搭建 Vue. js 项目的基础结构。它通过提供丰富的插件系统和图形用户界面，帮助开发者快速生成和配置项目。

安装 Vue CLI

  1. 安装 Node. js：
    • 首先需要安装 Node. js，因为 Vue CLI 依赖于 Node. js 和 npm。
    • 可以从 Node.js 官网 下载并安装。
  2. 配置 npm 源（可选）：
    • 为了提高 npm 包的下载速度，可以将 npm 源切换到国内镜像，例如使用淘宝 npm 镜像：
      1
      npm config set registry https://registry.npmmirror.com
  3. 安装 Vue CLI：
    • 在命令行中运行以下命令来全局安装 Vue CLI：
      1
      npm install -g @vue/cli
    • 安装完成后，可以通过 vue --version 命令检查 Vue CLI 的版本。

创建 Vue 项目

  1. 创建新项目：
    • 使用 Vue CLI 创建新项目，命令如下：
      1
      vue create my-project
    • 在创建过程中，可以选择不同的预设或手动选择项目所需的功能，如 Babel、TypeScript、Vuex、Vue Router 等。
  2. 启动项目：
    • 进入项目目录：
      1
      cd my-project
    • 启动开发服务器：
      1
      npm run serve
    • 浏览器会自动打开项目页面，通常地址为 http://localhost:8080。

Vue CLI 的特点

  • 快速创建项目：通过交互式向导快速生成项目结构。
  • 插件系统：支持丰富的插件，如状态管理、路由、单元测试等。
  • 图形用户界面：提供图形界面，方便管理和配置项目。
  • 集成现代工具：内置对 Babel、Webpack、ESLint 等工具的支持。
    Vue CLI 是一个非常强大的工具，能够帮助开发者快速搭建和开发 Vue. js 项目，提高开发效率。