位置：文档库 > JavaScript > 如何使用vue-cli2.9.3

如何使用vue-cli2.9.3

CatchDragon 上传于 2022-11-13 23:00

《如何使用vue-cli2.9.3》

Vue.js作为一款轻量级的前端框架，凭借其渐进式设计和易用性，已成为开发者构建现代化单页应用（SPA）的首选工具之一。而vue-cli作为官方提供的脚手架工具，能够快速生成标准化的项目结构，极大提升开发效率。本文将详细介绍vue-cli 2.9.3版本的安装、配置及使用方法，帮助开发者快速上手。

一、vue-cli 2.9.3简介

vue-cli 2.9.3是Vue官方在2018年发布的脚手架工具版本，属于vue-cli 2.x系列。与后续的vue-cli 3.x/4.x/5.x相比，2.x版本采用基于模板的初始化方式，通过交互式命令行生成项目，适合对项目结构有明确需求的开发者。尽管新版已推出，但2.9.3在旧项目维护或特定场景下仍有使用价值。

二、安装vue-cli 2.9.3

1. 环境准备

在安装vue-cli前，需确保已安装Node.js（建议版本8.x及以上）和npm（建议版本5.x及以上）。可通过以下命令检查版本：

node -v
npm -v

若未安装，可访问Node.js官网下载并安装。

2. 全局安装vue-cli

通过npm全局安装vue-cli 2.9.3：

npm install -g vue-cli@2.9.3

安装完成后，可通过以下命令验证：

vue -V

若显示版本号（如2.9.3），则安装成功。

3. 常见问题解决

若安装失败，可能是权限问题或网络问题。可尝试以下方法：

使用管理员权限运行命令行（Windows）或加sudo（Mac/Linux）
切换npm镜像源（如淘宝镜像）：

npm config set registry https://registry.npmmirror.com

三、初始化Vue项目

1. 创建项目

通过vue init命令初始化项目，需指定模板名称和项目名。vue-cli 2.9.3内置多种模板，常用模板包括：

webpack：完整Webpack配置，支持单文件组件、热重载等
webpack-simple：简化版Webpack配置
browserify：基于Browserify的构建工具

以webpack模板为例：

vue init webpack my-project

执行后，命令行会提示输入项目信息（如项目名、描述、作者等），可直接回车使用默认值。

2. 项目配置选项

在初始化过程中，需关注以下配置：

Install vue-router?：是否安装路由（建议选择Y）
Use ESLint to lint your code?：是否启用代码检查（建议初学者选N）
Set up unit tests?：是否配置单元测试（可选）
Setup e2e tests with Nightwatch?：是否配置端到端测试（可选）

完成配置后，vue-cli会生成项目结构。

3. 进入项目并安装依赖

初始化完成后，进入项目目录并安装依赖：

cd my-project
npm install

依赖安装完成后，项目目录结构如下：

my-project/
├── build/           # Webpack配置文件
├── config/          # 项目配置（如端口、环境变量）
├── src/             # 源代码目录
│   ├── main.js      # 入口文件
│   ├── App.vue      # 根组件
│   └── components/  # 子组件目录
├── static/          # 静态资源
├── test/            # 测试文件
└── package.json     # 项目依赖和脚本

四、运行与开发

1. 启动开发服务器

通过以下命令启动开发服务器：

npm run dev

服务器默认运行在http://localhost:8080，访问后即可看到Vue的欢迎页面。

2. 开发流程

开发时，主要修改src/目录下的文件：

main.js：入口文件，负责创建Vue实例并挂载到DOM
App.vue：根组件，包含页面整体结构
components/：存放子组件，建议按功能模块划分

示例：创建一个简单的HelloWorld组件

1. 在src/components/下新建HelloWorld.vue：

2. 在App.vue中引入并使用该组件：

3. 构建生产版本

开发完成后，可通过以下命令构建生产版本：

npm run build

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

五、项目配置详解

1. 修改Webpack配置

vue-cli 2.9.3的Webpack配置位于build/和config/目录下。常见修改包括：

修改端口：在config/index.js中修改dev.port
配置代理：在config/index.js中添加proxyTable解决跨域问题

示例：配置代理

// config/index.js
module.exports = {
  dev: {
    proxyTable: {
      '/api': {
        target: 'http://your-backend-server.com',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

2. 添加插件或依赖

若需添加第三方库（如axios、vuex），可通过npm安装并在代码中引入：

npm install axios --save
// 在main.js中引入
import axios from 'axios'

3. 自定义环境变量

在config/目录下，可创建.env.development和.env.production文件定义环境变量：

// .env.development
NODE_ENV=development
API_BASE_URL=/api

在代码中通过process.env.API_BASE_URL访问。

六、常见问题与解决

1. 端口被占用

若启动时报端口占用错误，可修改config/index.js中的dev.port，或通过命令行参数指定端口：

npm run dev -- --port 8081

2. ESLint报错

若初始化时选择了ESLint，但代码不符合规范，可通过以下方式解决：

修改ESLint配置：在.eslintrc.js中调整规则
临时禁用ESLint：在build/webpack.base.conf.js中移除ESLint相关loader

3. 跨域问题

开发时若遇到跨域问题，可通过配置代理（如前文所述）或使用Chrome插件（如Allow CORS）临时解决。

七、升级与迁移

若需升级到vue-cli 3.x/4.x/5.x，可参考官方迁移指南。主要区别包括：

vue-cli 3.x+采用插件化架构，通过vue create命令初始化
配置方式从文件配置改为vue.config.js
移除了模板概念，改为通过插件添加功能

八、总结

vue-cli 2.9.3作为一款成熟的脚手架工具，能够帮助开发者快速搭建Vue项目。通过本文的介绍，读者已掌握以下内容：

vue-cli 2.9.3的安装与环境准备
项目初始化与配置选项
开发流程与组件编写
项目构建与部署
常见问题解决与升级迁移

尽管新版vue-cli已推出，但2.9.3在旧项目维护或特定场景下仍有价值。建议开发者根据项目需求选择合适的版本。

关键词

vue-cli 2.9.3、Vue.js、脚手架工具、Webpack、单文件组件、开发服务器、环境变量、跨域代理、ESLint、项目构建

简介

本文详细介绍了vue-cli 2.9.3的安装、配置及使用方法，涵盖项目初始化、开发流程、Webpack配置、环境变量设置及常见问题解决，适合Vue初学者及需要维护旧项目的开发者参考。

立即下载

JavaScript相关