programing

vue-cli를 사용하지 않고 typescript/vue-router/vuex/를 사용하여 vue.js3 앱을 생성하는 방법

bestcode 2022. 8. 30. 22:18
반응형

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

반응형