vue3 스캐폴딩을 구축하는 Vite 및 npm 방법

vue3의 vue-cli 최신 버전 설치

이전 버전 제거

vue-cli2 卸载    npm uninstall -g vue-cli
vue-cli3 卸载    npm uninstall -g @vue/cli

새 버전 @vue/cli 설치

vue-cli3 安装最新版   npm install -g @vue/cli
vue-cli3 安装指定版   npm install -g @vue/[email protected]

//检查vue版本号
vue -V

vue3용 최신 스캐폴딩 구축

구축하는 웹 방식

이전 버전의 단계와 일치하여 설치 중에 구성 항목을 선택할 수 있습니다.

npm create myapp

VITE 구축 방법

프로젝트 초기화

npm init vite-app myapp
或
yarn create vite-app myapp

종속성 설치

yarn install 
或
yarn 
或
npm i

스타트업 프로젝트

yarn dev 
或
npm run dev

이 프로젝트는 기본 구조일 뿐이며 다른 구성은 없으며 직접 구성을 추가해야 합니다.

초대 구성 항목

TS 구성

1 설치

yarn add typescript -D

2 초기화

//执行命令 初始化 tsconfig.json 
npx tsc --init

3 main.js를 main.ts 로 수정하여 <script> <script lang="ts">

4 vue 파일을 인식하도록 ts를 구성하고 프로젝트 루트 디렉터리에 shim.d.ts 파일을 추가합니다.

declare module "*.vue" {
  import { Component } from "vue";
  const component: Component;
  export default component;
}

vue-router 구성

1 설치

yarn add [email protected]
// or
yarn add vue-router@next

2 vue-router 구성

프로젝트 src 디렉토리 아래에 새 라우터 디렉토리를 만든 다음 index.ts 파일을 추가하고 다음 콘텐츠를 추가합니다.

import {createRouter, createWebHashHistory} from 'vue-router'
const routes:any = [
  {
    path: '/',
    name: 'Home',
    component: () => import('../views/Home.vue')
  }
]
// Vue-router新版本中，需要使用createRouter来创建路由
export default  createRouter({
  // 指定路由的模式,此处使用的是hash模式
  history: createWebHashHistory(),
  routes // short for `routes: routes`
})

3 라우터를 main.ts 에 도입 하고 main.ts 파일을 수정합니다.

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
import router from './router/index'

// import router 后创建并挂载根实例。
const 
// 确保 t_use_  实例来创建router, 将路由插件安装到 app 中
createApp(App).use(router).mount('#app')

vuex 구성

1 설치

yarn add vuex@4
//或者
yarn add vuex@next

2 프로젝트 src 디렉토리 아래에 새 저장소 디렉토리를 생성하고 index.ts 파일을 추가한 후 다음 내용을 추가합니다.

import { createStore } from 'vuex'

interface State {
  userName: string
}
export default createStore({
  state(): State {
    return {
      userName: "vuex",
    };
  },
  mutations:{ },
  actions: { },
  modules: { },
  plugins: [ ]

});