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

  • 本文代码: https://github.com/ikuokuo/start-vue3
  • 在线演示: https://ikuokuo.github.io/start-vue3/ 👀
    在这里插入图片描述

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/

访问网址:

与 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
# impor
  • 3
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值