vue cli 简要使用笔记

饼干INK
462 阅读4分钟

本文档基于@vue/cli版本4。

它提供了开箱即用的vue项目脚手架，隐藏了具体的配置，可通过vue-cli-service inspect命令查看webpack配置。同时也能通过在vue.config.js中自行覆盖默认的配置。

基本使用

  • 安装：
npm update -g @vue/cli
  • 创建新项目
vue create my-app

有交互命令进行一些例如vue版本、是否使用TS等选择。

@vue/cli主要包括以下两个核心模块：

@vue/cli-service

开发环境的依赖。基于webpack和webpack dev server。提供了加载其他CLI插件、webpack配置以及提供了例如serve、build等命令（安装了一个名为 vue-cli-service 的命令）。

serve

可通过添加命令行参数或者在vue.config.js文件的devServer字段进行开发服务器的配置。

build

提供了一些命令行参数例如--mode、--dest等，打包生产环境bundle。对文件进行了压缩，vendor chunk splitting。

inspect

查看webpack配置。

@vue/cli-plugin-XX

为项目提供可选功能的npm包。当运行vue-cli-service命令时，会自动加载package.json中列出的插件。

通过调用例如vue add eslint可添加Vue CLI 插件(其他普通包还是直接通过npm安装)，内部会解析为完整包名@vue/cli-plugin-eslint并从npm安装。

有些插件会向vue-cli-service 注入命令vue-cli-service commandName，可通通过npx vue-cli-service help查看所有命令。

工程实践

html

项目根目录下的index.html会被html-webpack-plugin处理。

js

进行了code-spliting，可以在vue.config.js中关闭：

module.exports = {
    chainWebpack: config => {
        config.optimization.delete('splitChunks')
    }
}

css

如果要用预处理器需要安装loader，无需进行其他的配置，例如：

npm install -D sass-loader sass

另外该脚手架内部使用了PostCSS，可以在.postcssrc文件或者vue.config.js的css.loaderOptions.postcss字段进行相应配置。

另外autoprefixer在内部默认已经开启使用。

静态资源

  • 在JS中或者template/css中通过相对路径引入的会被webpack处理
  • 在public目录中的，或者通过绝对路径被引用，不会被webpack处理而是被直接拷贝。

静态资源都打了hash值方便缓存，还进行了preload和prefetch，可在vue.config.js中进行关闭：

module.exports = {
    filenameHashing: false,
    chainWebpacl: config => {
        config.plugins.delete('preload'),
        config.plugins.delete('prefetch')
    }
}

模式

模式决定了构建时webpack的配置内容。

默认有三种模式：

  • 当使用vue-cli-service serve命令时，为development模式
  • 当时用vue-cli-service build或者vue-cli-service test:e2e时候，为production模式
  • 当使用vue-cli-service test:unit为test模式

可以通过添加--mode参数覆盖默认的模式。

注意：当运行vue-cli-service build时，需要始终将NODE_ENV设置为production以便构建部署环境需要的webpack配置。

当运行vue-cli-service命令时，会自动加载环境文件中的环境变量，当环境文件中没有定义NODE_ENV时，它会被设置为--mode的值。

可以在以下几种文件中进行环境变量的设置：

.env                # loaded in all cases
.env.local          # loaded in all cases, ignored by git
.env.[mode]         # only loaded in specified mode
.env.[mode].local   # only loaded in specified mode, ignored by git

只有NODE_ENV, BASE_URL和VUE_APP_开头的变量会被webpack.DefinePlugin注入客户端bundle。所以自定义的一些变量要以VUE_APP_开头。

假设我们还有一个stage环境，需要在项目根目录底下添加一个.env.stage文件，其中设置环境变量：

NODE_ENV=production
VUE_APP_API=https://path/of/stage/api

这样可以在JS或者html模板中引用环境变量：

<script>
  window.API = "<%= process.env.VUE_APP_API %>"
</script>

const API = process.env.VUE_APP_API

在客户端通过process.env.envVarName获取环境变量的值。定义的环境变量也能被注入到html模板中。

输出target

在运行vue-cli-service build时可通过--target参数指定输出的构建目标。其值包括app | lib | wc | wc-async (default: app)

其中app是默认模式，进行了资源自动注入html，第三方库code split到一个单独的vendor，默认小于4K的资源会转base64内联进来，public目录下的静态资源会被原封不动地拷贝到dist目录下。

还能将vue组建输出为web component，该模式下默认不会把vue库打包进来，而是默认使用方会将vue作为全局变量引入(例如CDN方式加载vue)。要避免这样的话可以加--inline-vue参数：

vue-cli-service build --target wc --inline-vue
  • 打包单个vue组件：
vue-cli-service build --target wc --name my-element [entry]

entry需要是某个.vue文件的路径。

  • 打包多个vue文件，可以使用glob匹配：
vue-cli-service build --target wc --name foo 'src/components/*.vue'

--name参数为web components的前缀，最终的名称为--name参数值-vue文件名。例如有个HelloWorld.vue文件，则web components标签名为foo-hello-world。

内部使用了@vue/web-component-wrapper来完成vue组件到web components组件的转换。

avatar
文章
阅读
粉丝