vue-cliの使い方を詳しく解説

今回はvue-cliの使い方について詳しく説明します。vue-cliを使用する際の注意点は何ですか?実際の事例を見てみましょう。

vue-cli

開発前に、vue の公式ドキュメントと API を少なくとも 1 回読む必要があります (公式ドキュメントを読むことが最も重要であり、英語を読むスキルがある場合は、ブログを読むことをお勧めします)。英語のドキュメントの内容は、少し遅れている場合は、関連する vue-router、axios、vuex などを読む必要があります。

一般に、最初に vue-cli を使用してプロジェクトの基本構造を構築します。

テキスト

まずは、インストール内容について説明します！始まりと終わりがあるために、それはまだいくつかの言葉で急いでいることです。手順は次のとおりです。

vue-cli をインストールする

npm install vue-cli -g

Webpack テンプレートを含むディレクトリをインストールします

vue init webapck webpack-template

この後、IDE を使用してディレクトリを開くことができます。

その後の改訂後の読者の誤解を避けるために、ここで私の vue-cli バージョン 2.9.2 を示します。

まず最初の質問ですが、どこから始めればよいでしょうか？もちろん、webpack.base.conf.js から始めました。これは、開発環境と本番環境の両方で読み込まれるものです。次に、webpack.base.conf.js で使用されるいくつかのファイルから始めることができます。実際、コードからわかるように、次のファイルがベースで使用されています:

'use strict'
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')

それらは:

• path [パスモジュール]

• ビルドディレクトリのutils.jsファイル

• configディレクトリのインデックスファイル

• ビルドディレクトリのvue-loader.conf.jsファイル

パス パス

このモジュールはnodejsの公式サイトで紹介されており、実際にnodeを学習する際によく使われているのを見かけるモジュールです。

path モジュールは、ファイルの処理とディレクトリ パス

utils.js

のためのツールを提供します 実際、名前だけから、このコードがスキャフォールディング全体のメソッドを提供している可能性があると推測できます。まず、ヘッダーによって参照されるリソース ファイルを見てみましょう:

const path = require('path')
const config = require('../config')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const packageConfig = require('../package.json')

同様に、config ディレクトリ内のパス モジュールと Index.js ファイルも参照し、その後に npm パッケージ (extract-text-webpack-plugin) が続きます。このパッケージは、css と js のコンテンツを分離するために使用されます。それについては後でさらに詳しく知ることができます。同時に、json ファイルである package.json ファイルも参照します。これは、ロード後にオブジェクトになります。

したがって、そのヘッドの依存関係から始める必要があります:

path モジュールについては以前に説明したので、ここでは詳しく説明しません。 config ディレクトリ内の Index.js ファイルを分析できます。

index.js

実際、このファイルには十分なコード コメントがあり、それをさらに詳しく調べることもできます。

コードから、オブジェクトが module.exports 経由でエクスポートされていることがわかります。これには、dev と build の 2 つの設定が含まれています。

開発では、いくつかの構成が設定されており、コードは次のとおりです:

modules.exports = {
 dev: { 
 // Paths
 assetsSubDirectory: 'static',
 assetsPublicPath: '/',
 proxyTable: {}, 
 // Various Dev Server settings
 host: 'localhost', // can be overwritten by process.env.HOST
 port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
 autoOpenBrowser: false,
 errorOverlay: true,
 notifyOnErrors: true,
 poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions- 
 // Use Eslint Loader?
 // If true, your code will be linted during bundling and
 // linting errors and warnings will be shown in the console.
 useEslint: true,
 // If true, eslint errors and warnings will also be shown in the error overlay
 // in the browser.
 showEslintErrorsInOverlay: false, 
 /**
  * Source Maps
  */
 
 // https://webpack.js.org/configuration/devtool/#development
 devtool: 'eval-source-map', 
 // If you have problems debugging vue-files in devtools,
 // set this to false - it *may* help
 // https://vue-loader.vuejs.org/en/options.html#cachebusting
 cacheBusting: true, 
 // CSS Sourcemaps off by default because relative paths are "buggy"
 // with this option, according to the CSS-Loader README
 // (https://github.com/webpack/css-loader#sourcemaps)
 // In our experience, they generally work as expected,
 // just be aware of this issue when enabling this option.
 cssSourceMap: false,
 }
 }

コメントを通じて、静的パス、ローカル サーバー構成項目、Eslint、ソース マップ、および開発環境のその他のパラメーターを構成していることがわかります。開発中に静的リソース ファイル、サーバー ポート、その他の設定を変更する必要がある場合は、このファイルで変更できます。

以下にビルド オブジェクトもあります。これは、vue ローカル サーバーの起動時にパッケージ化される構成であり、コードは次のとおりです。 これには、テンプレート ファイルの変更、ディレクトリをパッケージ化した後のパス設定、gzip 圧縮などが含まれます。これらのフィールドの意味を理解した後は、その後の開発で

プロジェクト要件

に従ってディレクトリの内容を積極的に変更できます。 config の下の Index.js ファイルについて説明した後、utils.js ファイルに戻り、それらがどのような役割を果たしているかを分析するためのメソッドをいくつか見ていきます。

1.assetsPathメソッド

_path パラメーターを受け入れます

返回static目录位置拼接的路径。

它根据nodejs的proccess.env.NODE_ENV变量，来判断当前运行的环境。返回不同环境下面的不同static目录位置拼接给定的_path参数。

2、cssLoaders方法

接受一个options参数，参数还有的属性：sourceMap、usePostCSS。

同时，这里用到了我们之前提到的extract-text-webpack-plugin插件，来分离出js中的css代码，然后分别进行打包。同时，它返回一个对象，其中包含了css预编译器(less、sass、stylus)loader生成方法等。如果你的文档明确只需要一门css语言，那么可以稍微清楚一些语言，同时可以减少npm包的大小(毕竟这是一个令人烦躁的东西)。

3、styleLoaders方法

接受的options对象和上面的方法一致。该方法只是根据cssLoaders中的方法配置，生成不同loaders。然后将其返回。

4、createNotifierCallback方法

此处调用了一个模块，可以在GitHub上找到，它是一个原生的操作系统上发送通知的nodeJS模块。用于返回脚手架错误的函数

一共这么四个函数方法，在utils中被定义到。

回看到webpack.base.conf.js文件中，我们可以直接跳过config目录下的index.js文件，之前已经分析过了。直接来看一下vue-loader.conf.js下的内容。

vue-loader.conf.js

这个文件中的代码非常的少，我们可以直接贴上代码，然后来分析，其中的作用。代码如下：

'use strict'
const utils = require('./utils')
const config = require('../config')
const isProduction = process.env.NODE_ENV === 'production'
const sourceMapEnabled = isProduction
 ? config.build.productionSourceMap
 : config.dev.cssSourceMap
module.exports = {
 loaders: utils.cssLoaders({
 sourceMap: sourceMapEnabled,
 extract: isProduction
 }),
 cssSourceMap: sourceMapEnabled,
 cacheBusting: config.dev.cacheBusting,
 transformToRequire: {
 video: ['src', 'poster'],
 source: 'src',
 img: 'src',
 image: 'xlink:href'
 }
}

其中，主要就是根据NODE_ENV这个变量，然后分析是否是生产环境，然后将根据不同的环境来加载，不同的环境，来判断是否开启了sourceMap的功能。方便之后在cssLoaders中加上sourceMap功能。然后判断是否设置了cacheBusting属性，它指的是缓存破坏，特别是进行sourceMap debug时，设置成false是非常有帮助的。最后就是一个转化请求的内容，video、source、img、image等的属性进行配置。

具体的还是需要去了解vue-loader这个webpack的loader加载器。

分析了这么多，最终回到webpack.base.conf.js文件中

webpack.base.conf.js

其实的两个方法，其中一个是来合并path路径的，另一个是加载Eslint的rules的。

我们直接看后面那个函数，createLintingRule方法：

其中，加载了一个formatter，这个可以在终端中显示eslint的规则错误，方便开发者直接找到相应的位置，然后修改代码。

之后的一个对象，就是webpack的基础配置信息。我们可以逐一字段进行分析：

• context => 运行环境的上下文，就是实际的目录

• entry => 入口文件：src下的main.js文件

• output => 输出内容，这内部的配置会根据不同的运行环境来进行变化

• resolve => 其中的extensions字段，指定检测的文件后缀，同时alias是用于指定别名的。在引用文件路径中，如果有别名的符号，会被替换成指定的路径。

• module => 配置了一些eslint、vue、js、图片资源、字体图标、文件等加载的loader。详细的可以去看webpack的官方网站。

• node => 此处部分有注释，主要是阻止一些webpack的默认注入行为，因为在vue中，已经具备了这些功能。

看完这些，你或许对webapck.base.conf.js中的内容有了一些初步的了解。其实，看懂它还需要你了解webpack这个非常有用的打包工具。

之后，我们在来回看webpack.dev.conf.js这个文件

webpack.dev.conf.js

这个文件中，引用了webapck-merge这npm包，它可以将两个配置对象，进行合并。代码如下：

const merge = require('webpack-merge');
const devWebpackConfig = merge(baseWebpackConfig, {
 ...
}

这样就合并了base中的webpack配置项。之后，我们可以来看一下dev环境中的新增了那些配置项，它们分别起到了什么作用？

• 首先，在module的rules中增加了cssSourceMap的功能

• 然后就是devtools，通过注释的英文翻译，可以知道cheap-module-eval-source-map使得开发更快。

• 之后，就是devSever的一些配置项了。其中包块客户端报错级别、端口、host等等

• 还有新增的plugins，我们可以来看一下实际新增的plugins(具体可以看webpack文档)：

• 定义process.env
  HotModuleReplacementPlugin: 模块热替换插件
  NameModulesPlugin: 显示模块加载相对路径插件
  NoEmitOnErrorsPlugin: 在编译出现错误时，使用 NoEmitOnErrorsPlugin 来跳过输出阶段。这样可以确保输出资源不会包含错误
  HtmlWebpackPlugin: 使用插件生成一个指定的模版。

后，还有一个函数，确保启动程序时，如果端口被占用时，会通过portfinder来发布新的端口，然后输出运行的host字符串。

webpack.prod.conf.js

这是打包到生产环境中，会被用到的文件。我们可以看到，它相对于之前的webapck.dev.conf.js文件少了一些插件，多了更多的插件。我们也可以和之前一样，通过它新增的一些东西，来知道它到底干了什么！(此处的新增是相对于webpack.dev.conf.js没有的内容)

• 新增了output的配置，我们可以看到它在output中新增了一些属性，将js打包成不同的块chunk，然后使用hash尾缀进行命名

• 添加一些插件：

• UglifJsPlugin: 这个是用来丑化js代码的
  ExtractTextplugin: 这里新增了一些属性，在打包的css文件也增加了块和hash尾缀
  OptimizeCssplugin: 这里是来优化css文件的，主要就是压缩css代码
  HashedModuleIdsPlugin: 保证module的id值稳定
  optimize: 这里是webpack一系列优化的措施，具体可以逐一查看官方文档
  CopyWebPlugins: 自定义assets文件目录

• 如果没有进行gzip压缩，调用CompressionWebpackPlugin插件进行压缩

这样，我们的webpack配置文件内容基本上就全部看完了。或许，会有点蒙，还是看官方文档来的实在。

最后，还需要分析一个build.js文件。

build.js

这个文件是在打包的时候，会被用到的。

首先，文件的开头请求了check-version.js中的函数，然后确定了一下node和npm的版本。相对于较低版本的node和npm，在打包过程中，会产生警告。之后，设置环境参数，设置成生产环境，之后就是一系列打包的流程。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

以上がvue-cliの使い方を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。