您的位置: 首页  >  IT文章  >  Vue CLI的理解

Vue CLI的理解

分类: IT文章 • 2023-12-25 22:52:55

　　Vue CLI >= 3的版本简化了配置流程，使用起来更方便，让开发人员可以专心撰写业务逻辑。

　　（1）Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，是一款标准的工具。

  • 通过 @vue/cli 搭建交互式的项目脚手架，CLI (@vue/cli) 是一个全局安装的npm包，提供了终端里的vue命令，于是你可以通过vue命令来构建需要的项目：
    • vue create命令创建一个新项目的脚手架
    • vue serve命令构建新想法的原型
    • vue ui命令可以通过一套图形化界面管理你的所有项目
  • 通过@vue/cli + @vue/cli-service-global快速开始零配置原型开发。
  • Vue CLI 的包名称由vue-cli改成了@vue/cli ， 如果你已经全局安装了旧版本的vue-cli(1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。

　　（2）CLI 服务 (@vue/cli-service) 是一个开发环境依赖，它是一个npm包，局部安装在每个@vue/cli创建的项目中。

　　在一个 Vue CLI 项目中，@vue/cli-service安装了一个名为vue-cli-service的命令。你可以在 npm scripts 中以 vue-cli-service、或者从终端中以 ./node_modules/.bin/vue-cli-service访问这个命令。

  • @vue/cli-service是构建与webpack和webpack-dev-server之上
  • @vue/cli-service包含了针对大部分应用优化过的内部的webpack配置
  • 项目内部的vue-cli-service命令提供了serve、build和inspect命令
  • @vue/cli-service实际上大致等价于react-scripts。

　　（3）CLI 插件是向你的 Vue 项目提供可选功能的 npm 包，Vue CLI 插件的名字以 @vue/cli-plugin- (内建插件) 或 vue-cli-plugin- (社区插件) 开头

　　（4）Vue CLI >= 3的版本创建项目和Vue CLI 为1.x和2.x的版本创建项目的区别：

  • 在Vue CLI >= 3的版本中创建项目可以通过vue create my-project-name 命令来完成
  • 在Vue CLI 1.x和2.x的版本中创建项目是通过 vue init webpack my-project-name 命令来完成

　　通过这两种方式创建项目后无需额外的配置就已经可以跑起来了。

　　（5）cache-loader 会默认为 Vue/Babel/TypeScript 编译开启。文件会缓存在 node_modules/.cache 中

　　——如果遇到了编译方面的问题，记得先删掉缓存目录之后再试试看。

　　（6）构建库或是Web Component时的Polyfills

　　当使用 Vue CLI 来构建一个库或是Web Component时，推荐给 @vue/babel-preset-app 传入 useBuiltIns: false 选项。这能够确保你的库或是组件不包含不必要的 polyfills。通常来说，打包 polyfills 应当是最终使用你的库的应用的责任。

　　在.babelrc文件或者babel.config.js文件中配置useBuiltIns的值为false。

// babel.config.js文件
module.exports = {
  presets: [
    [
      '@vue/app',
      {
        useBuiltIns: false
      }
    ]
  ]
}

// .babelrc文件
{
  "presets": [
    [
      '@vue/app',
      {
        useBuiltIns: false
      }
    ]
  ]
}

 　　（7）环境变量和模式

  • 为一个特定模式准备的环境文件的 (例如 .env.production) 将会比一般的环境文件 (例如 .env) 拥有更高的优先级。
  • Vue CLI 启动时已经存在的环境变量拥有最高优先级，并不会被 .env 文件覆写。
  • 只有以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中。
  • VUE_APP_*变量、NODE_ENV变量、BASE_URL变量在你的应用代码中始终可用。

　　（8）如果你在开发一个库或多项目仓库 (monorepo)，请注意导入 CSS 是具有副作用的。请确保在 package.json 中移除 "sideEffects": false，否则 CSS 代码块会在生产环境构建时被 webpack 丢掉。

相关推荐