Vue CLI 是官方提供的 Vue.js 项目脚手架工具，帮助开发者快速搭建基于 Vue 的现代化项目结构，集成开发、构建和管理功能。

Vue CLI 介绍

1. 什么是 Vue CLI？

Vue CLI（Command Line Interface）是一个基于 Node.js 的脚手架工具。
通过命令行快速生成 Vue 项目模板，支持插件扩展、项目配置、开发服务器和构建工具。
让你专注于业务开发，减少重复搭建环境的时间。

2. 安装 Vue CLI

确保你已安装 Node.js（版本 >= 8），然后在终端运行：

npm install -g @vue/cli
# 或 yarn 全局安装
yarn global add @vue/cli

安装完成后，可以通过下面命令查看版本验证：

vue --version

3. 创建新项目

在你想创建项目的目录下执行：

vue create my-project

会进入交互式选择：

选择默认预设（babel + eslint 等）
或手动选择特性（Router、Vuex、TypeScript、PWA 支持、测试工具等）

选择完成后，Vue CLI 会自动下载依赖并生成项目结构。

4. 运行项目

进入项目目录：

cd my-project
npm run serve
# 或 yarn serve

默认启动本地开发服务器，通常是 http://localhost:8080 ，支持热更新。

5. 项目结构简述

my-project/
├── node_modules/        # 依赖包
├── public/              # 静态资源
│   └── index.html       # 入口HTML模板
├── src/                 # 源代码
│   ├── assets/          # 静态资源（图片等）
│   ├── components/      # Vue组件
│   ├── App.vue          # 根组件
│   └── main.js          # 入口JS文件
├── babel.config.js      # Babel配置
├── package.json         # 项目信息及依赖
└── vue.config.js        # 可选的Vue CLI配置文件

6. 常用命令

命令	说明
`npm run serve`	启动开发服务器
`npm run build`	生产环境构建
`npm run lint`	代码格式检查
`vue add <plugin>`	添加官方插件，如 Vue Router、Vuex

7. Vue CLI 特点

支持插件化，灵活配置。
集成 Webpack，开箱即用。
支持多种预设，简化配置过程。
支持 UI 图形界面管理项目（vue ui 命令）。
支持多种前端现代技术栈。

好的！我帮你整理一套系统的 Vue CLI 全面教程，包含：

Vue CLI 新手详细项目创建及配置
Vue Router 和 Vuex 集成示例
多环境配置（开发/生产环境切换）
配合 Element UI 和 Ant Design Vue UI 库使用

Vue CLI 全面教程

1. Vue CLI 新手详细项目创建及配置

安装 Vue CLI

npm install -g @vue/cli

创建项目

vue create my-vue-app

选择手动配置：

Babel
Router
Vuex
Linter / Formatter
选择 Vue 版本（2.x 或 3.x）

进入项目，启动开发服务器

cd my-vue-app
npm run serve

浏览器打开 http://localhost:8080

项目结构讲解

src/main.js：入口文件，初始化 Vue 实例。
src/App.vue：根组件。
src/components/：子组件目录。
public/index.html：HTML 模板。

2. Vue Router 和 Vuex 集成示例

安装（如果没选安装）

npm install vue-router@4   # Vue 3
npm install vuex@4         # Vue 3

# Vue 2 版本请安装对应版本 vue-router@3 vuex@3

src/router/index.js

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
]

const router = createRouter({
  history: createWebHistory(),
  routes,
})

export default router

src/store/index.js

import { createStore } from 'vuex'

const store = createStore({
  state() {
    return {
      count: 0
    }
  },
  mutations: {
    increment(state) {
      state.count++
    }
  }
})

export default store

src/main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

createApp(App)
  .use(router)
  .use(store)
  .mount('#app')

3. 多环境配置（开发/生产环境切换）

在项目根目录创建环境文件：

.env.development

VUE_APP_API_URL=http://localhost:3000/api

.env.production

VUE_APP_API_URL=https://api.example.com

使用环境变量

console.log(process.env.VUE_APP_API_URL)

构建时 Vue CLI 会自动根据 NODE_ENV 选择环境文件。

4. UI 库集成示例

4.1 Element Plus（Vue 3 版本）

npm install element-plus

main.js

import { createApp } from 'vue'
import App from './App.vue'

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

使用组件

<template>
  <el-button type="primary">按钮</el-button>
</template>

4.2 Ant Design Vue

npm install ant-design-vue@next

main.js

import { createApp } from 'vue'
import App from './App.vue'

import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'

const app = createApp(App)
app.use(Antd)
app.mount('#app')

使用组件

<template>
  <a-button type="primary">按钮</a-button>
</template>

总结

Vue CLI 快速生成项目，集成 Router、Vuex 等
支持多环境配置，方便区分开发和生产
UI 库 Element Plus 和 Ant Design Vue 简单引入，丰富组件功能

好的！下面我帮你整理一个超详细、系统全面的 Vue CLI 入门到进阶全套教程，包含：

Vue CLI 全面实战教程（零基础到进阶）

1. 环境准备与安装 Vue CLI

安装 Node.js

访问 Node.js 官网下载并安装（建议 LTS 版本）。

安装 Vue CLI

npm install -g @vue/cli

验证：

vue --version

2. 使用 Vue CLI 创建项目

vue create my-vue-app

创建方式

默认预设：快速生成带 Babel、ESLint 的项目
手动选择功能：可选 Router、Vuex、CSS 预处理器、TypeScript 等

选择示例：

Babel
Router
Vuex
Linter / Formatter
Unit Testing (可选)

3. 项目结构详解

my-vue-app/
├── node_modules/         # 依赖包
├── public/               # 静态资源和 index.html
├── src/
│   ├── assets/           # 图片、样式等资源
│   ├── components/       # Vue 组件
│   ├── views/            # 页面视图组件（配合路由）
│   ├── router/           # 路由配置
│   ├── store/            # Vuex 状态管理
│   ├── App.vue           # 根组件
│   └── main.js           # 入口文件
├── .env.development      # 开发环境变量
├── .env.production       # 生产环境变量
├── babel.config.js       # Babel 配置
├── package.json          # 依赖及脚本配置
└── vue.config.js         # Vue CLI 配置扩展（可选）

4. 路由（Vue Router）配置和使用

安装（如果没选）

npm install vue-router@4    # Vue 3

代码示例：`src/router/index.js`

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'

const routes = [
  { path: '/', name: 'Home', component: Home },
  { path: '/about', name: 'About', component: About },
]

const router = createRouter({
  history: createWebHistory(),
  routes,
})

export default router

挂载路由

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

createApp(App)
  .use(router)
  .mount('#app')

5. 状态管理（Vuex）配置和使用

安装（如果没选）

npm install vuex@4    # Vue 3

`src/store/index.js` 示例

import { createStore } from 'vuex'

export default createStore({
  state: {
    count: 0,
  },
  mutations: {
    increment(state) {
      state.count++
    }
  },
  actions: {},
  getters: {},
})

挂载 Vuex

import store from './store'

createApp(App)
  .use(store)
  .mount('#app')

使用示例（组件中）

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">增加</button>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'

export default {
  computed: {
    ...mapState(['count'])
  },
  methods: {
    ...mapMutations(['increment'])
  }
}
</script>

6. 多环境变量配置

创建环境文件

.env.development

VUE_APP_API_URL=http://localhost:3000/api

.env.production

VUE_APP_API_URL=https://api.production.com/api

使用环境变量

console.log(process.env.VUE_APP_API_URL)

构建时自动加载对应环境。

7. UI 组件库集成

7.1 Element Plus（Vue 3）

npm install element-plus

main.js

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

createApp(App).use(ElementPlus).mount('#app')

使用

<template>
  <el-button type="primary">按钮</el-button>
</template>

7.2 Ant Design Vue

npm install ant-design-vue@next

main.js

import { createApp } from 'vue'
import App from './App.vue'
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'

createApp(App).use(Antd).mount('#app')

使用

<template>
  <a-button type="primary">按钮</a-button>
</template>

8. 进阶配置

8.1 代理配置（解决跨域）

在项目根目录创建或修改 vue.config.js：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000', // 后端服务地址
        changeOrigin: true,
        pathRewrite: { '^/api': '' },
      }
    }
  }
}

8.2 代码分割和懒加载路由

const About = () => import('../views/About.vue')

9. Composition API 简单示例

<template>
  <div>{{ count }}</div>
  <button @click="increment">增加</button>
</template>

<script setup>
import { ref } from 'vue'

const count = ref(0)
function increment() {
  count.value++
}
</script>

10. 常用命令

命令	说明
`npm run serve`	启动开发服务器
`npm run build`	生产环境打包
`npm run lint`	代码格式检查
`vue add <plugin>`	添加 Vue CLI 官方插件
`vue ui`	图形化界面管理 Vue 项目

总结

Vue CLI 让 Vue 项目搭建快速、灵活。
集成路由、状态管理、UI 库提升开发效率。
支持多环境配置和代理，适合各种开发场景。
进阶技巧包括代码分割、Composition API 使用等。

一	二	三	四	五	六	日
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	31

vue-cli

Vue CLI 介绍

1. 什么是 Vue CLI？

2. 安装 Vue CLI

3. 创建新项目

4. 运行项目

5. 项目结构简述

6. 常用命令

7. Vue CLI 特点

Vue CLI 全面教程

1. Vue CLI 新手详细项目创建及配置

安装 Vue CLI

创建项目

进入项目，启动开发服务器

项目结构讲解

2. Vue Router 和 Vuex 集成示例

安装（如果没选安装）

src/router/index.js

src/store/index.js

src/main.js

3. 多环境配置（开发/生产环境切换）

在项目根目录创建环境文件：

使用环境变量

4. UI 库集成示例

4.1 Element Plus（Vue 3 版本）

main.js

使用组件

4.2 Ant Design Vue

main.js

使用组件

总结

Vue CLI 全面实战教程（零基础到进阶）

1. 环境准备与安装 Vue CLI

安装 Node.js

安装 Vue CLI

2. 使用 Vue CLI 创建项目

创建方式

3. 项目结构详解

4. 路由（Vue Router）配置和使用

安装（如果没选）

代码示例：src/router/index.js

挂载路由

5. 状态管理（Vuex）配置和使用

安装（如果没选）

src/store/index.js 示例

挂载 Vuex

使用示例（组件中）

6. 多环境变量配置

创建环境文件

使用环境变量

7. UI 组件库集成

7.1 Element Plus（Vue 3）

7.2 Ant Design Vue

8. 进阶配置

8.1 代理配置（解决跨域）

8.2 代码分割和懒加载路由

9. Composition API 简单示例

10. 常用命令

总结

lichongyang

发表回复 取消回复

代码示例：`src/router/index.js`

`src/store/index.js` 示例

发表回复取消回复