Maison > cadre php > Laravel > le corps du texte

Explication détaillée de la méthode d'installation de laravel8.0 + vue

藏色散人
Libérer: 2021-04-21 09:15:05
avant
3225 Les gens l'ont consulté

Ce qui suit est une introduction à l'installation de laravel8.0 + vue à partir de la colonne du didacticiel laravel. J'espère que cela sera utile aux amis dans le besoin !

Créer un projet Laravel

composer create-project --prefer-dist laravel/laravel fl_app

composer install

php artisan key:generate
Copier après la connexion

Installer le nœud

yum install wget
wget https://nodejs.org/dist/v12.18.3/node-v12.18.3-linux-x64.tar.xz#得到 一个包 node-v12.18.3-linux-x64.tar
 xz -d node-v12.18.3-linux-x64.tar.xz#得到一个目录 node-v12.18.3-linux-x64
 tar -xvf node-v12.18.3-linux-x64.tar
Copier après la connexion
切换到node bin目录 一共有三个文件 node npm  npx 
src]# cd node-v12.18.3-linux-x64/bin/[root@VM-0-4-centos bin]# ll
total 47508-rwxr-xr-x 1 work work 48646656 Jul 22 23:00 node
lrwxrwxrwx 1 work work       38 Jul 22 23:00 npm -> ../lib/node_modules/npm/bin/npm-cli.js
lrwxrwxrwx 1 work work       38 Jul 22 23:00 npx -> ../lib/node_modules/npm/bin/npx-cli.js[root@VM-0-4-centos bin]# 
执行命令查看 node 版本
# ./node -v
v12.18.3[root@VM-0-4-centos bin]# 
截止目前为止表示node 已经可用了, 下一步是要让 node 命令全局可用
Copier après la connexion

Connexion logicielle

我的node 放在 /usr/local/src 目录下 
ln -s /usr/local/src/node-v12.18.3-linux-x64/bin/node /usr/bin/node
ln -s /usr/local/src/node-v12.18.3-linux-x64/bin/npm /usr/bin/npm
ln -s /usr/local/src/node-v12.18.3-linux-x64/bin/npx /usr/bin/npx

任意目录 任意用户 执行:[root@VM-0-4-centos ~]# node -v
v12.18.3[huipeng@VM-0-4-centos ~]$ node -v
v12.18.3表示完成
Copier après la connexion
npm install
npm audit fix
npm audit fix npm audit fix --force npm audit
npm audit
npm install
Copier après la connexion

Transformer la vue de l'interface de bienvenue de Laravel resources/views/welcome.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace(&#39;_&#39;, &#39;-&#39;, app()->getLocale()) }}">
   <head>
       <meta charset="utf-8">
       <meta name="viewport" content="width=device-width, initial-scale=1">

       <title>Laravel</title>

       <!--1、 引入支持 Bootstrap 的 CSS 样式文件 -->
       <link href="{{ asset(&#39;css/app.css&#39;) }}" rel="stylesheet">

   </head>
   <body>
     <div id="app">
         <div>
      <!-- 3、使用组件 -->
           <example-component></example-component>
         </div>
     </div>  

    <!-- 2、引入支持Vue框架和Vue组件的app.js文件 -->
     <script src="{{ asset(&#39;js/app.js&#39;) }}"></script>
   </body>
</html>
Copier après la connexion

Une fois l'installation terminée, les composants Vue et les fichiers JS sont dans le répertoire resources/js ;

Fichier d'entrée resources/js/app.js file

/**
 * First we will load all of this project&#39;s JavaScript dependencies which * includes Vue and other libraries. It is a great starting point when * building robust, powerful web applications using Vue and Laravel. */
require(&#39;./bootstrap&#39;);

window.Vue = require(&#39;vue&#39;).default;

/**
 * The following block of code may be used to automatically register your * Vue components. It will recursively scan this directory for the Vue * components and automatically register them with their "basename". * * Eg. ./components/ExampleComponent.vue -> <example-component></example-component> */
// const files = require.context(&#39;./&#39;, true, /\.vue$/i)
// files.keys().map(key => Vue.component(key.split(&#39;/&#39;).pop().split(&#39;.&#39;)[0], files(key).default))

Vue.component(&#39;example-component&#39;, require(&#39;./components/ExampleComponent.vue&#39;).default);
//Vue.component(&#39;example-component&#39;, require(&#39;./components/DemoComponent.vue&#39;).default);

/**
 * Next, we will create a fresh Vue application instance and attach it to * the page. Then, you may begin adding components to this application * or customize the JavaScript scaffolding to fit your unique needs. */
const app = new Vue({
    el: &#39;#app&#39;,
});
Copier après la connexion

Exécuter

npm run dev
Copier après la connexion

Compiler en temps réel

La situation actuelle c'est qu'à chaque fois que le composant Vue est modifié, il est nécessaire de réexécuter npm run dev, ce qui est très gênant

peut utiliser la commande npm run watch pour compiler les ressources frontales, et ce sera le cas. automatiquement recompilé à chaque changement

Recommandations associées : Les cinq derniers didacticiels vidéo Laravel

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:learnku.com
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal