Introduce
Hello everyone, today I am interested in making a single blog about vuejs, I will make a series of logins and some simple management functions. During a few months of using vuejs, you want to store + share basic knowledge for those who are learning about Vue. Lets Go !!!!
first . Install laravel
First we need to install laravel already:
composer create-project –prefer-dist laravel / laravel blog
Then access the run directory: composer install php artisan key: generate php artisan serve
A blog site, we need a Post table to save articles and Categories to manage article categories:
Here I create 3 tables: User + Post + Category
php artisan make: migraiton create_post_table
1 2 3 4 5 6 7 8 9 10 | Schema <span class="token punctuation">:</span> <span class="token punctuation">:</span> <span class="token function">create</span> <span class="token punctuation">(</span> <span class="token single-quoted-string string">'posts'</span> <span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> Blueprint <span class="token variable">$table</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token variable">$table</span> <span class="token operator">-</span> <span class="token operator">></span> <span class="token function">increments</span> <span class="token punctuation">(</span> <span class="token single-quoted-string string">'id'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token variable">$table</span> <span class="token operator">-</span> <span class="token operator">></span> <span class="token function">string</span> <span class="token punctuation">(</span> <span class="token single-quoted-string string">'title'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token variable">$table</span> <span class="token operator">-</span> <span class="token operator">></span> <span class="token function">string</span> <span class="token punctuation">(</span> <span class="token single-quoted-string string">'tag'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token variable">$table</span> <span class="token operator">-</span> <span class="token operator">></span> <span class="token function">string</span> <span class="token punctuation">(</span> <span class="token single-quoted-string string">'content'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token variable">$table</span> <span class="token operator">-</span> <span class="token operator">></span> <span class="token function">integer</span> <span class="token punctuation">(</span> <span class="token single-quoted-string string">'user_id'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token variable">$table</span> <span class="token operator">-</span> <span class="token operator">></span> <span class="token function">integer</span> <span class="token punctuation">(</span> <span class="token single-quoted-string string">'category_id'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token variable">$table</span> <span class="token operator">-</span> <span class="token operator">></span> <span class="token function">timestamps</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
php artisan make: migration create_users_table
1 2 3 4 5 6 7 8 | Schema <span class="token punctuation">:</span> <span class="token punctuation">:</span> <span class="token function">create</span> <span class="token punctuation">(</span> <span class="token single-quoted-string string">'users'</span> <span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> Blueprint <span class="token variable">$table</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token variable">$table</span> <span class="token operator">-</span> <span class="token operator">></span> <span class="token function">increments</span> <span class="token punctuation">(</span> <span class="token single-quoted-string string">'id'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token variable">$table</span> <span class="token operator">-</span> <span class="token operator">></span> <span class="token function">string</span> <span class="token punctuation">(</span> <span class="token single-quoted-string string">'email'</span> <span class="token punctuation">)</span> <span class="token operator">-</span> <span class="token operator">></span> <span class="token function">unique</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token variable">$table</span> <span class="token operator">-</span> <span class="token operator">></span> <span class="token function">string</span> <span class="token punctuation">(</span> <span class="token single-quoted-string string">'password'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token variable">$table</span> <span class="token operator">-</span> <span class="token operator">></span> <span class="token function">rememberToken</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token variable">$table</span> <span class="token operator">-</span> <span class="token operator">></span> <span class="token function">timestamps</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
php artisan make: migration create_category_table
1 2 3 4 5 6 | Schema <span class="token punctuation">:</span> <span class="token punctuation">:</span> <span class="token function">create</span> <span class="token punctuation">(</span> <span class="token single-quoted-string string">'categories'</span> <span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> Blueprint <span class="token variable">$table</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token variable">$table</span> <span class="token operator">-</span> <span class="token operator">></span> <span class="token function">increments</span> <span class="token punctuation">(</span> <span class="token single-quoted-string string">'id'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token variable">$table</span> <span class="token operator">-</span> <span class="token operator">></span> <span class="token function">string</span> <span class="token punctuation">(</span> <span class="token single-quoted-string string">'name'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token variable">$table</span> <span class="token operator">-</span> <span class="token operator">></span> <span class="token function">timestamps</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
From laravel 6.x and later, vue is separated into a separate package to use, you need to download this package:
composer require laravel / ui
After downloading, run again:
php artisan ui bootstrap
artisan ui vue
We will navigate the default laravel into a single view file in web.php as follows:
1 2 3 | Route <span class="token punctuation">:</span> <span class="token punctuation">:</span> <span class="token function">view</span> <span class="token punctuation">(</span> <span class="token single-quoted-string string">'/{any}'</span> <span class="token punctuation">,</span> <span class="token single-quoted-string string">'home'</span> <span class="token punctuation">)</span> <span class="token operator">-</span> <span class="token operator">></span> <span class="token function">where</span> <span class="token punctuation">(</span> <span class="token single-quoted-string string">'any'</span> <span class="token punctuation">,</span> <span class="token single-quoted-string string">'.*'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
And you open up resource / js which already has 1 folder named components. simple right?
2. Install Vue
npm install vue-router vue-axios –save
Now that you’ve installed the router and axios router, now go to resources> views and create home.blade.php as follows:
1 2 3 4 5 6 7 8 9 10 11 12 13 | <span class="token doctype"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> html</span> <span class="token attr-name">lang</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> en <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> head</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> meta</span> <span class="token attr-name">http-equiv</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> Content-Type <span class="token punctuation">"</span></span> <span class="token attr-name">content</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> text/html;charset=UTF-8 <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> title</span> <span class="token punctuation">></span></span> Demo SPA Vuejs <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> title</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> link</span> <span class="token attr-name">rel</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> stylesheet <span class="token punctuation">"</span></span> <span class="token attr-name">href</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> /css/style.css <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> head</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> body</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">id</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> app <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> script</span> <span class="token attr-name">src</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> /js/app.js <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> script</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> body</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> html</span> <span class="token punctuation">></span></span> |
Then we run the command:
npm run dev or npm run watch
Next we will create 3 components in components:
App.vue (main component)
Post.vue (component page post)
User.vue (component page user)
App content:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | <span class="token operator"><</span> template <span class="token operator">></span> <span class="token operator"><</span> div <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token string">"container"</span> <span class="token operator">></span> <span class="token operator"><</span> div <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token string">"header"</span> <span class="token operator">></span> <span class="token operator"><</span> ul <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token string">"nav justify-content-center"</span> <span class="token operator">></span> <span class="token operator"><</span> li <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token string">"nav-item"</span> <span class="token operator">></span> <span class="token operator"><</span> router <span class="token operator">-</span> link <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token string">"nav-link"</span> <span class="token punctuation">:</span> <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token string">"[{active: $route.name === 'index'}]"</span> <span class="token punctuation">:</span> to <span class="token operator">=</span> <span class="token string">"{name: 'index'}"</span> <span class="token operator">></span> Posts <span class="token operator"><</span> <span class="token operator">/</span> router <span class="token operator">-</span> link <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> li <span class="token operator">></span> <span class="token operator"><</span> li <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token string">"nav-item"</span> <span class="token operator">></span> <span class="token operator"><</span> router <span class="token operator">-</span> link <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token string">"nav-link"</span> <span class="token punctuation">:</span> <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token string">"[{active: $route.name === 'user'}]"</span> <span class="token punctuation">:</span> to <span class="token operator">=</span> <span class="token string">"{name: 'user'}"</span> <span class="token operator">></span> User <span class="token operator"><</span> <span class="token operator">/</span> router <span class="token operator">-</span> link <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> li <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> ul <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> <span class="token operator"><</span> div <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token string">"main mt-4"</span> <span class="token operator">></span> <span class="token operator"><</span> div <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token string">"row"</span> <span class="token operator">></span> <span class="token operator"><</span> div <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token string">"col-md-8 offset-2 text-center"</span> <span class="token operator">></span> <span class="token operator"><</span> router <span class="token operator">-</span> view <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> router <span class="token operator">-</span> view <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> template <span class="token operator">></span> <span class="token operator"><</span> script <span class="token operator">></span> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> name <span class="token punctuation">:</span> <span class="token string">'App'</span> <span class="token punctuation">,</span> <span class="token punctuation">}</span> <span class="token operator"><</span> <span class="token operator">/</span> script <span class="token operator">></span> |
User page content:
1 2 3 4 5 6 7 8 9 10 11 12 | <span class="token operator"><</span> template <span class="token operator">></span> <span class="token operator"><</span> div <span class="token operator">></span> <span class="token operator"><</span> h4 <span class="token operator">></span> Hello <span class="token punctuation">,</span> This is user page <span class="token operator"><</span> <span class="token operator">/</span> h4 <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> template <span class="token operator">></span> <span class="token operator"><</span> script <span class="token operator">></span> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> name <span class="token punctuation">:</span> <span class="token string">'User'</span> <span class="token punctuation">}</span> <span class="token operator"><</span> <span class="token operator">/</span> script <span class="token operator">></span> |
Next we create a routes file in resources / js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <span class="token keyword">import</span> Home <span class="token keyword">from</span> <span class="token string">'./components/Post'</span> <span class="token keyword">import</span> User <span class="token keyword">from</span> <span class="token string">'./components/User'</span> <span class="token keyword">const</span> routes <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token punctuation">{</span> path <span class="token punctuation">:</span> <span class="token string">'/'</span> <span class="token punctuation">,</span> component <span class="token punctuation">:</span> Post <span class="token punctuation">,</span> name <span class="token punctuation">:</span> <span class="token string">'index'</span> <span class="token punctuation">,</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token punctuation">{</span> path <span class="token punctuation">:</span> <span class="token string">'/users'</span> <span class="token punctuation">,</span> component <span class="token punctuation">:</span> User <span class="token punctuation">,</span> name <span class="token punctuation">:</span> <span class="token string">'user'</span> <span class="token punctuation">,</span> <span class="token punctuation">}</span> <span class="token punctuation">]</span> <span class="token punctuation">;</span> <span class="token keyword">export</span> <span class="token keyword">default</span> routes <span class="token punctuation">;</span> |
path: is the path displayed in the address bar,
component: is the component that will be rendered into the layout
name: used to identify the route, so we can use it more conveniently.
Next in the file js / app.js will modify the following to import vue-router and declare use:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | <span class="token function">require</span> <span class="token punctuation">(</span> <span class="token string">'./bootstrap'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> window <span class="token punctuation">.</span> Vue <span class="token operator">=</span> <span class="token function">require</span> <span class="token punctuation">(</span> <span class="token string">'vue'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> Vue <span class="token punctuation">.</span> <span class="token function">component</span> <span class="token punctuation">(</span> <span class="token string">'home'</span> <span class="token punctuation">,</span> <span class="token function">require</span> <span class="token punctuation">(</span> <span class="token string">'./components/Post'</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> Vue <span class="token punctuation">.</span> <span class="token function">component</span> <span class="token punctuation">(</span> <span class="token string">'user'</span> <span class="token punctuation">,</span> <span class="token function">require</span> <span class="token punctuation">(</span> <span class="token string">'./components/User'</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> Vue <span class="token punctuation">.</span> <span class="token function">component</span> <span class="token punctuation">(</span> <span class="token string">'app'</span> <span class="token punctuation">,</span> <span class="token function">require</span> <span class="token punctuation">(</span> <span class="token string">'./components/App'</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// import vue router, component và routes</span> <span class="token keyword">import</span> App <span class="token keyword">from</span> <span class="token string">'./components/App'</span> <span class="token punctuation">;</span> <span class="token keyword">import</span> Vue <span class="token keyword">from</span> <span class="token string">'vue'</span> <span class="token punctuation">;</span> <span class="token keyword">import</span> VueRouter <span class="token keyword">from</span> <span class="token string">'vue-router'</span> <span class="token punctuation">;</span> <span class="token keyword">import</span> routes <span class="token keyword">from</span> <span class="token string">'./routes'</span> <span class="token punctuation">;</span> <span class="token comment">// use router</span> Vue <span class="token punctuation">.</span> <span class="token function">use</span> <span class="token punctuation">(</span> VueRouter <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// khai báo dùng router này</span> <span class="token comment">//history' có tác dụng khi ko có đoạn mode này mặc định khi vào </span> <span class="token comment">// các đường dẫn sẽ chúng ta sẽ có thêm dấu # trên trình duyệt</span> <span class="token keyword">const</span> router <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">VueRouter</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> routes <span class="token punctuation">,</span> mode <span class="token punctuation">:</span> <span class="token string">'history'</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// và cuối cùng là tạo 1 instance Vue và render tại phần tử có id là app,</span> <span class="token comment">// render tại component App và dùng router đã khai báo ở trên</span> <span class="token keyword">const</span> app <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> el <span class="token punctuation">:</span> <span class="token string">'#app'</span> <span class="token punctuation">,</span> render <span class="token punctuation">:</span> h <span class="token operator">=></span> <span class="token function">h</span> <span class="token punctuation">(</span> App <span class="token punctuation">)</span> <span class="token punctuation">,</span> router <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
final result :
3. Finish
This article I would like to end here if you have any questions, please comment below. like and subscribe so I can motivate you to write more posts about this series. Thanks everyone .