• This article code: github.com/ikuokuo/sta…
  • Online demo: ikuokuo.github. IO /start-vue3/ 👀

Vite creates a Vue 3 project

yarn create vite-app my-site
cd my-site
yarn
yarn dev
Copy the code

Run output:

❯ yarn dev yarn run v1.22.10 warning package.json: No license field $vite vite 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/Copy the code

Visit website:

Difference from Vue 2

See Migration Guide

Vite configuration

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"],}};Copy the code

See: vite-config File

The premise to prepare

eslint-plugin-vue

yarn add -D eslint eslint-plugin-vue
Copy the code

.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",}};Copy the code

TypeScript

yarn add -D typescript
Copy the code

See:

  • Vue3 – TypeScript
  • Vite – TypeScript

Vue Router

yarn add vue-router@next
Copy the code

Vuex

yarn add vuex@@next
Copy the code

Ant Design Vue

yarn add ant-design-vue@next
# import on demand
yarn add -D babel-plugin-import

# https://github.com/vueComponent/ant-design-vue/issues/2798
yarn add @ant-design/colors
Copy the code

.babelrc:

{
  "plugins": [["import", { "libraryName": "ant-design-vue"."libraryDirectory": "es"."style": "css" }] // 'style: true' loads the less file]}Copy the code

Rely on other

yarn add -D sass
Copy the code

Begin to use

Use the TypeScript

  • Rename main.js to main.ts

  • Replace/SRC /main.js with/SRC /main.ts in index.html

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

Using the 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,
});
Copy the code

Using 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"); ,}}});Copy the code

Add the 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>Copy the code

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>Copy the code

To change themain.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");
Copy the code

To change theApp.vue

Use Ant Design to build the home page layout, where the routing part is as follows:

<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>
Copy the code

Publish to GitHub Pages

Edit vite. Config. ts to add base path:

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

Edit router/index.ts to add base path:

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

Compile, republish:

cd my-site
yarn build

export GIT_HASH=`git rev-parse --short HEAD`

cd dist/
git init
git remote add origin git@github-ik:ikuokuo/start-vue3.git
git checkout --orphan gh-pages
git add .
git commit -m "deploy website - based on $GIT_HASH"
git push origin gh-pages
Copy the code

Visit ikuokuo.github. IO /start-vue3/ to experience the online demo.

reference

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

conclusion

Welcome to GoCoding public account, share practical tips and knowledge in daily Coding!