Lỗi khi kết hợp Laravel 5.6 + Vuejs

Lượt xem:1166
Lỗi khi kết hợp Laravel 5.6 + Vuejs

Xin chào mọi người! mới đây tôi vừa làm lại một demo nhỏ, sử dụng Laravel 5.6 + Vuejs, thì có một vài lỗi mới phát hiện và mình đã fix một cả buổi trời mới phát hiện ra , công nhận mệt cả người luôn, nếu như chúng ta không xây dựng thử thì chúng ta sẽ không biết nó bị gì luôn! Vì lúc trước mình tạo và sử dụng kết hợp Laravel 5.4 + Vuejs thì bình thường, chỉ mới đây thôi mà làm lại lỗi không hiểu chuyện gì đến với tôi!

Bước 1: Bạn cài laravel 5.6 hoặc 5.4 gì cũng được ( Laravel 5.6 thì dùng php 7 trở lên, còn 5.4 thì dùng php 5.6*)

Bước 2: Sau khi bạn tải project laravel về bạn tiến hành chạy câu lệnh: npm install, sau khi chạy câu lệnh này bạn tiếp tục chạy câu lệnh để tải gối thư viện vuejs về nhé bạn chạy câu lệnh bên dưới, hoặc bạn có thể xem lại bài Create Template Vuejs and Laravel 5.4

npm install --save-dev vue-axios vue-loader vue-router vue-template-compiler 

Vậy là xong là phần cài đặt và tích hợp thư viện của vuejs vào laravel bạn sẽ mở package.json trong laravel lên bạn sẽ nhìn thấy như sau:

{
  "private": true,
  "scripts": {
    "dev": "npm run development",
    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch-poll": "npm run watch -- --watch-poll",
    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "prod": "npm run production",
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },
  "devDependencies": {
    "axios": "^0.16.2",
    "bootstrap-sass": "^3.3.7",
    "cross-env": "^5.0.1",
    "jquery": "^3.1.1",
    "laravel-mix": "^1.0",
    "lodash": "^4.17.4",
    "vue": "^2.1.10",
    "vue-axios": "^2.1.1",
    "vue-loader": "^15.2.0",
    "vue-router": "^3.0.1",
    "vue-template-compiler": "^2.5.16"
  }
}

Bạn sẽ thấy các thư viện bạn vừa cài xong, bạn chú ý giúp mình ở cái thư viện vue-loader nhé nó là phiên bản 15.2.0

Mình sẽ không làm mất thời gian mấy bạn nửa mình sẽ đi thẳng vào vấn để luôn nhé

Đầu tiên bạn vào đường dẫn C:\xampp\htdocs\create-laravel-vuejs\resources\assets\js\components tạo một file tên là Products.vue trong file này bạn code như sau:

<template>
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <div class="panel panel-default">
                    <div class="panel-heading">Example Component</div>

                    <div class="panel-body">
                        I'm an example component!
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
       
    }
</script>

Tiếp theo bạn vào đường dẫn C:\xampp\htdocs\create-laravel-vuejs\resources\assets\js tạo file App.vue như sau

<template>
    <div class="container">
        <div>
            <transition name="fade">
                <router-view></router-view>
            </transition>
        </div>
    </div>
</template>
 
<style>
    .fade-enter-active, .fade-leave-active {
      transition: opacity .5s
    }
    .fade-enter, .fade-leave-active {
      opacity: 0
    }
</style>
 
<script>
 
    export default{
    }

Đồng thời bạn mời file app.js trong đường dẫn đó luôn và chỉnh lại như sau:

import Vue from 'Vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
 
import VueAxios from 'vue-axios';
import axios from 'axios';
Vue.use(VueAxios,axios);
 
// import cac template vao day
import App from './App.vue';
import Products from './components/Products.vue';
const routes = [
  {
      name: 'Products',
      path: '/',
      component: Products
  }
 
];
 
const router = new VueRouter({mode:'history', routes: routes});
new Vue(Vue.util.extend({router},App)).$mount('#app');

Ở trên bạn chú ý cho mình là mấy cái import và router nhé

Tiếp tục bạn tạo một file template gì cũng được trong thư mục view của laravel, mình sẽ tạo file main.blade.php nằm trong thư mục views/layout/main.blade.php nhé

<!doctype html>
<html lang="{{ app()->getLocale() }}">
    <head>
        <meta charset="utf-8">
        <meta https-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
 
        <title>Laravel Vuejs</title>
        <!-- Fonts -->
      <link rel="stylesheet" type="text/css" href="{{ mix('css/app.css') }}">
    </head>
    <body>
        <div id="app">
            
        </div>
    </body>
    <script type="text/javascript" src="{{ mix('js/app.js') }}"></script>
</html>

Tiếp tục tại thư view bạn tạo tiếp một file tên là content.blade.php nằm trong thư mục views/pages/content.blade.php và code như sau:

@extends('layouts.main')

@section('content')
		<div class="row">
				<div class="col-md-12">
					<Products></Products>
				</div>
		</div>
@endsection

Bạn có thấy gì không, ở code trên mình gọi cái template Products , các bạn nhớ chú ý chổ này. giờ bạn mở file web.php trong thư mục router lên và chỉnh sửa lại như sau:

Route::get('/', function () {
    return view('pages.content');
});

Vậy là xong phần cài đặt giờ ta thử build ứng dụng của ta xem nó bị lỗi gì nhé:

Bạn chạy npm run dev lên: 

TOFU@TOFU-PC MINGW64 /c/xampp/htdocs/create-laravel-vuejs
$ npm run dev

> @ dev C:\xampp\htdocs\create-laravel-vuejs
> npm run development


> @ development C:\xampp\htdocs\create-laravel-vuejs
> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress                                                                                                                 --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js

 10% building modules 0/1 modules 1 active ...-vuejs\resources\assets\sass\app.s                                                                                                                 10% building modules 1/2 modules 1 active ...avel-vuejs\resources\assets\js\app                                                                                                                 10% building modules 1/3 modules 2 active ...-vuejs\resources\assets\sass\app.s                                                                                                                 10% building modules 2/3 modules 1 active ...avel-vuejs\resources\assets\js\app                                                                                                                 10% building modules 2/4 modules 2 active ...-vuejs\resources\assets\sass\app.s                                                                                                                 10% building modules 2/5 modules 3 active ...modules\style-loader\lib\addStyles                                                                                                                 10% building modules 3/5 modules 2 active ...modules\style-loader\lib\addStyles                                                                                                                 10% building modules 4/5 modules 1 active ...-vuejs\resources\assets\sass\app.s                                                                                                                 10% building modules 4/6 modules 2 active ...node_modules\style-loader\lib\urls                                                                                                                 10% building modules 5/6 modules 1 active ...-vuejs\resources\assets\sass\app.s                                                                                                                 10% building modules 5/7 modules 2 active ...vel-vuejs\node_modules\axios\index                                                                                                                 10% building modules 5/8 modules 3 active ...ces\assets\js\components\Products.                                                                                                                 10% building modules 5/9 modules 4 active ...dules\vue-axios\dist\vue-axios.min                                                                                                                 10% building modules 5/10 modules 5 active ...les\vue-router\dist\vue-router.es                                                                                                                 10% building modules 6/10 modules 4 active ...les\vue-router\dist\vue-router.es                                                                                                                 10% building modules 6/11 modules 5 active ...e_modules\Vue\dist\vue.runtime.es                                                                                                                 10% building modules 7/11 modules 4 active ...e_modules\Vue\dist\vue.runtime.es                                                                                                                 10% building modules 7/12 modules 5 active ...cts.vue?vue&type=template&id=322c                                                                                                                 10% building modules 7/13 modules 6 active ...\Products.vue?vue&type=script&lan                                                                                                                 10% building modules 8/13 modules 5 active ...\Products.vue?vue&type=script&lan                                                                                                                 11% building modules 9/13 modules 4 active ...e_modules\Vue\dist\vue.runtime.es                                                                                                                 11% building modules 10/13 modules 3 active ...e_modules\Vue\dist\vue.runtime.e                                                                                                                 11% building modules 10/14 modules 4 active ...er\lib\runtime\componentNormaliz                                                                                                                 11% building modules 10/15 modules 5 active ...vuejs\node_modules\axios\lib\axi                                                                                                                 11% building modules 11/15 modules 4 active ...vuejs\node_modules\axios\lib\axi                                                                                                                 11% building modules 12/15 modules 3 active ...vuejs\node_modules\axios\lib\axi                                                                                                                 11% building modules 13/15 modules 2 active ...vuejs\node_modules\axios\lib\axi                                                                                                                 11% building modules 14/15 modules 1 active ...-vuejs\resources\assets\sass\app                                                                                                                 11% building modules 14/16 modules 2 active ...ode_modules\timers-browserify\ma                                                                                                                 11% building modules 14/17 modules 3 active ...vuejs\node_modules\axios\lib\uti                                                                                                                 11% building modules 14/18 modules 4 active ...js\node_modules\axios\lib\defaul                                                                                                                 11% building modules 14/19 modules 5 active ...ode_modules\webpack\buildin\glob                                                                                                                 11% building modules 14/20 modules 6 active ...ode_modules\axios\lib\helpers\bi                                                                                                                 11% building modules 14/21 modules 7 active ...e_modules\axios\lib\helpers\spre                                                                                                                 11% building modules 14/22 modules 8 active ...\node_modules\axios\lib\core\Axi                                                                                                                 11% building modules 14/23 modules 9 active ...de_modules\axios\lib\cancel\Canc                                                                                                                 11% building modules 14/24 modules 10 active ...dules\axios\lib\cancel\CancelTo                                                                                                                 11% building modules 14/25 modules 11 active ..._modules\axios\lib\cancel\isCan                                                                                                                 11% building modules 15/25 modules 10 active ..._modules\axios\lib\cancel\isCan                                                                                                                 11% building modules 16/25 modules 9 active ..._modules\axios\lib\cancel\isCanc                                                                                                                 12% building modules 17/25 modules 8 active ..._modules\axios\lib\cancel\isCanc                                                                                                                 12% building modules 18/25 modules 7 active ..._modules\axios\lib\cancel\isCanc                                                                                                                 12% building modules 19/25 modules 6 active ..._modules\axios\lib\cancel\isCanc                                                                                                                 12% building modules 20/25 modules 5 active ..._modules\axios\lib\cancel\isCanc                                                                                                                 12% building modules 21/25 modules 4 active ..._modules\axios\lib\cancel\isCanc                                                                                                                 12% building modules 22/25 modules 3 active ...dules\axios\lib\cancel\CancelTok                                                                                                                 12% building modules 23/25 modules 2 active ...dules\axios\lib\cancel\CancelTok                                                                                                                 12% building modules 24/25 modules 1 active ...-vuejs\resources\assets\sass\app                                                                                                                 12% building modules 24/26 modules 2 active ...os\lib\helpers\normalizeHeaderNa                                                                                                                 12% building modules 24/27 modules 3 active ...vuejs\node_modules\process\brows                                                                                                                 12% building modules 24/28 modules 4 active ...ode_modules\axios\lib\adapters\x                                                                                                                 12% building modules 24/29 modules 5 active ...\axios\lib\core\InterceptorManag                                                                                                                 12% building modules 24/30 modules 6 active ...les\axios\lib\core\dispatchReque                                                                                                                 12% building modules 24/31 modules 7 active ...es\axios\lib\helpers\isAbsoluteU                                                                                                                 12% building modules 24/32 modules 8 active ...ules\axios\lib\helpers\combineUR                                                                                                                 13% building modules 25/32 modules 7 active ...ules\axios\lib\helpers\combineUR                                                                                                                 13% building modules 26/32 modules 6 active ...ules\axios\lib\helpers\combineUR                                                                                                                 13% building modules 27/32 modules 5 active ...ules\axios\lib\helpers\combineUR                                                                                                                 13% building modules 28/32 modules 4 active ...ules\axios\lib\helpers\combineUR                                                                                                                 13% building modules 29/32 modules 3 active ...les\axios\lib\core\dispatchReque                                                                                                                 13% building modules 30/32 modules 2 active ...les\axios\lib\core\dispatchReque                                                                                                                 13% building modules 30/33 modules 3 active ...vuejs\node_modules\is-buffer\ind                                                                                                                 13% building modules 31/33 modules 2 active ...vuejs\node_modules\is-buffer\ind                                                                                                                 13% building modules 31/34 modules 3 active ..._modules\setimmediate\setImmedia                                                                                                                 13% building modules 32/34 modules 2 active ..._modules\setimmediate\setImmedia                                                                                                                 13% building modules 32/35 modules 3 active ...node_modules\axios\lib\core\sett                                                                                                                 13% building modules 32/36 modules 4 active ...modules\axios\lib\helpers\buildU                                                                                                                 13% building modules 32/37 modules 5 active ...les\axios\lib\helpers\parseHeade                                                                                                                 13% building modules 32/38 modules 6 active ...\axios\lib\helpers\isURLSameOrig                                                                                                                 13% building modules 32/39 modules 7 active ...modules\axios\lib\core\createErr                                                                                                                 13% building modules 32/40 modules 8 active ...ode_modules\axios\lib\helpers\bt                                                                                                                 13% building modules 32/41 modules 9 active ..._modules\axios\lib\helpers\cooki                                                                                                                 13% building modules 32/42 modules 10 active ...dules\axios\lib\core\transformD                                                                                                                 13% building modules 33/42 modules 9 active ...dules\axios\lib\core\transformDa                                                                                                                 14% building modules 34/42 modules 8 active ...dules\axios\lib\core\transformDa                                                                                                                 14% building modules 35/42 modules 7 active ...dules\axios\lib\core\transformDa                                                                                                                 14% building modules 36/42 modules 6 active ...dules\axios\lib\core\transformDa                                                                                                                 14% building modules 37/42 modules 5 active ...dules\axios\lib\core\transformDa                                                                                                                 14% building modules 38/42 modules 4 active ...dules\axios\lib\core\transformDa                                                                                                                 14% building modules 39/42 modules 3 active ..._modules\axios\lib\helpers\cooki                                                                                                                 14% building modules 40/42 modules 2 active ..._modules\axios\lib\helpers\cooki                                                                                                                 14% building modules 41/42 modules 1 active ...-vuejs\resources\assets\sass\app                                                                                                                 14% building modules 41/43 modules 2 active ...odules\axios\lib\core\enhanceErr                                                                                                                 15% building modules 42/43 modules 1 active ...-vuejs\resources\assets\sass\app                                                                                                                 15% building modules 43/44 modules 1 active ...de_modules\css-loader\lib\css-ba                                                                                                                 15% building modules 43/45 modules 2 active ..._modules\css-loader\lib\url\esca                                                                                                                 15% building modules 44/45 modules 1 active ...de_modules\css-loader\lib\css-ba                                                                                                                 15% building modules 44/46 modules 2 active ...trap\glyphicons-halflings-regula                                                                                                                 15% building modules 44/47 modules 3 active ...ap\glyphicons-halflings-regular.                                                                                                                 15% building modules 44/48 modules 4 active ...rap\glyphicons-halflings-regular                                                                                                                 15% building modules 44/49 modules 5 active ...trap\glyphicons-halflings-regula                                                                                                                 15% building modules 44/50 modules 6 active ...trap\glyphicons-halflings-regula                                                                                                                 15% building modules 45/50 modules 5 active ...trap\glyphicons-halflings-regula                                                                                                                 15% building modules 46/50 modules 4 active ...trap\glyphicons-halflings-regula                                                                                                                 15% building modules 47/50 modules 3 active ...trap\glyphicons-halflings-regula                                                                                                                 15% building modules 48/50 modules 2 active ...trap\glyphicons-halflings-regula                                                                                                                 15% building modules 49/50 modules 1 active ...trap\glyphicons-halflings-regula                                                                                                                 16% building modules 50/51 modules 1 active ...-vuejs\resources\assets\sass\app                                                                                                                 95% emitting ERROR  Failed to compile with 4 errors08:08:22

 error  in ./resources/assets/js/components/Products.vue?vue&type=template&id=32                                                                                                                2ca5db

Module parse failed: Unexpected token (2:0)
You may need an appropriate loader to handle this file type.
|
| <div class="container">
|     <div class="row">
|         <div class="col-md-8 col-md-offset-2">

 @ ./resources/assets/js/components/Products.vue 1:0-86
 @ ./resources/assets/js/app.js
 @ multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss

 error  in ./resources/assets/js/components/Products.vue

vue-loader was used without the corresponding plugin. Make sure to include VueLo                                                                                                                aderPlugin in your webpack config.

 @ ./resources/assets/js/app.js 10:0-49
 @ multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss

 error  in ./resources/assets/js/components/Products.vue?vue&type=template&id=32                                                                                                                2ca5db

vue-loader was used without the corresponding plugin. Make sure to include VueLo                                                                                                                aderPlugin in your webpack config.

 @ ./resources/assets/js/components/Products.vue 1:0-86
 @ ./resources/assets/js/app.js
 @ multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss

 error  in ./resources/assets/js/components/Products.vue?vue&type=script&lang=js

vue-loader was used without the corresponding plugin. Make sure to include VueLo                                                                                                                aderPlugin in your webpack config.

 @ ./resources/assets/js/components/Products.vue 2:0-59 3:0-54
 @ ./resources/assets/js/app.js
 @ multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss

                                                                                                                                                                                                                    Asset     Size  Chunks                    Chunk Names
  fonts/vendor/bootstrap-sass/bootstrap/glyphicons-halflings-regular.eot?f4769f9                                                                                                                bdb7466be65088239c12046d1  20.1 kB          [emitted]
fonts/vendor/bootstrap-sass/bootstrap/glyphicons-halflings-regular.woff2?448c34a                                                                                                                56d699c29117adc64c43affeb    18 kB          [emitted]
 fonts/vendor/bootstrap-sass/bootstrap/glyphicons-halflings-regular.woff?fa27723                                                                                                                27f55d8198301fdb8bcfc8158  23.4 kB          [emitted]
  fonts/vendor/bootstrap-sass/bootstrap/glyphicons-halflings-regular.ttf?e18bbf6                                                                                                                11f2a2e43afc071aa2f4e1512  45.4 kB          [emitted]
  fonts/vendor/bootstrap-sass/bootstrap/glyphicons-halflings-regular.svg?8988968                                                                                                                8147bd7575d6327160d64e760   109 kB          [emitted]
                                                                                                                                                                                                               \js\app.js   341 kB       0  [emitted]  [big]  \js\app
                                                                                                                                                                                                             \css\app.css   147 kB       0  [emitted]         \js\app

ERROR in ./resources/assets/js/components/Products.vue?vue&type=template&id=322c                                                                                                                a5db
Module parse failed: Unexpected token (2:0)
You may need an appropriate loader to handle this file type.
|
| <div class="container">
|     <div class="row">
|         <div class="col-md-8 col-md-offset-2">
 @ ./resources/assets/js/components/Products.vue 1:0-86
 @ ./resources/assets/js/app.js
 @ multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss

ERROR in ./resources/assets/js/components/Products.vue
vue-loader was used without the corresponding plugin. Make sure to include VueLo                                                                                                                aderPlugin in your webpack config.
 @ ./resources/assets/js/app.js 10:0-49
 @ multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss

ERROR in ./resources/assets/js/components/Products.vue?vue&type=template&id=322c                                                                                                                a5db
vue-loader was used without the corresponding plugin. Make sure to include VueLo                                                                                                                aderPlugin in your webpack config.
 @ ./resources/assets/js/components/Products.vue 1:0-86
 @ ./resources/assets/js/app.js
 @ multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss

ERROR in ./resources/assets/js/components/Products.vue?vue&type=script&lang=js
vue-loader was used without the corresponding plugin. Make sure to include VueLo                                                                                                                aderPlugin in your webpack config.
 @ ./resources/assets/js/components/Products.vue 2:0-59 3:0-54
 @ ./resources/assets/js/app.js
 @ multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss

Bạn sẽ thấy một đóng lỗi thế này bởi vì sao vì nó cài một thư viện với phiên bản khác không thích hợp làm cho chúng ta build không được, các bạn nhìn thấy cái vue-loader trên cái source lỗi bên trên không và nhớ lại cái package.json của ta hồi ban đầu là vue-loader:"^15.2.0" đúng không, để xử lý được lỗi này bạn làm như sau:

Bạn tiếp tục gõ câu lệnh sau: npm install vue-loader@14.2.2

TOFU@TOFU-PC MINGW64 /c/xampp/htdocs/create-laravel-vuejs
$ npm install vue-loader@14.2.2
npm WARN ajv-keywords@3.2.0 requires a peer of ajv@^6.0.0 but none is installed.                                                                                                                 You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fse                                                                                                                vents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@                                                                                                                1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}                                                                                                                )

+ vue-loader@14.2.2
removed 5 packages and updated 2 packages in 25.346s

Sau khi bạn cài xong bạn vào package.json của chúng ta sẽ thấy nó là phiên bản 14.2.2 là ok

Giờ chúng ta build lại cái project của chúng ta lần nửa nhé xem ok chưa nhé:

TOFU@TOFU-PC MINGW64 /c/xampp/htdocs/create-laravel-vuejs
$ npm run dev

> @ dev C:\xampp\htdocs\create-laravel-vuejs
> npm run development


> @ development C:\xampp\htdocs\create-laravel-vuejs
> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js

 95% emitting DONE  Compiled successfully in 3258ms09:05:41

                                                                                                    Asset     Size  Chunks                    Chunk Names
  fonts/vendor/bootstrap-sass/bootstrap/glyphicons-halflings-regular.eot?f4769f9bdb7466be65088239c12046d1  20.1 kB          [emitted]
fonts/vendor/bootstrap-sass/bootstrap/glyphicons-halflings-regular.woff2?448c34a56d699c29117adc64c43affeb    18 kB          [emitted]
 fonts/vendor/bootstrap-sass/bootstrap/glyphicons-halflings-regular.woff?fa2772327f55d8198301fdb8bcfc8158  23.4 kB          [emitted]
  fonts/vendor/bootstrap-sass/bootstrap/glyphicons-halflings-regular.ttf?e18bbf611f2a2e43afc071aa2f4e1512  45.4 kB          [emitted]
  fonts/vendor/bootstrap-sass/bootstrap/glyphicons-halflings-regular.svg?89889688147bd7575d6327160d64e760   109 kB          [emitted]
                                                                                               \js\app.js   359 kB       0  [emitted]  [big]  \js\app
                                                                                             \css\app.css   147 kB       0  [emitted]         \js\app

Các bạn thấy gì không chúng ta đã build thành công! giờ các bạn có thể chạy câu lệnh: php artisan serve lên nhé

Chúc các bạn làm thành công!

 

Danh Sách Videos Ngôn Ngữ Lập Trình Danh Sách Tin tức