vue-cli 사용법에 대한 자세한 설명
- php中世界最好的语言원래의
- 2018-05-15 10:24:362601검색
이번에는 vue-cli 사용에 대한 자세한 설명을 가져오겠습니다. vue-cli 사용 시 주의사항은 무엇인가요?
vue-cli
개발하기 전에 vue 공식 문서와 API를 한 번 이상 읽어야 합니다(공식 문서를 읽는 것이 가장 중요하며, 50개 또는 100개의 블로그를 읽는 것보다 낫습니다). 영문문서 내용은 조금 뒤처지면 관련 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로 시작했습니다. 이는 dev 및 prod 환경 모두에서 로드되는 것입니다. 그런 다음 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 공식 홈페이지에서 소개할 수 있는데 실제로는 파일 경로를 얻고 설정하는 모듈입니다.
경로 모듈은 파일 처리 및 디렉터리 경로
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 파일도 참조하며, 로드되면 객체가 됩니다.
따라서 헤드 종속성부터 시작해야 합니다.
이전에 경로 모듈에 대해 언급했으므로 여기서는 자세히 설명하지 않겠습니다. config 디렉터리에 있는 index.js 파일을 분석할 수 있습니다.
index.js
이 파일에는 실제로 꽤 충분한 코드 주석이 있으며, 이를 자세히 살펴볼 수도 있습니다.
코드에서 dev 및 build 두 가지 설정이 포함된 module.exports를 통해 개체가 내보내지는 것을 볼 수 있습니다.
개발에서는 일부 구성이 설정되며 코드는 다음과 같습니다:
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,
}
}
주석을 통해 우리는 dev에서 정적 경로, 로컬 서버 구성 항목, Eslint, 소스 맵 및 기타 매개 변수를 구성한다는 것을 이해할 수 있습니다. 개발 중에 정적 리소스 파일, 서버 포트 및 기타 설정을 변경해야 하는 경우 이 파일에서 수정할 수 있습니다.
아래에는 vue 로컬 서버가 시작될 때 패키지된 일부 구성인 빌드 개체도 있습니다.
build: {
// Template for index.html
index: path.resolve(dirname, '../dist/index.html'),
// Paths
assetsRoot: path.resolve(dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/',
/**
* Source Maps
*/
productionSourceMap: true,
// https://webpack.js.org/configuration/devtool/#production
devtool: '#source-map',
// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
productionGzip: false,
productionGzipExtensions: ['js', 'css'],
// Run the build command with an extra argument to
// View the bundle analyzer report after build finishes:
// `npm run build --report`
// Set to `true` or `false` to always turn it on or off
bundleAnalyzerReport: process.env.npm_config_report
}
여기에는 템플릿 파일 수정, 디렉터리 패키징 후 일부 경로 설정, gzip 압축 등이 포함됩니다. 이러한 필드의 의미를 이해한 후에는 후속 개발에서 프로젝트 요구 사항에 따라 디렉토리 내용을 사전에 변경할 수 있습니다.
config 아래의 index.js 파일에 대해 이야기한 후 utils.js 파일로 돌아가서 이들이 어떤 역할을 하는지 분석하는 몇 가지 방법을 살펴볼 수 있습니다.
1.자산 경로 메소드
_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 중국어 웹사이트의 기타 관련 기사를 참조하세요!