vue-cli를 사용하지 않고 typescript/vue-router/vuex/를 사용하여 vue.js3 앱을 생성하는 방법
제 작업은 타이프 스크립트를 지원하는 vue3 애플리케이션을 생성하는 것입니다.또한 상태 관리에는 vuex를, 기본 라우팅에는 vue-router를 사용해야 하는데 이 프로젝트에서는 vue-cli를 사용할 수 없습니다.
현재 코드:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://unpkg.com/vue@next"></script>
<script src="https://unpkg.com/vue-router@4"></script>
<script src="https://unpkg.com/vuex@3.6.2/dist/vuex.js"></script>
</head>
나는 vue 프로젝트에서 활자본을 사용한 적이 없기 때문에
vue-cli를 사용하지 않고 vue3 앱을 처음부터 구축하는 블로그나 튜토리얼을 제안해 주시겠습니까?
풀테이크:
VueJS 3.0 프레임워크에 TypeScript를 사용하여 로그인 폼을 작성합니다.또한 Vuex(상태 관리)를 사용하여 데이터를 저장하고 서버에서 기록, 읽기 및 가져오는 등 데이터를 조작해야 합니다.@ Vue / cli는 프로젝트에서 사용하지 마십시오.프로젝트에서 웹 팩을 직접 실행해야 합니다.
이것은 나에게 매우 중요하다.
잘 부탁드립니다
Vue CLI를 사용할 수 없는 경우 종속성을 수동으로 설치해야 합니다.
간단하게 하기 위해서, Parcel을 번들러로 사용할 수 있습니다.
이렇게 하면 웹 팩을 구성할 필요가 없습니다.
먼저 Typescript가 글로벌하게 설치되어 있는지 확인합니다.
다음으로 패키지를 설정합니다.json은 다음과 같습니다.
{
"name": "project name",
"version": "1.0.0",
"description": "",
"main": "index.js",
"keywords": [],
"author": "",
"license": "ISC",
"scripts": {
"clean": "rm dist/bundle.js",
"start": "parcel src/index.html",
"build-prod": "parcel build src/index.html"
},
"dependencies": {
"vue@next": "^2.6.12",
"vuex": "2.0.0",
"vue-router": "2.0.0"
},
"devDependencies": {
"parcel-bundler": "^1.12.5"
}
}
여기에는 Vue3, Vuex, Vue Router 및 Parcel에 대한 의존관계와 parcel에 대한 설정 스크립트가 포함됩니다.
실행yarn install
또는npm install
모든 종속성을 설치합니다.
다음으로 루트 내에 App.vue, index.html 및 index.ts가 있는지 확인합니다.src/
디렉토리로 이동합니다.
마지막으로 루트에 다음 파일을 만듭니다.
vue.shim.d.ts
declare module "*.vue" {
import Vue from 'vue'
export default Vue
}
tsconfig.json
{
"compilerOptions": {
"outDir": "./dist/",
"sourceMap": true,
"strict": true,
"noImplicitReturns": true,
"noImplicitAny": true,
"module": "es6",
"moduleResolution": "node",
"target": "es5",
"allowJs": true,
},
"include": [
"./src/**/*"
]
}
https://create app.dev/parcel이라는 멋진 웹사이트를 보세요.
Vue CLI 없이 빌드를 구성하고 필요한 기능을 구현할 수 있습니다.
Vue와 typescript가 체크된 프로젝트를 생성하여 다운로드한 후 필요에 따라 Vue 라우터와 Vuex를 추가할 수 있습니다.
언급URL : https://stackoverflow.com/questions/67571528/how-to-create-vue-js3-app-using-typescript-vue-router-vuex-but-without-vue-cli
'programing' 카테고리의 다른 글
Vue 라우터 Auth-guard 함수가 Vuex 스토어 상태를 확인하지 않음 (0) | 2022.08.30 |
---|---|
java.displaces를 클릭합니다.날짜 vs java.sql.날짜. (0) | 2022.08.30 |
Vuex "context" 개체는 무엇입니까? (0) | 2022.08.30 |
Vue.js - 원본 양식 데이터가 변경되지 않는 한 제출 버튼 비활성화 (0) | 2022.08.30 |
EmberJS의 Vuex/Redux는 무엇입니까? (0) | 2022.08.30 |