vue3+vite+ts搭建一個完整的項目（包括vue-router，vuex，ElementPlus等插件）

文章目錄

• • 一，介紹
  • 二，搭建項目
  • 三，安裝vue-router4.0
  • 四，安裝vuex
  • 五，安裝 Element plus

一，介紹

Vite（法語單詞，“快” 的意思）是一種新型的前端建構工具

最初是配合 Vue3.0 一起使用的，後來适配了各種前端項目，目前提供了 Vue、React、Preact 架構模闆

vite —— 一個由 vue 作者尤雨溪開發的 web 開發工具，它具有以下特點：

• 快速的冷啟動
• 即時的子產品熱更新

• 真正的按需編譯

  從作者在微網誌上的發言：

Vite，一個基于浏覽器原生 ES imports 的開發伺服器。利用浏覽器去解析 imports，在伺服器端按需編譯傳回，完全跳過了打包這個概念，伺服器随起随用。同時不僅有 Vue 檔案支援，還搞定了熱更新，而且熱更新的速度不會随着子產品增多而變慢。針對生産環境則可以把同一份代碼用 rollup 打。雖然現在還比較粗糙，但這個方向我覺得是有潛力的，做得好可以徹底解決改一行代碼等半天熱更新的問題

中可以看出 vite 主要特點是基于浏覽器 native 的 ES module 來開發，省略打包這個步驟，因為需要什麼資源直接在浏覽器裡引入即可

二，搭建項目

通過在終端中運作以下指令，可以使用 Vite 快速建構 Vue 項目。

使用 npm：

$ npm init @vitejs/app <project-name>
$ cd <project-name>
$ npm install
$ npm run dev
           

或者 yarn：

$ yarn create @vitejs/app <project-name>
$ cd <project-name>
$ yarn
$ yarn dev
           

三，安裝vue-router4.0

npm install vue-[email protected]
           

在components目錄下建立兩個檔案即可

//router目錄下的index.js
import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'

const routes = [
  { path: '/', component: () => import('../components/Home.vue') },
  { path: '/about', component: () => import('../components/About.vue') }
]

const router = createRouter({
  // hash 或者 history 模式
  // history: createWebHashHistory(),
  history: createWebHistory(),
  routes
})
// 全局路由守衛的方法跟vue-router3一樣
//路由全局前置守衛
router.beforeEach((to,from,next)=>{
  console.log('路由全局前置守衛', to, from);
  next()
})
//路由全局後置守衛
router.afterEach((to,from,next)=>{
  console.log('路由全局後置守衛', to, from);
  next()
})

export default router

           

引入router

//main.js
import { createApp } from 'vue'
import App from './App.vue'
// 引入router
import router from './router'

createApp(App)
.use(router)
.mount('#app')

           

//App.vue
<template>
  <div> 
    <router-link to="/">home</router-link>
    <router-link to="/about">about</router-link>
    <router-view></router-view>
  </div>
</template>

           

四，安裝vuex

npm install [email protected] --save
           

src目錄下建立store/index.js

import { createStore } from 'vuex'

export default createStore({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})
           

main.ts檔案引入

import { createApp } from 'vue'
import App from './App.vue'
// 引入router
import router from './router'
// 引入store
import store from './store'

createApp(App).use(router).use(store).mount('#app')

           

五，安裝 Element plus

官網位址：https://element-plus.gitee.io/#/zh-CN/component/quickstart

npm install element-plus --save
           

然後在main.ts裡面

import { createApp } from 'vue'
import App from './App.vue'
// 引入router
import router from './router'
// 引入store
import store from './store'
// 引入 ElementPlus
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

createApp(App).use(router).use(store).use(ElementPlus).mount('#app')

           

頁面上使用

About.vue

<template>
  <el-button type="success">成功按鈕</el-button>
</template>
<script>
  import { defineComponent } from 'vue'
  import { ElButton } from 'element-plus'

  export default defineComponent({
    name: 'app',
    components: {
      ElButton,
    },
  })
</script>