- 本文代码: 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"],
},
};
前提准备
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