처음부터vue 파일에서 vue cli로

에서 Vue 코드를 재구성하고 웹 팩과 vue-loader 을 사용하여 구축 과정을 응용 프로그램에 추가하는 방법을 보았습니다. 우리는 Vue 단일 파일 구성 요소를 사용하여 Vue 웹 응용 프로그램의 코드를 배정할 수 있습니다.
그러나 이는 Vue 구축 프로세스가 제공할 수 있는 모든 것이 아닙니다.vue loader는 많은 방법을 제공합니다. .vue 파일을 더 사용자 정의할 수 있습니다!우리 약간의 추가 것을 봅시다.우리는 vue 설정을 사용하고 더 편리한 vue 도구를 빠르게 볼 수 있습니다. vue cli!
이 강좌의 예는 this GitHub repository 에서 찾을 수 있다.

🏠 우리를 속이다.vue 파일.웹 페이지가 있어, 여기가 바로 너의 집이야!

멋지다. 우리는 이 새로운 .vue 파일 형식을 가지게 되었다. 그러나 만약 우리가 하나의 파일 구성 요소에서 우리의 사용자 정의 문법을 사용하고 싶다면, 예를 들어 <script> 태그에서 일반적인 자바스크립트가 아닌 TypeScript를 사용하거나, HTML이 아닌 Pug를 사용하려면 어떻게 해야 합니까?사실은 당신이 .vue 파일의 부분을 다른 프로그래밍 언어와 함께 작업할 수 있다는 것을 증명합니다.
이를 위해서는 웹 패키지 구축에 추가해야 하지만, 이를 보려면 ColorPicker.vue 파그를 사용해 보겠습니다.일반 HTML이 아닌 js.만약 당신이 이전에 파그를 시도해 본 적이 없다면, 그것은 HTML과 같지만, 더 간결한 문법이 있고, 끝 표시가 없다.
먼저 ColorPicker.vue 에서 <template> 의 내용을 다음으로 바꿉니다.

<template lang="pug">
  form
    h3 Select a color
    button(
      v-for="color in colors",
      :key="color",
      @click.prevent="selectColor(color)"
    ) {{ color }}
</template>

이제 우리가 해야 할 다음 일은 vue loader가 이 템플릿을 HTML이 아닌 Pug로 읽는 것입니다.이를 위해, 웹 페이지에 규칙을 설정해야 합니다. 이 규칙은 파그 템플릿을 감지할 때, 파그 코드를 브라우저에서 사용할 수 있는 순수한 HTML로 변환합니다.이를 위해 파그를 수신하고 HTML을 출력하기 위해 pug-plain-loader 을 사용합니다.

yarn add --dev pug pug-plain-loader

로더가 추가되면 이 규칙을 webpack.config.js 규칙 섹션에 추가합니다.

{
  test: /\.pug$/,
  loader: 'pug-plain-loader',
},

다시 실행yarn build, 응용 프로그램은 여전히 작동해야 합니다. 브라우저는 우리의 색 선택기 템플릿이 내부에서 온 파그 코드를 사용했는지 알 수 없습니다.HTML이 아닌 vue 파일입니다.js 파일!
그러나 등등, 이 규칙의 test 파일을 찾고 있습니다.그러나 우리의 파그 코드는 .pug 파일이 아니라 .vue 파일에 존재한다.웹 페이지에서 삽살개를 읽는 것을 어떻게 알았습니까?
여기가 바로 우리 친구.pug가 들어온 곳!이것은 파일 형식 (예: Pug) 에 대한 우리의 모든 규칙을 처리 VueLoaderPlugin 파일의 코드 논리에 주입합니다.그래서 우리는 채색기를 만났다.vue loader의 vue는 템플릿의 시작 표시는 다음과 같습니다. .vue.<template lang="pug"> 속성이 Pug로 설정되어 있기 때문에 템플릿 코드를 처리하는 것은 lang 로 이루어진 것이지 vue 로더의 일반적인 HTML 로더 논리가 아니라는 것을 의미합니다!

🎨 CSS 추가!

우리의 Vue 단일 파일 구성 요소에는 HTML 또는 Pug가 있고 JavaScript도 있습니다.그런데 왜 CSS도 좀 넣지 않았어요?가지다vue 파일, 당신은 pug-plain-loader 라벨로 그것을 던질 수 있습니다!예를 들어 <style> 에서 우리는 제목 텍스트가 유사한 글꼴 효과가 있기를 바란다.먼저 템플릿 섹션에서 ColorPicker 제목에 CSS 클래스를 제공합니다.

  form
-   h3 Select a color
+   h3.select-header Select a color
    button(
      v-for="color in colors",
      :key="color"
      @click.prevent="selectColor(color)"
    ) {{ color }}

현재 ColorPicker.vue 에서는 일부 CSS를 사용하여 스타일을 설정할 수 있습니다.이 코드를 템플릿과 스크립트 태그 이외의 파일에 추가하면 색상 선택기에 제목을 설정하여 글꼴이나 유사한 글꼴에 영향을 줍니다.

<style scoped>
.select-header {
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}
</style>

지금까지는 괜찮았어요. 그냥 CSS예요.우리는 CSS가 작동할 수 있도록 패키지 규칙과 몇 개의 마운트가 필요합니다.이 두 대의 적재기는 각각 ColorPicker.vue 과 css-loader 이다.

yarn add --dev [email protected] vue-style-loader

⚠️ 주의: 저는 cssloader로 실험을 진행했습니다. 현재 버전의 vue 스타일 캐리어 4.1.2에서 cssloader 3.6.0이 있어야만 css를 vue 템플릿에 성공적으로 적용할 수 있습니다.
현재 이 규칙을 웹 패키지 설정에 추가하면 vue-style-loader 을 실행할 때 CSS를 만났을 때 새 로더를 사용할 수 있습니다.

{
  test: /\.css$/,
  use: [
    'vue-style-loader',
    'css-loader',
  ]
}

그것은 지금 당신의 응용 프로그램에 적용될 것입니다!
참고로 우리가 사용하는 yarn build 표기는 어떻게 <style> 표시합니까?이 style scoped 부분은 상당히 달콤하다.Vue 어셈블리에만 적용되는 CSS 규칙을 정의할 수 있습니다!만약 당신이 scoped에 들어가서 App.vue 라벨을 주는 것은 우리가 ColorPicker에서 디자인한 <h1> 종류와 같다.vue, 스타일 규칙은 적용되지 않습니다.우리의 스타일 규칙은 범위가 있기 때문에, 우리는 select-header 의 CSS 규칙을 색 선택기 구성 요소의 ColorPicker.vue 요소에만 적용합니다!
또 한 가지 멋진 것은 우리가 .select-header 표기에서 lang 속성을 사용할 수 있다는 것이다. 마치 우리가 <style> 과 <script> 에서 그것을 사용할 수 있는 것처럼.Sass와 같은 사전 프로세서로 CSS를 작성하는 것을 좋아한다면, <template> 같은 태그를 사용하고 <style scoped lang="scss"> 규칙을 패키지 설정에 추가해서 이 사전 프로세서를 사용할 수 있습니다.

🚀 vuecli를 사용하여 빠른 구축!

웹 패키지를 설정하는 방법에 대해 알고 있습니다.vue 파일은 당신이 좋아하는 모든 문법을 사용할 수 있습니다.그러나, Vue 응용 프로그램을 작성할 때, 우리는 웹 패키지가 무엇을 하는지 너무 많이 고려할 필요가 없다. 어때?Vue 팀이 제공했습니다vue-cli.
vuecli는 백엔드에서 웹 팩을 사용하지만, 처음부터 광범위한 웹 팩 설정을 설정합니다.이것은 웹 패키지가 기본 설정과 다른 작업을 수행하려면 vuecli 프로그램의 웹 패키지 코드를 변경하기만 하면 된다는 것을 의미합니다.
얼마나 편리한지 보여드리기 위해서 Vue cli를 사용하여 Vue 응용 프로그램을 설정해 보겠습니다!먼저 다음 도구를 사용하여 이 도구를 설치합니다.

yarn global add @vue/cli

현재, 운행/\.scss$/.모든 기본값 (나중에 탐색) 을 선택하면 vue create with-vue-cli 디렉토리에 단일 파일 구성 요소가 포함된 전체 Vue 응용 프로그램이 생성됩니다.이제 우리가 해야 할 일은 생성된 Vue 구성 요소를 우리의 Vue 구성 요소로 대체하는 것이다.src 아래

, 삭제src/components 및 추가HelloWorld.vue.

ColorPicker.vue 에서 응용 프로그램의 코드로 기존 코드를 교체합니다.우리는 이미 vue 파일을 만들었다.

우리는 지금 코드 하나만 바꾸면 된다.응용 프로그램의 모든 구성 요소를 포함하는 디렉터리가 있습니다.vue live, src/App.Vue의 가져오기 문구를 변경해야 합니다.

- import ColorPicker from './ColorPicker.vue';
+ import ColorPicker from './components/ColorPicker.vue';

그리고 우리는 파그와 파그 일반 캐리어를 가방에 추가하기만 하면 된다.json...

yarn add --dev pug pug-plain-loader

이제 Vue 단일 파일 구성 요소가 내장된 응용 프로그램이 있습니다.준비되셨나요?components 를 실행하고 App.vue 로 이동하면 표시됩니다.

응용 프로그램이 실행 중입니다!단일 파일 구성 요소를 사용하고 ColorPicker에 있습니다.vue, 우리는 파그와 yarn serve 라벨이 하나 있습니다. 우리는 그 중 어떤 웹 페이지를 작성할 필요가 없습니다.우리는 한 번만 더 해야 한다localhost:8080!이야기하는 것이 편리하다!
그러나 웹 패키지는 여전히 사용 중이다.직접 봐야지, 달리기 해봐<style scoped>.
홈페이지에 들어가면js, 당신은 커다란 웹 페이지 설정을 볼 수 있습니다. 그 중에서 Vue 개발자가 설정해야 할 흔한 것들의 규칙이 가득합니다.이것은 구축 과정에서 의외의 행동이 발생하거나 vuecli가 포함하지 않은 내용에 대한 지원을 추가해야 한다면 yarn add 패키지의 설정을 조사한 다음 vue inspect > webpack.js 파일에서 편집할 수 있음을 의미합니다.
우리는 vueloader의 기초 지식을 어떻게 사용하는지, 우리의 vue 파일을 어떻게 사용자 정의하는지, vuecli를 어떻게 사용하는지 완전히 필요할 때 웹 패키지를 깊이 연구하기만 하면 된다.가장 큰 수확은 다음과 같다.

고객에게 더 많은 맞춤형 서비스를 제공합니다.vue 파일, 예를 들어 Pug, CSS 등을 사용하면 로드 프로그램에서 처리합니다.구축 과정에서 원하는 언어로 JS를 작성할 수 있습니다

vue cli는 대부분의 작업을 옵션 웹 패키지 구성으로 설정합니다

그러나 웹 페이지를 배우는 것은 무의미한 것이 아니다.웹 패키지를 이해하는 것은 여전히 매우 중요하다. 왜냐하면 이것이 바로 vuecli가 배후에서 일하는 방식이기 때문이다.그것은 Vue와 웹 패키지 개념을 바탕으로 합니다!웹 패키지를 이해하는 것은 당신이 당신의 인터넷 응용 프로그램을 더욱 맞춤형으로 구축할 수 있다는 것을 의미한다.

일반 Vue 응용 프로그램을 단일 파일 구성 요소로 전송하는 방법과 SFCs를 Vue cli로 전송하는 방법에 대해 알아보십시오.

이제 일반적인 Vue에서 많은 대형 웹 응용 프로그램에서 사용하는 Vue 코드의 단일 파일 구성 요소로 전환하는 방법을 알게 되었습니다.다음 단계의 발전 방향에 대해 저는 Vue를 사용하여 웹 응용 프로그램을 구축하거나plain을 사용할 것을 건의합니다.vue 파일, 또는 당신이 가장 좋아하는 프런트엔드 언어를 사용하는 설정입니다.
vucli에 대해 말하자면, 우리는 실제적으로 vucli가 당신에게 제공한 내용의 표면에만 닿았기 때문에, 이것은 기초 위에 세워진 매우 강력한 도구이기 때문에, vucli가 생성한 다른 파일을 자세히 읽는 것을 권장합니다!