Изучение Vue.js — Часть 2

Использование Sass с Vue, компонентами одного файла и добавлением примера кода

Добро пожаловать во вторую часть моего путешествия по изучению Vue.js. Возможно, вы захотите сначала прочитать часть первую, если вы еще этого не сделали. В первой части я рассказал о причинах, по которым я записал это путешествие, и о том, как я настроил базовую настройку проекта.

В этой части я хочу добавить в свое веб-приложение Todo Component, который взят из этого примера CodeSandbox, а затем коснуться темы Однофайловые компоненты в Vue.js и того, как я сделал возможным написание Sass, поэтому я мог удобно стилизовать свои компоненты.

Однофайловые компоненты — это функция Vue.js, с которой я не сталкивался при программировании веб-приложений с помощью React.js. Они содержат все, что нужно одному компоненту — это обычно HTML-шаблон, раздел JavaScript и раздел CSS — в одном файле, как следует из названия. Когда вы создаете свой проект с помощью Vue CLI, пример компонента HelloWorld.vue является именно компонентом с одним файлом. Вот почему он выглядит иначе, чем примеры во Введении на vuejs.org.

На данный момент у меня есть только компонент HelloWorld и основной компонент App. Помимо чтения документации и учебных пособий, я думаю, что изучение обратного проектирования — очень полезная часть изучения нового фреймворка. В этом случае я взял пример с простым приложением Todo из CodeSandbox, ссылка на которое также приведена ниже, и попытался интегрировать компоненты TodoList, BaseInputText и TodoListItem в свой проект. Это в принципе оказалось довольно просто. Код из компонентов можно использовать как есть, а в компоненте App необходимо импортировать TodoList. Я также удалил компонент HelloWorld из компонента App, поэтому код выглядит следующим образом.

//App.vue
<template>
  <div id="app">
    <TodoList/>
  </div>
</template>
<script>
import TodoList from './components/TodoList.vue'
export default {
  name: 'app',
  components: {
    // HelloWorld,
    TodoList
  }
</script>

В примере кода TodoList в BaseInputText вы также найдете слегка измененный тег стиля, который выглядит так.

<style lang="scss" scoped>

Это может привести к сообщению об ошибке, которое говорит вам что-то вроде

Failed to resolve loader: sass-loader
You may need to install it.

or

Module not found: Error: Can't resolve 'sass-loader'

Я установил sass-loader с помощью двух команд, указанных в первых двух ответах, взятых из поста с Github ниже.

$ npm install sass-loader --save-dev
$ npm install --save-dev node-sass

Установка sass-loader позволит вам написать свою таблицу стилей в синтаксисе Sass или, альтернативно, в Scss, в зависимости от ваших предпочтений. Если вы еще не использовали Sass, вам может быть интересно попробовать его, чтобы сделать написание таблиц стилей CSS более удобным.

В конце в вашем веб-приложении должен появиться список задач, как в примере с CodeSandbox.

Короткое примечание: Как сказано в моем первом посте, я начал этот проект на Node версии 9.x и позже обновил до 10.x. Это заставило меня столкнуться с быстро разрешимой ошибкой.

Module build failed (from ./node_modules/sass-loader/lib/loader.js):
Error: Missing binding /Users/.../test-project/node_modules/node-sass/vendor/darwin-x64-64/binding.node
Node Sass could not find a binding for your current environment: OS X 64-bit with Node.js 10.x
Found bindings for the following environments:
  - OS X 64-bit with Node.js 9.x
This usually happens because your environment has changed since running `npm install`.
Run `npm rebuild node-sass` to download the binding for your current environment.

Простой запуск npm rebuild node-sass и перезапуск проекта помогли мне.