Laravel8.x와 Vue.js3에서 ToDo 응용 프로그램 2~Vue를 제작합니다.js 도입~
개시하다
Laravel8.x와 Vue.이것은 js3를 사용하여 ToDo 앱을 만드는 두 번째 탄입니다!
라벨의 환경은 이곳에 구축되어 있다.
이번에는 베입니다.js를 도입하고 싶습니다.
Vue.이번 목표는 js3을 설치하고 Type Script를 사용할 수 있도록 하는 것입니다.
구축
라벨의 뷰 부분을js로 대신 제작.
프런트엔드
Vue.js3
TypeScript
백엔드
PHP7.4.1
Laravel8.x
데이터베이스
MYSQL8.0
인프라 시설
Docker
docker-compose
Nginx
Vue.도입
다양한 설치
Laravel8.기본값
laravel-mix6이 x에 설치되어 있기 때문에 Vue입니다.js3 및 TypeScript를 설치합니다.우선 위에서부터 다음 명령을 순서대로 집행한다.
docker-compose run app npm install vue@next -D
docker-compose run app npm install vue-loader@next -D
docker-compose run app npm install @vue/compiler-sfc -D
docker-compose run app npm install @types/webpack-env typescript ts-loader -D
Vue.js 설정
필요한 프로그램 라이브러리 등이 설치되어 있기 때문에 설정합니다.
우선 홈페이지입니다.mix.js 설정을 진행합니다.
src/webpack.mix.js
const mix = require('laravel-mix');
mix.ts('resources/js/app.ts', 'public/js')
.css('resources/css/app.css', 'public/css').vue();
});
app.js변경app.ts!cd src/resources/js
mv app.js app.ts
tsconfig.json.cd src
touch tsconfig.json
tsconfig.json 파일입니다.src/tsconfig.json
{
"compilerOptions": {
"outDir": "./built/",
"sourceMap": true,
"strict": true,
"noImplicitReturns": true,
"noImplicitAny": true,
"module": "es2015",
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"moduleResolution": "node",
"target": "es6",
"lib": [
"es2016",
"dom"
]
},
"include": [
"resources/js/**/*"
]
}
resources/js 디렉터리에 @types 디렉터리를 만듭니다.cd src/resources/js
mkdir @types
@types 파일을 생성합니다.cd @types
touch shims-vue.d.ts
shims-vue.d.ts 편집.src/resources/js/@types/shims-vue.d.ts
declare module "*.vue" {
import {defineComponent} from "vue";
const component: ReturnType<typeof defineComponent>;
export default component;
}
Vue.확인
여기서부터는 베입니다.화면에 js가 설정되어 있는지 확인하고 싶습니다.
먼저 방금 이름을 바꾼
shims-vue.d.ts를 편집합니다.import { createApp } from 'vue';
import App from './App.vue';
createApp(App).mount('#app')
app.ts에서 오류가 발생할 수 있음이후 해결을 위해 잠시 무시했다.
다음에 생성
import App from './App.vue';합니다.touch App.Vue
src/resources/js/App.vue
<template>
<div>{{ hello }}</div>
</template>
<script lang="ts">
import { ref } from "vue";
export default {
setup() {
const hello = ref(
"Hello From TypeScript"
)
return {
hello
}
},
};
</script>
App.Vue을 만듭니다.cd src/resources/views
touch index.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script src="js/app.js"></script>
</body>
</html>
index.blade.php를 경로로 설정합니다.다시 쓰다
index.blade.php.src/routes/web.php
<?php
use Illuminate\Support\Facades\Route;
Route::get('/', function () {
return view('index');
});
docker-compose run app npm run dev
web.php와 app.js가 나타나면
마지막으로 화면 확인입니다.
다음 명령을 입력하면 방문http://localhost:80
app.css이 성공합니다!!docker-compose up -d
다음번
다음은 DB 제작과 뷰.js에 데이터를 보내는 곳으로 가고 싶어요!!
여기까지 봐주셔서 감사합니다!!
Reference
이 문제에 관하여(Laravel8.x와 Vue.js3에서 ToDo 응용 프로그램 2~Vue를 제작합니다.js 도입~), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://zenn.dev/tasuya/articles/c559e49ed210c6텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
