vite+vue3.0+ts+element-plus快速搭建項(xiàng)目的實(shí)現(xiàn)

更新時(shí)間：2021年06月24日 09:38:15 作者：火滴雪葉

本文將結(jié)合實(shí)例代碼，介紹vite+vue3.0+ts+element-plus快速搭建項(xiàng)目的實(shí)現(xiàn)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

vite 作用

快速的冷啟動(dòng)：不需要等待打包操作；
即時(shí)的熱模塊更新：替換性能和模塊數(shù)量的解耦讓更新飛起；
真正的按需編譯：不再等待整個(gè)應(yīng)用編譯完成，這是一個(gè)巨大的改變。

使用的環(huán)境

node v12.19.0
@vue/cli 4.5.8

搭建項(xiàng)目

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 相當(dāng)于 @vue-cli 項(xiàng)目中的 vue.config.js

import path from "path";

const pathResolve = (pathStr: string) => {
  return path.resolve(__dirname, pathStr);
}

const config = {
  base: './',//在生產(chǎn)中服務(wù)時(shí)的基本公共路徑。@default '/'
  alias: {
    '/@/': pathResolve('./src'),
  },
  outDir: 'vite-init',//構(gòu)建輸出將放在其中。會(huì)在構(gòu)建之前刪除舊目錄。@default 'dist'
  minify: 'esbuild',//構(gòu)建時(shí)的壓縮方式
  hostname: 'localhost',//本地啟動(dòng)的服務(wù)地址
  port: '8800',//服務(wù)端口號(hào)
  open: false,//啟動(dòng)服務(wù)時(shí)是否在瀏覽器打開(kāi)
  https: false,//是否開(kāi)啟https
  ssr: false,//是否服務(wù)端渲染
  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的目標(biāo)版本:'ES3'(默認(rèn))，'ES5'， 'ES2015'， 'ES2016'， 'ES2017'， 'ES2018'， 'ES2019'， 'ES2020'，或'ESNEXT'。
    "module": "commonjs",//指定模塊代碼生成:'none'， 'commonjs'， 'amd'， 'system'， 'umd'， 'es2015'， 'es2020'，或'ESNext'。
    "strict": true,//是否啟用所有嚴(yán)格的類(lèi)型檢查選項(xiàng)。
    "baseUrl":"./",//用于解析非絕對(duì)模塊名稱(chēng)的基本目錄。
    "paths": {
      "/@/*": ["./src/*"]
    },  
    "noImplicitAny": true, //對(duì)于隱含有'any'類(lèi)型的表達(dá)式和聲明引發(fā)錯(cuò)誤。
    "esModuleInterop": true, //通過(guò)為所有導(dǎo)入創(chuàng)建名稱(chēng)空間對(duì)象，實(shí)現(xiàn)CommonJS和ES模塊之間的互操作性。意味著“allowSyntheticDefaultImports”。
    "experimentalDecorators": true, //支持對(duì)ES7裝飾器的實(shí)驗(yàn)性支持。
    "skipLibCheck": true, //跳過(guò)聲明文件的類(lèi)型檢查。
    "forceConsistentCasingInFileNames": true //禁止對(duì)同一文件使用大小寫(xiě)不一致的引用。
  }
}

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文件夾，并在文件夾內(nèi)創(chuàng)建 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文件時(shí)一定要帶上后綴名，否則會(huì)報(bào)找不到文件

在views文件夾內(nèi)創(chuàng)建 HelloWorld.vue

<template>
  <h1>{{ msg }}</h1>
  <button @click="realTime.count++">count is: {{ realTime.count }}</button>
  <button @click="handleclick">點(diǎn)擊跳轉(zhuǎn)其它路由</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: '歡迎來(lái)到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 文件夾，并在文件夾內(nèi)創(chuàng)建 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');

細(xì)心的同學(xué)這時(shí)可能已經(jīng)發(fā)現(xiàn)：在 ts 文件中引入 .vue 文件時(shí)出現(xiàn)以下報(bào)錯(cuò)，但是不影響代碼正常運(yùn)行

報(bào)錯(cuò)原因：typescript 只能理解 .ts 文件，無(wú)法理解 .vue文件

解決方法：在項(xiàng)目根目錄或 src 文件夾下創(chuàng)建一個(gè)后綴為 .d.ts 的文件，并寫(xiě)入以下內(nèi)容：

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'

至此項(xiàng)目搭建完成，可以愉快的寫(xiě)代碼了。

到此這篇關(guān)于vite+vue3.0+ts+element-plus快速搭建項(xiàng)目的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)vite+vue3.0+ts+element-plus搭建內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: