Skip to main content

Vue3 快速开始

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

详见:

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 build
export 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/start-vue3/ 体验在线演示。

参考#