Vue3入门第一章：使用全家桶搭建基础框架

在下一代前端开发与构建工具：Vite文章中，基于Vite创建了Vue3的项目，现在开始完善内容。

添加路径别名

之前的开发中习惯使用@或者_c等符号进行路径缩写了，在vite.config.js中进行配置别名

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    }
  }
})

因为路径需要绝对路径，所以需要使用node的path模块

vue-router

安装vue-router4.x版本，注意3.x版本不支持vue3

$ yarn add vue-router@next --save

添加router文件夹并创建index.js和routes.js文件

import * as VueRouter from 'vue-router';
import routes from './routes';

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

export default router;

routes.js文件

/**
 * 路由配置文件
 */
export default [
  { path: '/', component: () => import('@/views/dashboard/Home.vue') }
]

创建views目录并创建dashboard目录以及Home.vue文件

<template>
  <div>首页</div>
</template>

<script>
  export default {
    name: 'Home',
    data() {
      return {
        
      }
    }
  }
</script>

修改main.js，引入路由

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

// 创建实例
const app = createApp(App)

// 挂载路由
app.use(router)

// 渲染实例
app.mount('#app')

启动项目，验证是否成功

$ yarn dev
yarn run v1.22.17
warning package.json: No license field
$ vite

  vite v2.6.14 dev server running at:

  > Local: http://localhost:3000/
  > Network: use `--host` to expose

  ready in 438ms.

瞧瞧这速度，438ms🚀🚀🚀

vuex

安装4.x版本，注意3.x版本不支持vue3

$ yarn add vuex@next --save

创建store目录并添加index.js文件

import { createStore } from 'vuex'

const store = createStore({
  state () {
    return {
      count: 0
    }
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

export default store

修改main.js文件

import store from './store';

// 挂载store
app.use(store)

修改home.vue检测是否生效

<template>
  <div>{{ count }}</div>
</template>

<script>
  export default {
    name: 'Home',
    data() {
      return {
        
      }
    },
    computed: {
      count () {
        return this.$store.state.count
      }
    }
  }
</script>

此时，页面上显示0，说明store引入完成。

结语

由于时间原因，本次只把相应的库正确引入。

Vue使用的是optionsAPI的方式，后续在研究组合式API

注意vue-router和vuex的引入方式，4.x版本没有默认导出，需使用* as xx，否则会报错。

Vite工程启动速度超级快，且基于ESM的方式，对于问题定位也很方便。