Vue 脚手架（Vue CLI）开发完全指南

这里整理一份从 0 到 1 上手 Vue 脚手架开发的完整教程，包含安装、创建项目、目录、运行、打包、常用配置、实战开发流程，新手直接跟着做就能跑起来。

一、什么是 Vue 脚手架（Vue CLI）

Vue CLI = 官方快速搭建 Vue 项目的工具

不用你手动配置 webpack、babel、热更新、打包等，一键生成完整项目，直接写业务代码。

二、环境准备（必须先做）

1. 安装 Node.js

去官网下载安装：https://nodejs.org/

推荐 LTS 长期稳定版

检查是否安装成功：

bash

运行

node -vnpm -v

2. 安装 Vue 脚手架

打开终端执行：

bash

运行

npm install -g @vue/cli

检查是否成功：

bash

运行

vue -V

三、创建 Vue 项目（3 步搞定）

1. 进入你想放项目的文件夹

bash

运行

cd 你的文件夹路径

2. 创建项目

bash

运行

vue create my-project

my-project 是项目名，可自定义

3. 选择配置（新手推荐）

选择 Default ([Vue 2] babel, eslint)

或 Default (Vue 3) 都行

等待自动生成项目…

4.或使用yarn安装 如下：

yangyanping@yangyaningdeAir web % yarn global add @vue/cliyarn global v1.22.22[1/4]   Resolving packages...⠁ (node:3447) [DEP0169] DeprecationWarning: `url.parse()` behavior is not standardized and prone to errors that have security implications. Use the WHATWG URL API instead. CVEs are not issued for `url.parse()` vulnerabilities.(Use `node --trace-deprecation ...` to show where the warning was created)[2/4]   Fetching packages...[3/4]   Linking dependencies...[4/4]   Building fresh packages...success Installed "@vue/cli@5.0.9" with binaries:      - vue✨  Done in 3.16s.yangyanping@yangyaningdeAir web % vue --version@vue/cli 5.0.9

使用 vue create project-name创建项目

yangyanping@yangyaningdeAir web % vue create yyp-webVue CLI v5.0.9? Please pick a preset: (Use arrow keys)❯ Default ([Vue 3] babel, eslint)   Default ([Vue 2] babel, eslint)   Manually select features 

选择 [Vue 2] 创建项目

Vue CLI v5.0.9? Please pick a preset: Default ([Vue 2] babel, eslint)Vue CLI v5.0.9✨  Creating project in /Users/yangyanping/Downloads/yyp/web/yyp-web.  Initializing git repository...⚙️  Installing CLI plugins. This might take a while...yarn install v1.22.22info No lockfile found.[1/4]   Resolving packages...[2/4]   Fetching packages...[3/4]   Linking dependencies...success Saved lockfile.✨  Done in 15.32s.  Invoking generators...  Installing additional dependencies...yarn install v1.22.22[1/4]   Resolving packages...[2/4]   Fetching packages...[3/4]   Linking dependencies...[4/4]   Building fresh packages...success Saved lockfile.✨  Done in 6.35s.⚓  Running completion hooks...  Generating README.md...  Successfully created project yyp-web.  Get started with the following commands: $ cd yyp-web $ yarn serve

启动项目

yangyanping@yangyaningdeAir web % cd yyp-web yangyanping@yangyaningdeAir yyp-web % yarn serveyarn run v1.22.22$ vue-cli-service serve INFO  Starting development server... DONE  Compiled successfully in 5759ms                                                                                          10:33:55  App running at:  - Local:   http://localhost:8082/   - Network: http://192.168.31.90:8082/  Note that the development build is not optimized.  To create a production build, run yarn build.

四、项目目录

my-project/├── node_modules/    # 依赖包（不用动）├── public/          # 静态资源（不打包）├── src/             # ✅ 你 99% 工作都在这里│   ├── assets/      # 图片、样式│   ├── components/  # 公共组件│   ├── App.vue      # 根组件│   └── main.js      # 入口文件├── .gitignore       # git 忽略文件├── package.json     # 项目配置、命令└── README.md        # 说明

五、启动 / 打包项目（最常用两条命令）

1. 启动开发环境（本地运行）

bash

运行

npm run serve

或

yarn serve

运行成功后打开：

http://localhost:8080

2. 打包上线（生成 dist 文件夹）

bash

运行

npm run build

打包完把 dist 文件夹 丢给后端 / 服务器部署即可。

六、vue.config.js 核心配置（必加！）

项目根目录新建 vue.config.js，复制下面内容直接用：

javascript

运行

const { defineConfig } = require('@vue/cli-service')module.exports = defineConfig({  // 打包路径（解决白屏）  publicPath: './',  // 关闭 eslint 严格检查  lintOnSave: false,  // 开发服务器  devServer: {    open: true, // 自动打开浏览器    port: 8080, // 端口    // 跨域代理    proxy: {      '/api': {        target: 'http://localhost:3000', // 后端接口        changeOrigin: true      }    }  },  // 路径别名 @ = src  configureWebpack: {    resolve: {      alias: {        '@': require('path').resolve(__dirname, 'src')      }    }  },  // 生产关闭源码  productionSourceMap: false})

七、Vue 组件开发基础（.vue 文件）

一个 Vue 单文件组件由 3 部分组成：

vue

[xss_clean]// JS 逻辑export default {  data() {    return {      msg: 'Hello Vue 脚手架'    }  }}[xss_clean]

八、脚手架开发标准流程（企业级）

1. 创建项目
2. vue create project
3. 配置 vue.config.js
4. 跨域、别名、打包等
5. 新建页面 / 组件
6. views/ 放页面
7. components/ 放公共组件
8. 配置路由（vue-router）
9. 页面跳转
10. 封装请求（axios）
11. 调用后端接口
12. 开发调试
13. npm run serve
14. 打包上线
15. npm run build

九、新手最常见 3 个问题

1. 打包后页面白屏

解决：vue.config.js 加

js

publicPath: './'

2. 本地请求跨域

解决：配置 devServer.proxy 代理

3. 路径太长不好写

解决：用 @ 代表 src

js

import Home from '@/views/Home.vue'

总结

1. Vue CLI 是官方一键生成项目的工具，不用手动搭环境；
2. 核心命令：npm run serve（运行）、npm run build（打包）；
3. vue.config.js 是脚手架配置核心；
4. 开发都在 src 目录，组件写在 .vue 文件里。