Windows에서 Laavel9+Vue3+Pug+TailwindCSS를 만드는 환경

29576 단어 LaravelPugVue.jsTailwind CSStech

날과 씨


최신 Laavel9+Vue3 개발에 익숙해지고 싶어서 환경을 만들어 보기로 했습니다.

작업 환경


OS:Windows10
조개: PowerShell

환경 구조


PHP 설치


Laavel9은 PHP8입니다.0 이상, PHP8이 필요합니다.설치
그러나 Windows의 PHP는 프로그램을 설치하지 않고 Program Files 폴더에 PHP에서 공식적으로 다운로드한 파일을 저장하고 경로를 설정할 뿐이다.

PHP 다운로드


켜기PHP8.1 Windows 다운로드 페이지 v16 x 64 Theread Safe의 ZIP를 다운로드합니다.

Program Files에 저장


다운로드한 ZIP 파일을 동결해제한 후 Program Files 폴더에 저장합니다.
폴더 이름은 버전을 이해하기 위해 php-8.1.4로 설정합니다.
!
저장 주소는 Program Files 폴더가 아니어도 됩니다. 이해하기 쉬운 곳을 선택하십시오.

※ Program Files 폴더에는 Windows Sandbox를 사용했기 때문에 설치된 프로그램이 적음

환경 변수 설정


Windows 환경 변수 Path에 저장한 폴더 경로를 추가하십시오.

설치 확인


Powerrshellphp -v로 버전 확인을 명령합니다.
버전을 내면 됩니다.
PS C:\Users\WDAGUtilityAccount> php -v
PHP 8.1.4 (cli) (built: Mar 16 2022 09:33:31) (ZTS Visual C++ 2019 x64)
Copyright (c) The PHP Group
Zend Engine v4.1.4, Copyright (c) Zend Technologies
!
Windows Sandbox 환경에서는 Visual C++2015 실행 시간을 설치해야 합니다.
https://docs.microsoft.com/ja-JP/cpp/windows/latest-supported-vc-redist?view=msvc-170
더 자세한 절차를 알고 싶은 사람은 아래의 내용을 참고하세요.
https://webkaru.net/php/windows-php-confirmation/

Composter 설치


Laavel은 Composier를 통해 설치되므로 Composier를 설치합니다.

설치하다.


여기.에서 Windows Installer를 다운로드합니다.

다운로드한 설치 프로그램을 실행하면 바로 설치할 수 있다.
프록시 등의 설정은 사랑을 끊는 것이기 때문에 필요한 사람은 검색하세요.

설치 확인


Powerrshellcomposer -V로 명령 내리기
Composier 버전을 확인할 수 있다면 OK 입니다.
PS C:\Users\WDAGUtilityAccount> composer -V
Composer version 2.3.4 2022-04-07 21:16:35

node.js 설치


Vue,pug,tailwindscss가 npm에 설치되어 있기 때문에 node입니다.js를 설치합니다.

설치하다.


Windows Installer여기.를 다운로드합니다.
특별한 이유가 없다면 LTCS를 쓰면 되겠죠.

다운로드한 설치 프로그램을 시작하고 설치합니다.

설치 확인


Powerrshellnode -v로 명령 내리기
node.제이스 버전 확인하면 OK.
PS C:\Users\WDAGUtilityAccount> node -v
v16.14.2
이렇게 환경 구축이 끝납니다.
라벨 프로젝트 제작부터 뷰 환경 구축, pug,tailwindscss까지 준비.
여기서 커피 한 잔 마시고 쉬세요(웃음)

프로젝트 작성


PHP.ini 설정


php가 설치된 폴더를 열고 현재 php.ini 를 엽니다._php.ini 재명명 후 회피php.ini-developement의 이름을 php.ini로 변경합니다.

이름이 바뀐 php입니다.ini 파일을 열고 필요한 확장자와 디렉터리 설정을 엽니다
태그를 해제합니다.
디렉토리 설정
; Directory in which the loadable extensions (modules) reside.
; https://php.net/extension-dir
;extension_dir = "./"
; On windows:
;extension_dir = "ext"
↓
; Directory in which the loadable extensions (modules) reside.
; https://php.net/extension-dir
;extension_dir = "./"
; On windows:
extension_dir = "ext"
curl 확장
;extension=curl
↓
extension=curl
file info 확장
;extension=fileinfo
↓
extension=fileinfo
openssl 확장
;extension=openssl
↓
extension=openssl

Laavel Project 작성


Powerrshell에서 다음 명령을 입력하여 laavel9 프로젝트를 만듭니다.
composer create-project "laravel/laravel=9.*" 【プロジェクト名】
이번엔'example-app'라는 프로젝트명으로 제작됐다.
PS C:\src> composer create-project "laravel/laravel=9.*" example-app
Creating a "laravel/laravel=9.*" project at "./example-app"
Installing laravel/laravel (v9.1.4)
  - Installing laravel/laravel (v9.1.4): Extracting archive
Created project in C:\src\example-app
> @php -r "file_exists('.env') || copy('.env.example', '.env');"
Loading composer repositories with package information
Updating dependencies
<省略>
프로젝트 제작에 시간이 좀 걸리니 잠시만 기다리세요.
제작이 완료되면 프로젝트 폴더에 들어가 php artisan-V 명령을 사용합니다
버전을 확인합니다.
PS C:\src\example-app> php artisan -V
Laravel Framework 9.7.0
이로써 라벨의 프로젝트 제작이 완료되었습니다.

Vue3의 준비.


Laavel 프로젝트의 폴더에서 npm install vue-save dev를 실행합니다.
실행이 완료되면 패키지제이슨 확인.
PS C:\src\example-app> npm install vue --save-dev
Vue3 설치가 확인되었습니다.

동작 확인


루트 폴더/resource/js 폴더에 Component 폴더 만들기
다음은 App입니다.vue 파일을 만듭니다.
App.vue
{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "devDependencies": {
        "axios": "^0.25",
        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
        "postcss": "^8.1.14",
        "vue": "^3.2.31"
    }
}
루트 폴더/resource/js 폴더의 app.jsVue처럼 다시 쓰기.
관례에 따르면 가장 먼저 실행되는 구성 요소는 App이다.이 구성 요소를 원합니다.
app.js
<template>
 <h1>Hello World Laravel9+Vue</h1>
</template>
마지막으로 laavel의 시작 페이지welcome.blade.php를 열어 주십시오.
Vue 구성 요소를 다시 작성하여 호출합니다.
welcome.blade.php
require('./bootstrap');
import { createApp } from "vue";
import App from "./components/App.vue";

createApp(App).mount("#app");
마지막으로 웹 패키지 설정도 vue를 사용하여 추가해야 합니다.
webpack.mix.js
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Laravel9+Vue3</title>

        <!-- Scripts -->
        <script src="{{ asset('js/app.js') }}" defer></script>
	
	<!-- Styles -->
        <link href="{{ asset('css/app.css') }}" rel="stylesheet">
    </head>
    <body>
	<div id="app"></div>
    </body>
</html>
이렇게 하면 Laavel+Vue 환경이 완성됩니다.
Vue를 구성합니다.
mix.js('resources/js/app.js', 'public/js')
    .vue()
    .postCss('resources/css/app.css', 'public/css', [
        //
    ]);
구축이 완료되면 php artisan serve에서 서버를 시작하여 확인합니다.
PS C:\src\example-app> npm run dev
.
.
.
Laravel Mix v6.0.43


✔ Compiled Successfully in 172ms
┌─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┬──────────┐
│                                                                                                                        File │ Size     │
├─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┼──────────┤
│                                                                                                                  /js/app.js │ 1.31 MiB │
│                                                                                                                 css/app.css │ 1 bytes  │
└─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┴──────────┘
webpack compiled successfully

이렇게 해서 Larval+Vue가 완성되었습니다!

Pug의 준비


npm에 pug를 설치합니다.
우선 npm에 설치합니다.
프로젝트 루트 폴더의 웹 페이지입니다.mix.이르다
pug를 사용하는 설정을 추가합니다.
webpack.mix.js
PS C:\src\example-app> php artisan serve
Starting Laravel development server: http://127.0.0.1:8000
설정이 끝나면 App.Pug를 사용하여 vue를 코드로 덮어씁니다.
App.vue
PS C:\src\example-app> npm install pug pug-plain-loader --save-dev
npm run build, php artisan serve로 서버를 부팅하여 확인합니다.

확인했어, pug 반응 나왔어!

tailwindscss의 준비


정식으로 그렇게 설정해.
https://tailwindcss.com/docs/guides/laravel 
const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
    .vue()
    .webpackConfig({
        module: {
          rules: [{
            test: /\.pug$/,
            loader: 'pug-plain-loader'
          }],
        }
     })
    .postCss('resources/css/app.css', 'public/css', [
        //
    ]);
구성 파일을 생성합니다.
<template lang="pug">
h1 HelloWorld Laravel9 Vue Pug
</template>
tailwind 프로필을 이렇게 설정합니다.
콘텐츠의 *.blade.php, *.대상이 되지 않을 때 js가 필요하지 않습니다.
tailwind.config.js
PS C:\src\example-app> npm install tailwindcss postcss autoprefixer --save-dev
example-app\resources\css 폴더app.csstailwindscss의 속성을 추가합니다.
app.css
PS C:\src\example-app> npx tailwindcss init

Created Tailwind CSS config file: tailwind.config.js
웹 패키지를 설정할 때tailwindscss에서 생성한 CSS 파일은 laavel의public 폴더에 반영됩니다.
webpack.mix.js
module.exports = {
  content: [
	'./resources/**/*.blade.php',
	'./resources/**/*.js',
	'./resources/**/*.vue',
	],
  theme: {
    extend: {},
  },
  plugins: [],
}
마지막으로 앱.vu 파일을tailwindscss를 적용하는 스타일로 설정합니다.
App.vue
@tailwind base;
@tailwind components;
@tailwind utilities;
npm run build 및 php artisan serve를 통해 동작을 확인한다.

무사히 반영했어!
[전재] 허함수와 구조함수, 분석함수
==equals와 무엇이 다른지(하나)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage