vite+vue 3.0+ts+element-plus 빠 른 구축 프로젝트 의 실현

vite 는 2.x 버 전 을 내 고 배 우 는 마음으로 간단 한 프로젝트 를 결정 합 니 다.element-plus 와 결합 하여 모든 전단 에 반드시 필요 한 type:script 이 되 어 다음 과 같은 내용 을 실현 합 니 다.
vite 는 네 이 티 브 ESM 으로 구동 되 는 웹 개발 구축 도구 입 니 다.개발 환경 에서 브 라 우 저 네 이 티 브 ES imports 개발 을 바탕 으로 생산 환경 에서 Rollup 포장 을 기반 으로 합 니 다.
vite 작용
  • 빠 른 냉 작 동:포장 작업 을 기다 릴 필요 가 없습니다
  • 4.567917.실시 간 열 모듈 업데이트:교체 성능 과 모듈 수량의 디 결합 으로 업 데 이 트 를 날 립 니 다4.567917.진정 으로 필요 에 따라 컴 파일:전체 응용 컴 파일 이 완성 되 기 를 기다 리 지 않 습 니 다.이것 은 큰 변화 입 니 다사용 환경
  • node v12.19.0
  • @vue/cli 4.5.8
  • 건설 프로젝트
    
    npm init vite-app <project-name>
    cd <project-name>
    npm install
    npm run dev
    
    혹시
    
    yarn create vite-app <project-name>
    cd <project-name>
    yarn
    yarn dev
    
    배치 하 다.
    vite.config.ts
    vite.config.ts 는@vue-cli 프로젝트 의 vue.config.js 에 해당 합 니 다.
    
    import path from "path";
    
    const pathResolve = (pathStr: string) => {
      return path.resolve(__dirname, pathStr);
    }
    
    const config = {
      base: './',//              。@default '/'
      alias: {
        '/@/': pathResolve('./src'),
      },
      outDir: 'vite-init',//         。           。@default 'dist'
      minify: 'esbuild',//        
      hostname: 'localhost',//         
      port: '8800',//     
      open: false,//             
      https: false,//    https
      ssr: false,//       
      optimizeDeps: {//         
        include: ['axios']
      },
      // proxy: {//    
      //   '/api': {
      //     target: 'http://xx.xx.xx.xx:xxxx',
      //     changeOrigin: true,
      //     ws: true,
      //     rewrite: (path: string) => { path.replace(/^\/api/, '') }
      //   }
      // }
    }
    module.exports = config;
    tsconfig.json
    
    {
      "compilerOptions": {
        "target": "ES5",//  ECMAScript     :'ES3'(  ),'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', 'ESNEXT'。
        "module": "commonjs",//        :'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', 'ESNext'。
        "strict": true,//               。
        "baseUrl":"./",//                。
        "paths": {
          "/@/*": ["./src/*"]
        },  
        "noImplicitAny": true, //     'any'             。
        "esModuleInterop": true, //               ,  CommonJS ES         。   “allowSyntheticDefaultImports”。
        "experimentalDecorators": true, //   ES7         。
        "skipLibCheck": true, //           。
        "forceConsistentCasingInFileNames": true //                  。
      }
    }
    App.vue
    app.vue 수정
    
    <template>
      <img alt="Vue logo" src="./assets/logo.png" />
      <router-view />
    </template>
    
    <script>
    export default {
      name: 'App',
      setup() {
    
      }
    }
    </script>
    Views
    src 에서 views 폴 더 를 새로 만 들 고 폴 더 에 index.vue 를 만 듭 니 다.
    
    <template>
      <HelloWorld :msg="msg"></HelloWorld>
    </template>
    
    <script lang="ts">
    import HelloWorld from "/@/views/HelloWorld.vue";
    import { defineComponent } from "vue";
    export default defineComponent({
      name: "Home",
      components: { HelloWorld },
      setup() {
        return {
          msg: "hello World",
        };
      },
    });
    </script>
    PS:vue 파일 을 도입 할 때 반드시 접미사 이름 을 가 져 와 야 합 니 다.그렇지 않 으 면 파일 을 찾 을 수 없습니다.
    views 폴 더 에 HelloWorld.vue 만 들 기
    
    <template>
      <h1>{{ msg }}</h1>
      <button @click="realTime.count++">count is: {{ realTime.count }}</button>
      <button @click="handleclick">        </button>
      <p>Edit <code>components/HelloWorld.vue</code> to test hot module replacement.</p>
    </template>
    
    <script>
    import { defineComponent, reactive } from "vue";
    import { useRouter } from 'vue-router'
    export default defineComponent({
      name: 'Index',
      props: { msg: { type: String, default: '    vue3' } },
      setup(props) {
        const router = useRouter();
        let realTime = reactive({ count: 0 });
    
        function handleclick() {
          router.push({ path: '/other' })
        }
        return {
          msg: props.msg,
          realTime,
          handleclick
        }
      }
    })
    </script>
    router
    src 에 새 router 폴 더 를 만 들 고 폴 더 에 index.ts 를 만 듭 니 다.
    
    import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
    
    const routes: Array<RouteRecordRaw> = [
      {
        path: '/',
        component: () => import("/@/views/index.vue")
      },
    ]
    
    export default createRouter({
      history: createWebHistory(),
      routes
    })
    main.ts
    원본 main.js 를 main.ts 로 바 꾸 고,수정 후 index.html 에서 도 main.ts 로 바 꾸 는 것 을 잊 지 마 세 요.
    
    import { createApp } from 'vue'
    import router from './router/index'
    import App from './App.vue'
    import ElementPlus from 'element-plus'
    
    import 'element-plus/lib/theme-chalk/index.css'
    import './reset.css'
    
    const app = createApp(App);
    app.use(ElementPlus);
    app.use(router);
    app.mount('#app');
    세심 한 학생 들 은 이때 ts 파일 에.vue 파일 을 도입 할 때 다음 과 같은 오류 가 발생 하지만 코드 의 정상 적 인 운행 에 영향 을 주지 않 습 니 다.

    오류 원인:typescript 은.ts 파일 만 이해 할 수 있 고.vue 파일 은 이해 할 수 없습니다.
    해결 방법:프로젝트 루트 디 렉 터 리 나 src 폴 더 아래 에.d.ts 라 는 접 두 사 를 만 들 고 다음 내용 을 기록 합 니 다.
    
    declare module '*.vue' { }
    declare module '*.js'
    declare module '*.json';
    declare module '*.svg'
    declare module '*.png'
    declare module '*.jpg'
    declare module '*.jpeg'
    declare module '*.gif'
    declare module '*.bmp'
    declare module '*.tiff'
    이로써 프로젝트 구축 이 완료 되 어 코드 를 즐겁게 쓸 수 있 게 되 었 다.
    vite+vue 3.0+ts+element-plus 빠 른 구축 프로젝트 의 실현 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 vite+vue 3.0+ts+element-plus 구축 내용 은 예전 의 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 많은 응원 부 탁 드 리 겠 습 니 다!

    좋은 웹페이지 즐겨찾기