до сих пор не привыкну - девушки-программисты, да еще симпатичные! ))
спасибо, вы на аватарке тоже ниче такой
Nastya
NoHate
подкатил так подкатил
human
хахха
human
Начинается
дima
Vuejs соединяет сердца
ℝei
Николаич
Завтра
особенно во второй части
Завтра
моя любимая
Анатолий
до сих пор не привыкну - девушки-программисты, да еще симпатичные! ))
нормально. существует девушка программист (1) симпатичная (2) тимлид (3) у джавистов (4) - это да, сложно представить. а просто симпатичные - ну почему бы нет
Егор
heavycharged
собираю vue через вебпак, пробовал уже и vue.min.js и vue.js и все равно один фиг - шаблоны на странице не рендерятся. в чем проблема может быть?
heavycharged
я указал delimiters: ['<%', '%>']
ℝei
Код.
heavycharged
import Vue from "vue"
import axios from "axios"
import _ from "lodash"
new Vue({
el: "#search",
data: {
query: "",
results: [],
error: "",
loading: false,
},
watch: {
query: function (newSearch, oldSearch) {
this.getSearchResults();
}
},
methods: {
getSearchResults: _.debounce(
function () {
console.log('run search query')
var len = this.query.length;
if (len < 4 || len > 64) {
this.error = "Search query must be at least 4 symbols and not more than 64 symbols"
return
}
this.loading = true;
var vm = this;
axios.get('/api/v1/search?q=' + vm.query)
.then(function (response) {
return response.data;
}).then(function (value) {
console.log(value.payload);
vm.results = value.payload;
}).catch(alert)
console.log(vm.results);
}, 500
)
},
delimiters: ['<%', '%>']
});
ℝei
а хде тут вебпак
heavycharged
// const merge = require('wepback-merge');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const webpack = require('webpack')
const path = require("path");
module.exports = {
entry: {
app: './src/lib.js'
},
plugins: [
new UglifyJSPlugin,
new webpack.DefinePlugin({
PRODUCTION: JSON.stringify(true),
})
],
output: {
filename: 'lib.min.js',
path: path.resolve(__dirname, 'dist')
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.js'
}
}
}
ℝei
че за самопальный велосипед) vue cli конфигов шоле мало.
лоадеры добавь
heavycharged
файл подключаю на страницу просто <script src="/assets/js/lib.min.js"></script>
ℝei
{
test: /\.vue$/,
use: {
loader: 'vue-loader',
options: {
extractCSS: process.env.NODE_ENV === 'production'
}
}
}
heavycharged
ну такой вот)) времени нет разобраться, надо просто в пару мест на сайте воткнуть это)
heavycharged
ну а без vue-loader не заработает что-ли?
ℝei
Конечно нет
heavycharged
я не использую компоненты
heavycharged
я просто собираю vue через вебпак чтобы минифицировать
ℝei
тогда зачем тебе компилить его
heavycharged
затем, что я хочу взять Axios, lodash, и vue и запаковать в один min.js файл
heavycharged
или мне теперь все по компонентам придется разносить?
heavycharged
Alexandr
Вебпак из много файлов делает один
Alexandr
Сам
heavycharged
ну вот я сделал один.. а шаблоны почему-то не работают :(
heavycharged
на странице сделал div#search
heavycharged
в нем v-model, отслеживается все ок
heavycharged
но вот рендеринга нет. в режиме development в т.ч., в консоль пишет мол в режиме разработки, а шаблоны не рисуются
ℝei
// const merge = require('wepback-merge');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const webpack = require('webpack')
const path = require("path");
module.exports = {
entry: {
app: './src/lib.js'
},
plugins: [
new UglifyJSPlugin,
new webpack.DefinePlugin({
PRODUCTION: JSON.stringify(true),
})
],
output: {
filename: 'lib.min.js',
path: path.resolve(__dirname, 'dist')
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.js'
}
}
}
output: {
libraryTarget: "amd"
}
попробуй это. но вообще хз. не было надобности собирать таким странным образом
heavycharged
vue.esm.js как алиас тоже самое.
ℝei
.vue файлы удобнее как никак
heavycharged
удобней. если весь проект на них. а мне в форму поиска нужно это воткнуть
ℝei
ну и + ты так и не сказал ниче конкретнее что не работает, "не компилятся компоненты" это ни о чем не говорит)
heavycharged
твой последний вариант говорит что define is not defined
heavycharged
https://i.imgur.com/LSHkGe0.png
heavycharged
вот что происходит
heavycharged
просто не рендерится шаблон
heavycharged
You are running Vue in development mode.
ℝei
а нельзя как нормальные люди в {{ }} написать?) зачем их переопределять
heavycharged
жесть)) у меня весь шаблонизатор на {{ }} уже написан, от Go. там куча всего рендерится))
heavycharged
я могу там переопределить, но придется там все переписывать)
ℝei
Ох я понял
ℝei
Да это боль
heavycharged
проще просто от vue отказаться и на jquery нахерачить, лол
ℝei
проще просто от vue отказаться и на jquery нахерачить, лол
проще делать клиент отдельно от сервера)
ℝei
https://i.imgur.com/LSHkGe0.png
если ты пытаешься тут вывести компоненты то это не так работает. на всякий случай)
heavycharged
смотри, я собираю vue отдельно от всего, я просто беру axios, lodash и vue, пакую в файл, и подключаю.
heavycharged
на самой странице есть div#search
heavycharged
в нем модель, она рабочая, вью по изменению поля ходит к апи, берет данные и выводит в консоль
heavycharged
т.е. все работает, кроме самого рендеринга
ℝei
Пробовал другие delimeters?
ℝei
Мне кажется что-то с ними
heavycharged
другие тоже не рендерит..
heavycharged
что самое интересное, втыкаю js с cdn, вью который в режиме develop, и та же хрень
ℝei
Скрипт с вью поидее под #search твоим должен быть, и все таки я хз откуда он тебе result возьмет когда у тебя resultS. Но даж в этом случае вью бы ошибку выдал
heavycharged
скрипт под search, он вообще перед <body> подключен. по поводу resultS сейчас попробую
heavycharged
но там v-for
heavycharged
result in results
ℝei
скрипт под search, он вообще перед <body> подключен. по поводу resultS сейчас попробую
Подключи его в конце перед закрытием body
heavycharged
ну он там и есть
heavycharged
перед закрывающим боди
heavycharged
https://i.imgur.com/CfsFWUG.png
heavycharged
один хер не рендерит
ℝei
Просто вью не парсит их поч-то
heavycharged
эээ
ℝei
Если во вью девтулз все ок. То проблема точно в кавычках этих
heavycharged
короче заметил, что первая стрелка < эскейпится в %lt;