Vue 脚手架

1.脚手架

• 各版本对比

项目	Vue CLI 2.x	Vue CLI 3/4/5	Vite（npm create vue@latest）
npm 包名	vue-cli	@vue/cli	无全局包；使用 create-vue（临时调用）
安装方式	npm i -g vue-cli	npm i -g @vue/cli	npm create vue@latest
命令行入口	全局注册 vue 命令	全局注册 vue 命令	npm create(语法糖)
创建项目命令	vue init webpack my-project	vue create my-project	npm create vue@latest
底层构建工具	Webpack 3/4	Webpack 4/5	开发：Vite 自研服务 生产：Rollup
是否支持 ES5 输出	原生支持	开箱即用（Babel + core-js）	需额外插件
对老旧 WebView 兼容性	极强（可跑在 Android 4.4）	强	弱（默认不兼容旧浏览器）
配置文件	多文件（build/, config/）	vue.config.js	vite.config.js
适用 Vue 版本	Vue 2	Vue 2 / Vue 3（需选择）	Vue 3（默认）Vue 2 需额外插件

• Vue CLI 2.x很旧了，不再推荐使用，本文也不再深究
• vue-cli 和 @vue/cli 操作原理类似，都是全局安装后共用 vue 命令行，因此二者存在冲突，不能同时正常工作
• Vite 使用了 npm create 语法糖，无需全局安装脚手架；它会临时下载并执行 create-vue 包来生成项目
• 关于 ES5 输出：@vue/cli 可通过 package.json 中的 browserslist 配置（如 "ie >= 11"）自动启用 Babel 转译和 polyfill，从而兼容绝大多数电视、机顶盒等低版本 Android WebView 设备。

 "browserslist": [
    "ie >= 11"
  ]

• Vite 适合 Vue 3 项目和现代浏览器环境；如果需要使用 Vue 2，或必须兼容老旧浏览器（如未知型号的智能电视），建议直接使用 @vue/cli

2.sass支持

• Vue CLI 5

npm install sass sass-loader@^10 -D

• Vite

npm install sass -D

• 对比：Vue CLI 5需要安装sass-loader，确保使用10.x版本，与 Vue CLI 5 兼容，而Vite不需要安装sass-loader，因为Vite 内置了 Sass 预处理支持，不需要额外的 loader 概念

3.postcss-px-to-viewport

• 安装（Vue CLI 5 和 Vite 两者一样）

npm install postcss-px-to-viewport -D

• Vue CLI 5配置：在项目根目录创建 postcss.config.js

module.exports = {
  plugins: {
    'postcss-px-to-viewport': {
      viewportWidth: 375, // 设计稿宽度
      viewportHeight: 667, // 设计稿高度
      unitPrecision: 5, // 转换精度
      viewportUnit: 'vw', // 转换单位
      selectorBlackList: ['.ignore', '.hairlines'], // 忽略类名
      minPixelValue: 1, // 最小转换值
      mediaQuery: false // 媒体查询是否转换
    }
  }
}

• Vite 配置：在 vite.config.js 中配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  css: {
    postcss: {
      plugins: [
        require('postcss-px-to-viewport')({
          viewportWidth: 375,
          viewportHeight: 667,
          unitPrecision: 5,
          viewportUnit: 'vw',
          selectorBlackList: ['.ignore', '.hairlines'],
          minPixelValue: 1,
          mediaQuery: false
        })
      ]
    }
  }
})

• Vue CLI 5：使用标准的 PostCSS 配置文件，符合传统工作流
• Vite：将 PostCSS 配置集成到 Vite 配置中，更统一但需要手动设置
• postcss-px-to-viewport 的 selectorBlackList 匹配的是 CSS（或 SCSS/Less 编译后）生成的最终选择器字符串，而不是当前 HTML 元素在挂载的 class