Хорошо, у меня есть несколько историй, и теперь пора подвести их итог! Давайте создадим приложение, простое приложение, которое объясняет еще кое-что из того vue, о котором говорят люди.
Почтовое приложение кажется простым. Я назову этот тонкий kazoo и начну с шаблона webpack vue:
vue init webpack kazoo
Это задало мне несколько трудных вопросов…
- Название проекта kazoo
- Описание проекта Проект Vue.js
- Автор disjfa ‹my-email›
- время выполнения сборки Vue
- Установить vue-router? Да
- Использовать ESLint для линтинга вашего кода? Да
- Выберите предустановку ESLint Airbnb
- Настроить юнит-тесты с Karma + Mocha? Да
- Настроить тесты e2e с помощью Nightwatch? Да
Давай проверим. Название проекта простое, это название. Описания проектов оставлены по умолчанию, когда-нибудь будут там. Я автор, спасибо. Vue build….
Сборка может быть «средой выполнения» «среда выполнения + компилятор». Последний легко использовать в существующем проекте, вы можете использовать некоторый html в некоторых шаблонах vue, которые vue отображает. Но поскольку я буду делать все свои собственные вещи, я могу просто использовать среду выполнения. И, эй, на 6 КБ кода меньше, чтобы быстрее.
Эслинт, мне нравятся мои линтеры, а эслинт один из лучших. Вы можете установить линтер на Стандартный или Airbnb. Стандартные - это нормально, но мне нравятся точки с запятой; Это будет содержать мой код, линтинг проверяет, соответствует ли то, что я кодирую, тем, чем он должен быть, и добавляет некоторые дополнительные правила, такие как одинарные кавычки и, как я сказал, точки с запятой в конце. Если вы хотите узнать все возможные конфигурации, вы можете проверить правила на странице eslint или правила Airbnb на их github.
Карма, мокко и сквозной тест, я не совсем знаю, но мне нравится тестировать свои приложения, так что мы доберемся до этого по пути. Вы можете просто добавить тесты, чтобы проверить, делает ли ваш код то, что он должен, и если вы что-то измените, он все равно должен работать. Это всегда полезно.
Итак, наконец, мы только что установили основы приложения и даже не начали писать код. Давайте установим и приступим.
cd kazoo npm install npm run dev
Это то, что установщик сказал в конце, я думаю, мы так и сделаем! И теперь у нас есть страница ... со ссылками на документацию по vue. Вы можете проверить их, просто прочитать и потеряться во всей информации. Но я хочу, чтобы это ушло!
Я хочу дерзости, потому что мне нравится дерзость. И, вероятно, воспользуемся бутстрапом. А в шаблоне vue нет компиляции sass.
npm install node-sass sass-loader [email protected] --save
У нас есть sass, чтобы настроить его в файле webpack.base.conf.js в только что созданной папке сборки. Мы должны добавить их как правила.
{
test: /\.scss$/,
use: [{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "sass-loader" // compiles Sass to CSS
}]
},
Давайте проверим это, найдите App.vue в папке src. Удалите весь этот css и добавьте bootstrap, чтобы проверить.
<style lang="scss">
@import '../node_modules/bootstrap/scss/bootstrap.scss';
</style>
Мне нужно было добавить к стилю язык scss, чтобы он был отрисован. Не нашли способа избавиться от «../node_modules». Но эй, мы туда доберемся. Теперь, когда мы снова запустим npm run dev, мы получим хорошие начальные шрифты и размеры. Так здорово, мы можем это использовать.
Круто, теперь у нас простой старт. В следующий раз нам нужно будет кое-что добавить;
- Почтовый модуль и многое другое.
- Маршруты и дочерние маршруты.
- Vuex для магазина.
Вы также можете просто проверить мой статус на https://disjfa.github.io/kazoo/ и проверить исходный код на https://github.com/disjfa/kazoo. Я, вероятно, сначала напишу код, а закончу здесь позже. Кодировать намного проще, чем писать.
А пока просто наслаждайтесь!
