Vue3: 如何以 Vite 创建，以 Vue Router, Vuex, Ant Design 开始应用

头像
GoCoding
    阅读 5 分钟
    4

    my-site.gif

    Vite 创建 Vue 3 项目

    yarn create vite-app my-site
cd my-site
yarn
yarn dev

    运行输出：

    ❯ 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/

    访问网址：

    create.png

    与 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

    详见：

    Vue Router

    yarn add vue-router@next

    Vuex

    yarn add vuex@@next

    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

    .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-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

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

    参考

    结语

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

    Microsoftvue.jsvitetypescriptantd
    GoCoding
    88 声望5 粉丝

    Go coding in my way :)

    « 上一篇
    JupyterLab 交互式笔记本的安装使用
    下一篇 »
    腾讯云 Serverless 使用，及部署 Docusaurus

    引用和评论

    推荐阅读
    头像
    Flutter ncnn 使用

    GoCoding阅读 1.4k

    头像
    开发插件集合

    寒青赞 11阅读 3k

    头像
    如何选择和设计针对不同技术栈的教程指南

    前端视界赞 5阅读 608

    头像
    Vue.js-方法与事件

    寒青赞 6阅读 3.1k

    头像
    Vue 项目推荐使用这个图标库 vue-icons-plus

    破晓L赞 4阅读 1.9k评论 3

    头像
    Vue使用mixins

    一念赞 4阅读 2.6k

    头像
    在JavaScript中从外部解决Promise：实际应用场景

    王大冶赞 4阅读 774评论 2

    0 条评论
    得票最新