Vue3 + Vite 前端工程化-为提效而努力

2023-11-15 18:22:48

Vue3 距首次发布时间近一年了，Vite 也从 1.0 到了 2.x，周边的生态，技术方案足够成熟了，是时候使用新技术来优化开发体验了，因此有了本篇文章。

一、构建工具对比

对比webpack和Vite，Vite有两个核心优势：

增量编译速度快。 Vite使用esbuild作为编译工具，esbuild是一个比webpack快10-100倍的构建工具。在开发过程中，Vite会监听文件的变化，并只编译发生变化的文件，这使得增量编译的速度非常快。
热更新快。 Vite使用的是浏览器原生提供的HMR API，这种方式比webpack的HMR方式要快得多。在开发过程中，当文件发生变化时，Vite会自动将新的文件内容发送给浏览器，浏览器会自动更新页面，这使得热更新的速度非常快。

二、使用 Vue3 和 Vite 构建前端项目

创建项目

vue create my-project

安装 Vite

cd my-project
npm install -D vite

修改 vue.config.js

module.exports = {
  build: {
    rollupOptions: {
      input: 'src/main.js'
    }
  }
}

创建 src/main.js

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

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

创建 App.vue

<template>
  <div id="app">
    <h1>Hello Vite!</h1>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
}
</style>

运行项目

npm run dev

三、使用 Vite 构建前端项目

安装 Vite

npm install -D vite

创建 vite.config.js

export default {
  build: {
    rollupOptions: {
      input: 'src/main.js'
    }
  }
}

创建 src/main.js

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

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

创建 App.vue

<template>
  <div id="app">
    <h1>Hello Vite!</h1>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
}
</style>

运行项目

npm run dev

四、使用 Vuex 管理状态

安装 Vuex

npm install -D vuex

创建 store/index.js

import Vuex from 'vuex'
import Vue from 'vue'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    incrementAsync ({ commit }) {
      setTimeout(() => {
        commit('increment')
      }, 1000)
    }
  },
  getters: {
    doubleCount (state) {
      return state.count * 2
    }
  }
})

export default store

修改 main.js

import Vue from 'vue'
import App from './App.vue'
import store from './store'

Vue.config.productionTip = false

new Vue({
  store,
  render: h => h(App)
}).$mount('#app')

修改 App.vue

<template>
  <div id="app">
    <h1>Count: {{ count }}</h1>
    <button @click="increment">Increment</button>
    <button @click="incrementAsync">Increment Async</button>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'

export default {
  name: 'App',
  computed: {
    ...mapState(['count'])
  },
  methods: {
    ...mapActions(['increment', 'incrementAsync'])
  }
}
</script>

五、使用 Vue Router 管理路由

安装 Vue Router

npm install -D vue-router

创建 router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

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

const router = new VueRouter({
  routes
})

export default router

修改 main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

创建 views/Home.vue

<template>
  <div>
    <h1>Home</h1>
  </div>
</template>

<script>
export default {
  name: 'Home'
}
</script>

创建 views/About.vue

<template>
  <div>
    <h1>About</h1>
  </div>
</template>

<script>
export default {
  name: 'About'
}
</script>

六、使用 CSS 预处理器样式化组件

安装 CSS 预处理器

例如，要安装 Sass，可以使用以下命令：

npm install -D sass

创建 src/styles/main.scss

body {
  font-family: Avenir, Helvetica, Arial, sans-serif;
}

#app {
  color: #ff0000;
}

修改 App.vue

<template>
  <div id="app">
    <h1>Hello Vite!</h1>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style lang="scss">
  @import './styles/main.scss';
</style>