Vuejs 단일 파일 구성 요소(자세한 튜토리얼)
- 亚连원래의
- 2018-06-06 17:02:231905검색
이 글에서는 주로 Vuejs 단일 파일 컴포넌트 예제에 대한 자세한 설명을 소개하고 있으니 필요하신 분들은 참고하시면 됩니다
이전 예제에서는 Vue.comComponent 또는 Components 속성을 통해 컴포넌트를 정의했습니다. 대규모 프로젝트에서는 문제가 없지만 복잡한 프로젝트에서는 다음과 같은 단점이 매우 분명합니다.
문자열 템플릿: 강조 표시가 부족하고 작성하기가 까다롭습니다. 특히 HTML에 여러 줄이 있는 경우에는 더욱 그렇습니다. 템플릿은 html 파일로 작성할 수 있지만 너무 거슬리고 구성 요소 분리 및 분리에 도움이 되지 않습니다.
CSS 지원 없음: HTML 및 JavaScript가 구성 요소화될 때 CSS가 분명히 제외됨을 의미합니다.
빌드 단계 없음: 전처리기가 아닌 HTML 및 ES5 JavaScript 사용으로 제한됩니다.
Vuejs에서 제공하는 .vue 확장자를 가진 단일 파일 구성 요소는 위의 모든 문제에 대한 솔루션을 제공합니다.
단일 파일 구성 요소에 대한 첫 번째 소개
또는 도구의 소스 코드를 사용하여 src 디렉터리에 다음 콘텐츠로 hello.vue 파일을 만듭니다.
<template>
<h2>{{ msg }}</h2>
</template>
<script>
export default {
data () {
return {
msg:'Hello Vue.js 单文件组件~'
}
}
}
</script>
<style>
h2 {
color: green;
}
</style>그런 다음 app.js가 도입되고 사용됩니다.
// ES6 引入模块语法
import Vue from 'vue';
import hello from './hello.vue';
new Vue({
el: "#app",
template: '<hello/>',
components: {
hello
}
});.vue 파일 웹팩은 다른 어떤 것도 될 수 없기 때문에 프로젝트를 실행할 수 없습니다. 이를 처리하려면 해당 vue-loader가 필요하며 주의 깊은 친구들은 여기서 hello.vue ES6 구문이 사용된다는 것을 알게 될 것입니다. 이때 ES6를 주류 브라우저와 호환되는 ES5 구문으로 변환하려면 해당 구문 변환 로더를 사용해야 합니다. 여기에서는 공식적으로 권장되는 바벨 도구를 사용해야 합니다. 필요한 로더를 먼저 설치하세요:
# hello.vue 文件中使用了 css，所以需要 css-loader 来处理，vue-loader 会自动调用 npm install vue-loader css-loader babel-loader babel-core babel-preset-env --save-dev
어떤 사람들은 babel-loader만 사용한 후에 왜 그렇게 많은 도구를 설치해야 하는지 궁금해합니다. 그 이유는 많은 도구가 독립적이고 로더는 단지 webpack과 협력하기 때문입니다. 브릿지가 사용되는데 여기서 babel-core와 babel-preset-env는 ES6~ES5를 구현하는 핵심이다. babel-loader 为什么还需要安装后面这么多工具呢，这是因为很多工具都是独立的， loader 只是为了配合 webpack 使用的桥梁，而这里 babel-core 和 babel-preset-env 才是实现 ES6 到 ES5 的核心。
我们再修改 webpack.config.js 配置如下：
module.exports = {
// ...
module: {
// 这里用来配置处理不同后缀文件所使用的loader
rules: [
{
test: /.vue$/,
loader: 'vue-loader'
},
{
test: /.js$/,
loader: 'babel-loader'
}
]
}
}对于 babel 的配置，我们还需在项目根目录下刚创建 .babelrc 文件来配置 Babel presets 和 其他相关插件，内容如下：
{
"presets": [ "env" ]
}但是虽然虽然都配置好了，项目还是还是会报错，报如下错误：
ERROR in ./src/hello.vue Module build failed: Error: Cannot find module 'vue-template-compiler'
有人就不高兴了，明明是按照官方提示安装了依赖，并正确的进行配置，为什么还是会报错呢？遇到错误不要怕，先阅读下错误是什么，很容易发现，是因为 Cannot find module 'vue-template-compiler' ，这是因为 vue-loader 在处理 .vue 文件时，还需要依赖 vue-template-compiler 工具来处理。
刚开始我不知道官方为什么没有直接告诉用户需要安装这个依赖，通过阅读 vue-loader 才明白其 package.json 文件中是将 vue-template-compiler 和 css-loader 作为 peerDependencies ，而 peerDependencies 在安装的时候，并不会自动安装（npm@3.0+），只会给出相关警告，所以这个需要我们手动安装的，当然在 .vue 文件中如果需要写 CSS，也必须用到 css-loader ，这个也是在 peerDependencies 中。相关讨论： https://github.com/vuejs/vue-loader/issues/1158
知道问题了，直接安装下就可以了：
npm install vue-template-compiler css-loader --save-dev
再次运行项目，页面中出现了我们的内容，并没报错，ok，大功告成~
使用预处理器
我们已经学会在 .vue 中写 css 了，那么如果使用 sass 预处理器呢？首先安装上篇文章中提到的模块：
npm install sass-loader node-sass --save-dev
配置只需两步：
修改 webpack.config.js 中 vue-loader 配置
module.exports = {
// ...
module: {
// 这里用来配置处理不同后缀文件所使用的loader
rules: [
{
test: /.vue$/,
loader: 'vue-loader',
options: {
loaders: {
// 这里也可以使用连写方式，但是不利于自定义话参数配置
// scss: 'vue-style-loader!css-loader!sass-loader'
scss: [
{
loader: 'vue-style-loader'
},
{
loader: 'css-loader'
},
{
loader: 'sass-loader'
}
]
}
}
},
// ...
]
}
}给 .vue 文件中的 style 标签，添加 lang="scss" 属性。
配置完后，就可以再 .vue 文件中，愉快地编写 sass 语法了。
加载全局设置文件
实际开发中，我们在编写 sass 文件时，经常会将全局的 scss 变量提取出来，放到一个单独的文件中，但是这样就有个问题，每个需要用到的组件，都需要手动 @import './styles/_var.scss' 进来，非常不友好。插件 sass-resources-loader
npm install sass-resources-loader --save-devbabel 구성의 경우 프로젝트 루트 디렉터리에 .babelrc 파일을 생성하여 Babel 사전 설정 및 기타 관련 플러그인을 구성해야 합니다.
// ...
{
test: /.vue$/,
loader: 'vue-loader',
options: {
loaders: {
scss: [
{
loader: 'vue-style-loader'
},
{
loader: 'css-loader'
},
{
loader: 'sass-loader'
},
// 看这里，看这里，看这里
{
loader: 'sass-resources-loader',
options: {
// 这里的resources 属性是个数组，可以放多个想全局引用的文件
resources: [resolve('./src/styles/_var.scss')]
}
}
]
}
}
}
// ...그러나 모든 것이 구성되었음에도 불구하고 프로젝트는 여전히 오류를 보고하며 다음 오류가 보고됩니다. <!-- hello1.vue -->
<template>
<h1>{{ msg }}</h1>
</template>
<script>
export default {
name:'hello1',
data () {
return {
msg:'Hello Vue.js 单文件组件~'
}
}
}
</script>
<stylelang="scss">
h1 {
color: $green;
}
</style>
<!-- hello2.vue -->
<template>
<h1>{{ msg }}</h1>
</template>
<script>
export default {
name:'hello2',
data () {
return {
msg:'Hello Vue.js 单文件组件~'
}
}
}
</script>
<stylelang="scss">
h1 {
color: $red;
}
</style>어떤 사람들은 분명히 공식 지침에 따라 종속성을 설치하고 올바르게 구성했습니다. , 그런데 왜 여전히 오류를 보고합니까? 오류가 발생하면 두려워하지 마세요. 오류가 무엇인지 먼저 읽어보세요. 'vue-template-compiler' 모듈을 찾을 수 없기 때문입니다. >이(가) .vue 파일을 처리 중입니다. 또한 처리를 위해 vue-template-compiler 도구를 사용해야 합니다. 처음에는 왜 공식이 사용자에게 이 종속성을 설치해야 한다고 직접 알리지 않았는지 몰랐습니다. vue-loader를 읽은 후 package.json 파일에 vue-template-compiler 및 <code>css -loader는 PeerDependency로 지정되며, PeerDependency는 설치 중에 자동으로 설치되지 않으며(npm@3.0+) 관련 경고만 표시되므로 수동으로 설치해야 합니다. 물론 .vue 파일에 CSS를 작성해야 하는 경우에는 PeerDependency에도 있는 css-loader도 사용해야 합니다. 관련 토론: https://github.com/vuejs/vue-loader/issues/1158이제 문제를 알았으니 직접 설치하면 됩니다:$green: rgb(41, 209, 41); $red: rgb(177, 28, 28);프로젝트를 다시 실행하면 콘텐츠가 페이지에 나타나지 않는데 오류 신고하면 끝이에요~
전처리기 사용하기
.vue에서 CSS 작성하는 법을 배웠는데, sass를 사용하면 어떨까요? 전처리기? 먼저 이전 기사에서 언급한 모듈을 설치합니다. 🎜import Vue from 'vue';
import hello1 from './hello1.vue';
import hello2 from './hello2.vue';
new Vue({
el: "#app",
template: '<p><hello1/><hello2/></p>',
components: {
hello1,
hello2
}
});🎜구성은 두 단계만 수행합니다. 🎜🎜webpack.config.js에서 vue-loader 구성을 수정합니다. 🎜<!-- hello1.vue -->
<stylelang="scss"scoped>
h1 {
color: $green;
}
</style>
<!-- hello2.vue -->
<stylelang="scss"scoped>
h1 {
color: $red;
}
</style>🎜.vue 파일의 스타일 태그에 lang을 추가합니다. ="scss" 속성. 🎜🎜구성이 완료되면 .vue 파일에 sass 구문을 작성할 수 있습니다. 🎜🎜전역 설정 파일 로드🎜🎜실제 개발에서는 sass 파일을 작성할 때 전역 scss 변수를 추출하여 별도의 파일에 넣는 경우가 많습니다. 그런데 이 경우에는 컴포넌트를 수동으로 가져와야 하는 문제가 있습니다. >@import './styles/_var.scss' 는 매우 불친절합니다. 플러그인 sass-resources-loader는 이 문제를 해결하는 데 도움이 될 수 있습니다. 먼저 설치하세요. 🎜<docs>
# 标题
这是标题内容，[仓库地址](https://github.com/yugasun/You-Dont-Know-Vuejs)
## 子标题
这是子标题内容
</docs>
<template>
<h1>{{ msg }}</h1>
</template>
<script>
export default {
name:'hello1',
data () {
return {
msg:'Hello Vue.js 单文件组件~'
}
}
}
</script>
<stylelang="scss"scoped>
h1 {
color: $green;
}
</style>🎜 그런 다음 webpack.config.js 파일에서 vue-loader 관련 구성을 수정하세요. 🎜 const path = require('path');
// 引入相关插件
const ExtractTextPlugin = require('extract-text-webpack-plugin');
function resolve(dir){
return path.resolve(__dirname, dir);
}
module.exports = {
// 入口文件
entry: './src/app.js',
// 编译输出文件
output: {
path: resolve('./'),
filename: 'build.js'
},
resolve: {
alias: {
// 因为我们这里用的是 require 引入方式，所以应该使用vue.common.js/vue.js/vue.min.js
'vue$': 'vue/dist/vue.common.js'
}
},
devServer: {
// 这里定义 webpack-dev-server 开启的web服务的根目录
contentBase: resolve('./')
},
module: {
// 这里用来配置处理不同后缀文件所使用的loader
rules: [
{
test: /.vue$/,
loader: 'vue-loader',
options: {
loaders: {
scss: [
{
loader: 'vue-style-loader'
},
{
loader: 'css-loader'
},
{
loader: 'sass-loader'
},
{
loader: 'sass-resources-loader',
options: {
resources: [resolve('./src/styles/_var.scss')]
}
}
],
docs: ExtractTextPlugin.extract('raw-loader')
}
}
},
{
test: /.js$/,
loader: 'babel-loader'
}
]
},
plugins: [
new ExtractTextPlugin('docs.md')
]
}🎜설정은 끝났으니 다시 테스트해보겠습니다. 🎜🎜src 디렉토리에 hello1.vue 및 hello2.vue 파일을 각각 생성하세요:🎜rrreee🎜그런 다음 스타일 디렉토리를 생성하고 전역 변수를 저장할 새 파일 _var.scss를 생성하세요:🎜rrreee🎜Next, app.js 🎜rrreee🎜에서 두 가지 구성요소를 참조하세요. 프로젝트를 다시 실행하세요. 🎜🎜🎜🎜Scope style🎜🎜🎜🎜단일 파일 구성 요소는 매우 편리한 기능을 제공합니다. 즉, 스타일 태그가 범위 속성을 추가하면 태그의 스타일은 현재 구성 요소의 요소에만 적용됩니다. . 🎜接着上面的例子，运行后会发现 hello1.vue 中的 h1 颜色并不是想要的 $green 色，而是被 hello2.vue 中的样式覆盖了。于是分别在 hello1.vue 和 hello2.vue 的 style 标签上添加 scoped 属性，如下：
<!-- hello1.vue -->
<stylelang="scss"scoped>
h1 {
color: $green;
}
</style>
<!-- hello2.vue -->
<stylelang="scss"scoped>
h1 {
color: $red;
}
</style>这样一来我们的两个 h1 标签颜色都显示正常了。
自定义块
在编写某些开源组件时，有时候我们需要同时维护多个组件和组件说明，但是每次修改就要同时修改 .vue 和 .md 文件，相当麻烦。 .vue 文件的 自定义语言块 功能，就允许我们将 markdown 说明同时写进 .vue 文件中，然后通过插件将其说明部分单独提取到相应的 .md 文件中，这样就可以同时维护说明文档和组件功能了。
比如我们将 hello1.vue 文件修改如下：
<docs>
# 标题
这是标题内容，[仓库地址](https://github.com/yugasun/You-Dont-Know-Vuejs)
## 子标题
这是子标题内容
</docs>
<template>
<h1>{{ msg }}</h1>
</template>
<script>
export default {
name:'hello1',
data () {
return {
msg:'Hello Vue.js 单文件组件~'
}
}
}
</script>
<stylelang="scss"scoped>
h1 {
color: $green;
}
</style>然后修改 webpack.config.js 配置：
const path = require('path');
// 引入相关插件
const ExtractTextPlugin = require('extract-text-webpack-plugin');
function resolve(dir){
return path.resolve(__dirname, dir);
}
module.exports = {
// 入口文件
entry: './src/app.js',
// 编译输出文件
output: {
path: resolve('./'),
filename: 'build.js'
},
resolve: {
alias: {
// 因为我们这里用的是 require 引入方式，所以应该使用vue.common.js/vue.js/vue.min.js
'vue$': 'vue/dist/vue.common.js'
}
},
devServer: {
// 这里定义 webpack-dev-server 开启的web服务的根目录
contentBase: resolve('./')
},
module: {
// 这里用来配置处理不同后缀文件所使用的loader
rules: [
{
test: /.vue$/,
loader: 'vue-loader',
options: {
loaders: {
scss: [
{
loader: 'vue-style-loader'
},
{
loader: 'css-loader'
},
{
loader: 'sass-loader'
},
{
loader: 'sass-resources-loader',
options: {
resources: [resolve('./src/styles/_var.scss')]
}
}
],
docs: ExtractTextPlugin.extract('raw-loader')
}
}
},
{
test: /.js$/,
loader: 'babel-loader'
}
]
},
plugins: [
new ExtractTextPlugin('docs.md')
]
}这里用到了 extract-text-webpack-plugin 导出 text 插件，和 raw-loader ，分别都安装下就行。
然后运行构建命令 npm run build ，等运行结束，根目录下会同时生成一个 docs.md 文件，这就是我们想编写的说明文档。
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
위 내용은 Vuejs 단일 파일 구성 요소(자세한 튜토리얼)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!