项目工程化--vue脚手架
Vue CLI 脚手架使用指南
一、项目创建与基础命令
基础项目创建
# 创建新项目（交互式配置）★★★★★ 核心命令
vue create 项目名
重要操作：使用方向键上下移动，选择 Vue 2 版本（学习阶段建议选择Vue 2）
创建过程（等待依赖安装完成）：
创建成功提示：
图形化管理界面
# 启动图形化界面（可视化项目管理）
vue ui
提示：按
Ctrl+C可退出图形化界面
预设配置创建
# 使用本地预设（适合团队统一配置）
vue create --preset my-preset 项目名
# 使用远程预设（GitHub上的配置模板）
vue create --preset username/repo 项目名
# 创建项目时跳过git初始化 ★★★ 快速创建时使用
vue create --skip-git 项目名
# 保存当前配置为预设 ★★★ 创建标准模板时使用
vue create --save 项目名
预设（Preset）说明：
- 预设是一组预定义的项目配置，包含Vue版本、插件、ESLint规则等
- 本地预设：保存在
~/.vuerc文件（Windows:C:\Users\用户名\.vuerc） - 远程预设：使用GitHub仓库中的配置模板
快速原型开发（不常用）
# 快速运行单个.vue文件（需全局安装 @vue/cli-service-global）
vue serve 文件名.vue
# 构建单个文件
vue build 文件名.vue
重要注意：使用
vue serve时需要在项目目录外执行（如：cd ../）
未安装 @vue/cli-service-global 时的错误提示：
安装命令（此功能较少使用，非必需）：
npm install -g @vue/cli-service-global
二、项目运行与管理 ★★★★★
开发服务器命令
# 启动开发服务器（默认端口8080）★★★★★ 每天必用
npm run serve
# 指定端口启动 ★★★ 端口冲突时使用
npm run serve -- --port 3000
# 或修改package.json配置（永久修改端口）
"scripts": {
"serve": "vue-cli-service serve --port 3000"
}
npm run dev 与 npm run serve 区别
- Vue CLI 2.x：使用
npm run dev - Vue CLI 3.x+：改为
npm run serve - 本质相同：都是启动开发服务器
重要区分：这里指的是 Vue CLI 的版本，不是 Vue.js 的版本
如果需要使用 npm run dev，可以在 package.json 中添加别名：
{
"scripts": {
"serve": "vue-cli-service serve",
"dev": "vue-cli-service serve", // 添加dev别名
"build": "vue-cli-service build"
}
}
其他常用命令
# 生产环境构建 ★★★★★ 项目上线前执行
npm run build
# 构建并生成分析报告 ★★ 性能优化时使用
npm run build --report
# 代码检查 ★★ 团队协作时保证代码规范
npm run lint
# 自动修复lint错误 ★★ 快速修复格式问题
npm run lint -- --fix
# 运行测试
npm run test:unit # 单元测试
npm run test:e2e # 端到端测试
# 查看webpack配置 ★ 高级配置时查看
vue inspect > output.js
三、项目配置详解
环境变量配置 ★★★
在项目根目录创建以下文件：
.env # 所有环境
.env.local # 所有环境（git忽略）
.env.development # 开发环境
.env.production # 生产环境（重要！上线配置）
.env.staging # 预发布环境
环境变量文件示例（.env.development）：
VUE_APP_API_URL=http://localhost:3000 # 开发环境API地址
VUE_APP_DEBUG=true # 开发环境开启调试
核心配置文件（vue.config.js）★★★★★
const path = require('path')
module.exports = {
// 开发服务器配置 ★★★
devServer: {
port: 8080,
open: true, // 自动打开浏览器
proxy: { // 代理配置 ★★★ 解决跨域问题
'/api': {
target: 'http://localhost:3000',
changeOrigin: true,
pathRewrite: {
'^/api': '' // 重要：移除请求路径中的/api前缀
}
}
},
hot: true, // 热更新（开发时自动刷新）
overlay: { // 错误提示覆盖层
warnings: false,
errors: true
}
},
// 生产环境构建配置 ★★★★
outputDir: 'dist', // 输出目录
assetsDir: 'static', // 静态资源目录
productionSourceMap: false, // 关闭sourcemap（减少文件大小）
// 路径别名配置 ★★★★ 提高开发效率
configureWebpack: {
resolve: {
alias: {
'@': path.resolve(__dirname, 'src'), // 重要：src目录别名
'components': '@/components',
'views': '@/views',
'assets': '@/assets',
'utils': '@/utils'
}
}
},
// CSS相关配置 ★★
css: {
extract: true, // 生产环境提取CSS（性能优化）
sourceMap: false, // 关闭CSS sourcemap
// 加载器选项配置 ★
loaderOptions: {
// CSS预处理器配置
sass: {
additionalData: `@import "@/styles/variables.scss";` // 全局变量引入
},
scss: {
additionalData: `@import "@/styles/variables.scss";`
},
less: {
lessOptions: {
modifyVars: {
'primary-color': '#1890ff' // 修改Less主题变量
}
}
}
}
},
// 多页面配置 ★ 特殊需求时使用
pages: {
index: {
entry: 'src/main.js',
template: 'public/index.html',
filename: 'index.html'
},
admin: {
entry: 'src/admin.js',
template: 'public/admin.html',
filename: 'admin.html'
}
},
// 插件配置 ★★ 高级定制
chainWebpack: config => {
// 修改html-webpack-plugin配置
config.plugin('html').tap(args => {
args[0].title = '我的Vue应用'
return args
})
}
}
CSS加载器配置说明
Vue CLI 内置支持以下CSS预处理器（按需安装）：
- 原生CSS：无需额外配置
- Sass/SCSS：需要安装
sass-loader和sass - Less：需要安装
less-loader和less - Stylus：需要安装
stylus-loader和stylus
安装示例：
# 安装Sass ★ 常用
npm install sass-loader sass --save-dev
# 安装Less
npm install less-loader less --save-dev
# 安装Stylus
npm install stylus-loader stylus --save-dev
四、插件管理
常用插件添加 ★★★
# 路由管理 ★★★★★ Vue项目必备
vue add router
# 状态管理 ★★★★ 中大型项目需要
vue add vuex
# TypeScript支持 ★★ 类型安全项目使用
vue add typescript
# UI框架 ★★★ 快速搭建界面
vue add element-ui
vue add vuetify
# PWA支持 ★ 渐进式Web应用
vue add pwa
# 测试工具 ★ 企业级项目
vue add @vue/unit-jest # 单元测试
vue add @vue/e2e-cypress # E2E测试
插件配置示例
添加插件后，通常需要根据提示进行配置：
- Vue Router：选择路由模式（hash/history）★★★★★
- Vuex：创建store目录结构 ★★★★
- TypeScript：选择class风格的组件语法等 ★★
五、实用技巧
1. 现代模式构建 ★★
# 构建现代浏览器版本（更小的包体积）
npm run build --modern
2. 性能优化 ★★★★
# 分析构建文件大小（重要：优化前必做）
npm run build --report
# 查看bundle分析报告
# 报告文件生成在 dist/report.html
3. 清除缓存 ★★★ 解决依赖问题
# 清理node_modules并重新安装
rm -rf node_modules package-lock.json
npm cache clean --force
npm install
# Windows PowerShell
Remove-Item -Recurse -Force node_modules
Remove-Item package-lock.json
npm cache clean --force
npm install
4. 版本管理 ★
# 查看Vue CLI版本
vue --version
# 查看项目Vue版本
npm list vue
# 查看CLI服务版本
npm list @vue/cli-service
# 检查过期的包
vue outdated
六、项目结构说明 ★★★★
my-project/
├── node_modules/ # 依赖包（不要手动修改）
├── public/ # 静态资源（不参与打包）★★★★
│ ├── index.html # 入口HTML模板（重要！）
│ ├── favicon.ico # 网站图标
│ └── robots.txt # 搜索引擎爬虫配置
├── src/ # 源码目录（主要工作区）★★★★★
│ ├── assets/ # 静态资源（参与打包）
│ │ ├── images/ # 图片文件
│ │ └── styles/ # 样式文件
│ ├── components/ # 公共组件（★★★★ 复用组件）
│ ├── views/ # 页面组件（★★★★ 路由页面）
│ ├── router/ # 路由配置（★★★★ Vue Router）
│ ├── store/ # Vuex状态管理（★★★ 状态管理）
│ ├── utils/ # 工具函数（★★★ 公共方法）
│ ├── App.vue # 根组件（★★★★★ 应用入口）
│ └── main.js # 应用入口（★★★★★ 程序起点）
├── tests/ # 测试文件
├── .env.* # 环境变量文件（★★★ 配置管理）
├── .eslintrc.js # ESLint配置
├── babel.config.js # Babel配置
├── vue.config.js # Vue CLI配置（★★★★ 项目配置）
├── package.json # 项目配置（★★★★ 依赖管理）
└── README.md # 项目说明
七、常见问题解决
端口被占用 ★★★
# 指定其他端口启动
npm run serve -- --port 3000
# 查看端口占用情况
netstat -ano | findstr :8080 # Windows
lsof -i :8080 # Mac/Linux
安装依赖失败 ★★★★
# 清理缓存并重新安装（常用解决方案）
npm cache clean --force
npm install
# 或使用淘宝镜像（国内加速）
npm config set registry https://registry.npmmirror.com/
npm install
npm config set registry https://registry.npmjs.org/
构建文件过大 ★★★★ 性能优化重点
1. 使用分析工具（第一步）
npm run build --report
2. 配置代码分割（重要优化手段）
问题：某些大型库打包后体积过大，影响加载速度
方案：在 vue.config.js 中排除这些包，使用CDN引入
// vue.config.js 中的配置
configureWebpack: {
// 配置需要排除的包 ★★★★
externals: {
'vue': 'Vue', // 排除Vue
'element-ui': 'ElementUI', // 排除ElementUI
'cos-js-sdk-v5': 'COS' // 排除COS SDK
},
},
3. 使用CDN引入大型库（配套步骤）
修改 public/index.html：
修改前：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的应用</title>
</head>
<body>
<div id="app"></div>
<!-- 原版：所有资源都打包进bundle -->
</body>
</html>
修改后（添加CDN引入）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的应用</title>
<!-- 重要：引入ElementUI样式CDN -->
<link href="https://unpkg.com/element-ui@2.15.13/lib/theme-chalk/index.css" rel="stylesheet">
</head>
<body>
<div id="app"></div>
<!-- 重要：引入排除的库的CDN版本 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<script src="https://unpkg.com/element-ui@2.15.13/lib/index.js"></script>
<script src="https://cdn.jsdelivr.net/npm/cos-js-sdk-v5@1.3.5/dist/cos-js-sdk-v5.min.js"></script>
</body>
</html>
优化效果：
- 主包体积减小 60% 以上
- 利用CDN缓存，用户二次访问更快
- 并行加载，提升页面打开速度
4. 开启Gzip压缩（服务器配置）
# Nginx配置示例
gzip on;
gzip_min_length 1k;
gzip_comp_level 6;
gzip_types text/plain text/css text/javascript application/javascript application/json;
核心要点总结 ★★★★★
必会基础（每天使用）
- 项目创建：
vue create 项目名 - 启动开发：
npm run serve - 项目构建：
npm run build
重要配置（项目必备）
- 代理配置：解决开发环境跨域问题
- 路径别名：
@指向src目录，提高开发效率 - 环境变量：区分开发、生产环境配置
性能优化（上线前必做）
- CDN引入：排除大型库，减小主包体积
- 代码分析：
npm run build --report查看包大小 - 生产优化：关闭sourcemap，开启Gzip压缩
项目结构（规范管理）
src/components/：可复用组件src/views/：页面级组件src/router/：路由配置src/store/：状态管理（按需）
Vue CLI 的核心优势：
- ✅ 零配置启动：快速创建项目，无需复杂配置
- ✅ 完全可配置：深度定制，满足各种需求
- ✅ 插件生态：丰富插件，一键添加功能
- ✅ 最佳实践：内置Webpack优化，开箱即用
记住：工具是手段，项目是目的，合理使用Vue CLI，专注于Vue.js本身的学习和项目开发！
浙公网安备 33010602011771号