项目工程化--vue脚手架

Vue CLI 脚手架使用指南

Vue CLI 是 Vue 2 时代官方提供的脚手架工具，底层基于 Webpack。虽然 Vue 3 项目现在更推荐用 Vite，但很多老项目仍在使用 Vue CLI，掌握其基础用法是必要的。

核心命令速览
创建项目
项目运行
项目配置
- 环境变量
- 核心配置文件 vue.config.js
插件管理
性能优化
项目结构

核心命令速览

命令	作用
`vue create 项目名`	创建新项目
`npm run serve`	启动开发服务器
`npm run build`	生产环境构建
`npm run lint`	代码检查

创建项目

vue create my-project

注意：项目名不能包含大写字母和特殊符号，一般使用小写字母加连字符。

运行后会进入交互式配置：

选择Vue版本

选择 Vue 2 或 Vue 3 后，等待依赖安装完成即可。

创建成功

补充命令

# 跳过 Git 初始化
vue create --skip-git 项目名

# 使用预设创建（适合团队统一配置）
vue create --preset 预设名 项目名

项目运行

# 启动开发服务器（默认端口 8080）
npm run serve

# 指定端口
npm run serve -- --port 3000

# 生产构建
npm run build

# 构建并生成分析报告
npm run build --report

关于 npm run dev 与 npm run serve：

Vue CLI 3.x 及以上使用 npm run serve
这是指 CLI 工具本身的版本，不是 Vue 的版本
如果需要 npm run dev 作为别名，可以在 package.json 中手动添加：

{
  "scripts": {
    "serve": "vue-cli-service serve",
    "dev": "vue-cli-service serve",
    "build": "vue-cli-service build"
  }
}

项目配置

环境变量

在项目根目录创建 .env 文件，文件名与环境对应：

.env                 # 所有环境生效
.env.development     # 仅开发环境
.env.production      # 仅生产环境

环境变量内容示例（.env.development）：

VUE_APP_API_URL=http://localhost:3000
VUE_APP_DEBUG=true

注意：变量名必须以 VUE_APP_ 开头才能在代码中通过 process.env.VUE_APP_XXX 访问。

核心配置文件 vue.config.js

vue.config.js 在项目根目录创建，是 Vue CLI 的核心配置文件。

const path = require('path')

module.exports = {
  // 开发服务器配置
  devServer: {
    port: 8080,                   // 端口
    open: true,                   // 自动打开浏览器
    proxy: {                      // 代理（解决跨域）
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''             // 去掉路径中的 /api 前缀
        }
      }
    }
  },

  // 生产构建
  outputDir: 'dist',              // 输出目录
  assetsDir: 'static',            // 静态资源目录
  productionSourceMap: false,     // 关闭 sourcemap，减小体积

  // 路径别名
  configureWebpack: {
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src')
      }
    }
  },

  // CSS 配置（可选）
  css: {
    loaderOptions: {
      sass: {
        additionalData: `@import "@/styles/variables.scss";`
      }
    }
  }
}

使用 CSS 预处理器（按需安装）：

npm install sass-loader sass --save-dev

插件管理

# 添加路由
vue add router

# 添加状态管理
vue add vuex

# 添加 TypeScript
vue add typescript

性能优化

分析构建体积

npm run build --report

CDN 引入大型库

在 vue.config.js 中排除不需要打包的库：

module.exports = {
  configureWebpack: {
    externals: {
      'vue': 'Vue',
      'element-ui': 'ELEMENT'
    }
  }
}

在 public/index.html 中引入 CDN：

<link href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" rel="stylesheet">

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

这样 Vue 和 ElementUI 就不会被打包进项目，体积显著减小，且可利用 CDN 缓存加速访问。

项目结构

my-project/
├── public/                # 静态资源（不参与打包）
│   └── index.html         # 入口 HTML 模板
├── src/                   # 源码目录
│   ├── assets/            # 静态资源（参与打包）
│   ├── components/        # 公共组件
│   ├── views/             # 页面组件
│   ├── router/            # 路由配置
│   ├── store/             # 状态管理（Vuex）
│   ├── App.vue            # 根组件
│   └── main.js            # 入口文件
├── .env.development       # 开发环境变量
├── .env.production        # 生产环境变量
├── vue.config.js          # 项目配置
└── package.json           # 依赖管理

总结：Vue CLI 的核心就三个命令 —— vue create 创建项目，npm run serve 启动开发，npm run build 打包上线。环境变量用 VUE_APP_ 前缀，代理和别名在 vue.config.js 里配置，性能优化优先考虑 CDN 引入大型库。掌握这些就能应付大多数 Vue 2 / Vue 3 项目的日常开发。

posted @ 2025-12-05 09:59 aitty 阅读(69) 评论(0) 收藏举报

刷新页面返回顶部

aitty大魔王的学习历程

aitty