• 本文代码： https://github.com/ikuokuo/st...
  • 在线演示： https://ikuokuo.github.io/sta... ????

Vite 创立 Vue 3 我的项目

yarn create vite-app my-sitecd my-siteyarnyarn dev

运行输入：

❯ yarn devyarn run v1.22.10warning package.json: No license field$ vitevite v1.0.0-rc.4[vite] Optimizable dependencies detected:vue  Dev server running at:  > Local:    http://localhost:3000/  > Network:  http://192.168.1.100:3000/

拜访网址：

与 Vue 2 的差别

详见： Migration Guide

Vite 配置

vite.config.ts:

import { resolve } from "path";function pathResolve(dir: string) {  return resolve(__dirname, ".", dir);}module.exports = {  alias: {    "/@/": pathResolve("src"),  },  optimizeDeps: {    include: ["@ant-design/icons-vue"],  },};

详见： Vite - Config File

前提筹备

eslint-plugin-vue

yarn add -D eslint eslint-plugin-vue

.eslintrc.js:

module.exports = {  extends: [    // add more generic rulesets here, such as:    // "eslint:recommended",    "plugin:vue/vue3-recommended",    // "plugin:vue/recommended" // Use this if you are using Vue.js 2.x.  ],  rules: {    // override/add rules settings here, such as:    "vue/no-multiple-template-root": "off",  },};

TypeScript

yarn add -D typescript

详见：

  • Vue3 - TypeScript
  • Vite - TypeScript

Vue Router

yarn add vue-router@next

Vuex

yarn add vuex@@next

Ant Design Vue

yarn add ant-design-vue@next# import on demandyarn add -D babel-plugin-import# https://github.com/vueComponent/ant-design-vue/issues/2798yarn add @ant-design/colors

.babelrc:

{  "plugins": [    ["import", { "libraryName": "ant-design-vue", "libraryDirectory": "es", "style": "css" }] // `style: true` 会加载 less 文件  ]}

其余依赖

yarn add -D sass

开始应用

应用 TypeScript

  • main.js 重命名为 main.ts

  • index.html 里把 /src/main.js 替换为 /src/main.ts

    ...<body>  <div id="app"></div>  <script type="module" src="/src/main.ts"></script></body></html>

应用 Vue Router

router/index.ts:

import { createRouter, createWebHistory } from "vue-router";const routes = [  {    path: "/",    name: "Home",    component: () => import("/@/views/Home.vue"),  },  {    path: "/setting",    name: "Setting",    component: () => import("/@/views/Setting.vue"),  },];export default createRouter({  history: createWebHistory(),  routes,});

应用 Vuex

store/index.ts:

import { createStore } from "vuex";export default createStore({  state() {    return {      count: 0,    };  },  mutations: {    increment(state) {      state.count++;    },  },  actions: {    increment(context) {      context.commit("increment");    },  },});

增加 Views

views/Home.vue:

<template>  <h1>This is a home page</h1>  <HelloWorld msg="Hello Vue 3.0 + Vite" /></template><script lang="ts">import { defineComponent } from "vue";import HelloWorld from "/@/components/HelloWorld.vue";export default defineComponent({  name: "Home",  components: {    HelloWorld,  },});</script>

views/Setting.vue:

<template>  <div>    <h1>This is a setting page</h1>    <p>store count is: {{ count }}</p>  </div></template><script lang="ts">import { defineComponent } from "vue";export default defineComponent({  name: "Setting",  computed: {    count() {      return this.$store.state.count;    },  },});</script>

更改 main.ts

利用 Vue Router, Vuex, Ant Design :

import { createApp } from "vue";import router from "/@/router";import store from "/@/store";import Antd from "ant-design-vue";import "ant-design-vue/dist/antd.css";import App from "/@/App.vue";import "/@/styles/index.scss";const app = createApp(App);app.use(router);app.use(store);app.use(Antd);app.mount("#app");

更改 App.vue

应用 Ant Design 搭建首页布局，其中路由局部如下：

<a-layout-header style="background: #fff; padding: 0">  <a-row type="flex" justify="end">    <a-col class="mr-3">      <a-button        type="primary"        shape="circle"        size="large"        @click="this.$router.push('/')"      >        <template #icon><HomeFilled /></template>      </a-button>    </a-col>    <a-col class="mr-3">      <a-button        type="primary"        shape="circle"        size="large"        @click="this.$router.push('/setting')"      >        <template #icon><SettingFilled /></template>      </a-button>    </a-col>  </a-row></a-layout-header><a-layout-content style="margin: 0 16px">  <div :style="{ padding: '24px', background: '#fff', minHeight: '360px' }">    <router-view />  </div></a-layout-content>

公布到 GitHub Pages

编辑 vite.config.ts 增加 base 门路：

module.exports = {  // otherwise, may assets 404 or visit with index.html  base: "/start-vue3/",  assetsDir: "",};

编辑 router/index.ts 增加 base 门路：

export default createRouter({  history: createWebHistory("/start-vue3/"),  routes,});

编译，再公布：

cd my-siteyarn buildexport GIT_HASH=`git rev-parse --short HEAD`cd dist/git initgit remote add origin git@github-ik:ikuokuo/start-vue3.gitgit checkout --orphan gh-pagesgit add .git commit -m "deploy website - based on $GIT_HASH"git push origin gh-pages

拜访 https://ikuokuo.github.io/sta... 体验在线演示。

参考

  • Vue 3 - Docs
  • Ant Design Vue - Docs
  • Vue Vben Admin
  • Deploying a subfolder to GitHub Pages

结语

欢送关注 GoCoding 公众号，分享日常 Coding 中实用的小技巧、小常识！