TypeScript + Vite + Vue3 + Element Plus 项目初探

前言

Vue3 跟 Vite 正式版发布有很长一段时间了，生态圈也渐渐丰富起来，必须来体验一把。

走起。

项目搭建

使用 Vite 快速初始化项目雏形

可以使用npm或yarn，在这篇文章里都使用npm。

初始化项目：

npm init @vitejs/app
复制代码

然后按照终端提示，填写和选择：

1、输入项目名称

2、选择模板，这里我们选择vue

3、选择ts

创建完成。 然后安装依赖：

npm i
复制代码

启动项目

npm run dev
复制代码

2秒钟，项目启动完毕，这就是Vite的强大之处，利用浏览器原生的 ES 模块支持和用编译到原生的语言开发的工具来提供一个快速且现代的开发体验，Vite的开发服务器比 Vue CLI 快 10-100 倍。

修改 Vite 配置文件

Vite 配置文件 vite.config.ts 位于根目录下，项目启动时会自动读取。
本项目先做一些简单配置，例如：设置 @ 指向 src 目录、 服务启动端口、打包路径、代理等。
关于 Vite 更多配置项及用法，请查看 Vite 官网 。

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src') // 设置 `@` 指向 `src` 目录
    }
  },
  base: './', // 设置打包路径
  server: {
    port: 8888, // 设置服务启动端口号
    open: true, // 设置服务启动时是否自动打开浏览器
    cors: true // 允许跨域

    // 设置代理，根据我们项目实际情况配置
    // proxy: {
    //   '/api': {
    //     target: 'http://xxx.xxx.xxx.xxx:8000',
    //     changeOrigin: true,
    //     secure: false,
    //     rewrite: (path) => path.replace('/api/', '/')
    //   }
    // }
  }
})

复制代码

集成 Vue Router Vuex Element Plus Axios

npm i vue-router@4 vuex@next element-plus axios -S
复制代码

集成Vue Router

创建页面，src/pages/home.vue:

<template>
  <div class="wrapper">
   home
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "home",
}); 
</script>

<style scoped>
</style>

复制代码

创建src/router/index.ts 文件：

import {
  createRouter,
  createWebHashHistory,
  RouteRecordRaw
} from 'vue-router'
import Home from '@/pages/home.vue'


const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'Home',
    component: Home
  }
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router

复制代码

在 main.ts 文件中挂载路由配置:

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


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

复制代码

至此路由创建完成。

集成Vuex

创建./src/store.ts:

import { createStore } from 'vuex'

const defaultState = {
  count: 0
}

// Create a new store instance.
export default createStore({
  state() {
    return defaultState
  },
  mutations: {
    increment(state: typeof defaultState) {
      state.count++
    }
  },
  actions: {
    increment(context) {
      context.commit('increment')
    }
  },
  getters: {
    double(state: typeof defaultState) {
      return 2 * state.count
    }
  }
})

复制代码

在 main.ts 文件中注入vuex:

import store from './store/index'


const app = createApp(App)
app.use(store)
app.mount('#app')

复制代码

集成Element Plus

在 main.ts 文件:

import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'

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

复制代码

到此集成完毕。

项目git地址

推荐阅读：

移动端真机调试指南-对调试说easy
Vue SEO的四种方案
TypeScript + Vite + Vue3 + Element Plus 项目初探
震惊，SourceMap居然失效了？
请将你的npm依赖版本锁定