vite 出了 2.x 版本，抱著學一學的心態決定出個簡單的專案，結合 element-plus，以及將會成為每位前端必會的 typescript，實現瞭如下內容。

vite是一個由原生 ESM 驅動的 Web 開發構建工具。在開發環境下基於瀏覽器原生 ES imports 開發，在生產環境下基於 Rollup 打包。

vite 作用

• 快速的冷啟動：不需要等待打包操作；
• 即時的熱模組更新：替換效能和模組數量的解耦讓更新飛起；
• 真正的按需編譯：不再等待整個應用編譯完成，這是一個巨大的改變。

使用的環境

• 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 http://www.cppcns.com
 
= {
  base: './',//在生產中服務時的基本公共路徑。@default '/'
  alias: {
    '/@/': pathResolve('./src'),},outwww.cppcns.comDir: '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 });

   zeFOoUWy 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 { czeFOoUWyreateApp } 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檔案

解決方法：在專案根目錄或 srzeFOoUWyc 資料夾下建立一個字尾為 .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+vue3.0+ts+element-plus快速搭建專案的實現的文章就介紹到這了,更多相關vite+vue3.0+ts+element-plus搭建內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！