Vue3: 如何以 Vite 创建,以 Vue Router, Vuex, Ant Design 开始应用
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
# 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/start-vue3/ 体验在线演示。
参考
结语
欢迎关注 GoCoding 公众号,分享日常 Coding 中实用的小技巧、小知识!
Vue3: 如何以 Vite 创建,以 Vue Router, Vuex, Ant Design 开始应用的更多相关文章
- Vue 2.0 + Vue Router + Vuex
用 Vue.js 2.x 与相配套的 Vue Router.Vuex 搭建了一个最基本的后台管理系统的骨架. 当然先要安装 node.js(包括了 npm).vue-cli 项目结构如图所示: ass ...
- vue 下搭建ant design环境
之前用ant-design-vue组件在vue页面下使用 一不小心就会出现编译错误,网上不是搭建教程都是不太准确,现整理下 1.根据ant design vue 官网的假定条件 已经安装了nodejs ...
- Vue.js高效前端开发 • 【Ant Design of Vue框架基础】
全部章节 >>>> 文章目录 一.Ant Design of Vue框架 1.Ant Design介绍 2.Ant Design of Vue安装 3.Ant Design o ...
- Vue CLI 5 和 vite 创建 vue3.x 项目以及 Vue CLI 和 vite 的区别
这几天进入 Vue CLI 官网,发现不能选择 Vue CLI 的版本,也就是说查不到 vue-cli 4 以下版本的文档. 如果此时电脑上安装了 Vue CLI,那么旧版安装的 vue 项目很可能会 ...
- vite创建vue3+ts项目流程
vite+vue3+typescript搭建项目过程 vite和vue3.0都出来一段时间了,尝试一下搭vite+vue3+ts的项目 相关资料网址 vue3.0官网:https://v3.vue ...
- 基于 vite 创建 vue3 全家桶项目(vite + vue3 + tsx + pinia)
vite 最近非常火,它是 vue 作者尤大神发布前端构建工具,底层基于 Rollup,无论是启动速度还是热加载速度都非常快.vite 随 vue3 正式版一起发布,刚开始的时候与 vue 绑定在一起 ...
- vue3 vite2 封装 SVG 图标组件 - 基于 vite 创建 vue3 全家桶项目续篇
在<基于 vite 创建 vue3 全家桶>一文整合了 Element Plus,并将 Element Plus 中提供的图标进行全局注册,这样可以很方便的延续 Element UI 的风 ...
- vue.js利用vue.router创建前端路由
node.js方式: 利用node.js安装vue-router模块 cnpm install vue-router 安装完成后我们引入这个模板! 下载vue-router利用script引入方式: ...
- vue3官网介绍,安装,创建一个vue实例
前言:这一章主要是vue的介绍.安装.以及如何创建一个vue实例. 一.vue介绍 vue3中文官网:建议先自己看官网. https://v3.cn.vuejs.org/ vue是渐进式框架,渐进式指 ...
随机推荐
- Node.js 从零开发 web server博客项目[日志]
web server博客项目 Node.js 从零开发 web server博客项目[项目介绍] Node.js 从零开发 web server博客项目[接口] Node.js 从零开发 web se ...
- 我告诉你一个 AtomicInteger 的惊天大秘密
i++ 不是线程安全的操作,因为它不是一个原子性操作. 那么,如果我想要达到类似 i++ 的这种效果,我应该使用哪些集合或者说工具类呢? 在 JDK1.5 之前,为了确保在多线程下对某基本数据类型或者 ...
- redis入门指南(七)—— 安全、协议、管理工具及命令属性
写在前面 学习<redis入门指南>笔记,结合实践,只记录重要,明确,属于新知的相关内容. 安全 1.可以使用bind参数绑定一个地址,使redis只接受这个地址的连接. 2.使用requ ...
- Redis的五大数据类型以及key的相关操作命令
Redis的五大数据类型 redis的数据都是以key/value存储,所以说,五大类型指的是value的数据类型 String 字符串,作为redis的最基本数据类型 redis中的string类型 ...
- HTTP 的前世今生,那些不为人知的秘密
每个时代,都不会亏待会学习的人. 大家好,我是 yes. HTTP 协议在当今的互联网可谓是随处可见,一直默默的在背后支持着网络世界的运行,对于我们程序员来说 HTTP 更是熟悉不过. 平日里我们都说 ...
- layui动态添加选项卡
<!DOCTYPE html><html xmlns:th="http://www.thymeleaf.org"><head> <meta ...
- idea如何通过数据库生成实体类
---恢复内容开始--- https://blog.csdn.net/liu_yulong/article/details/72910588 ---恢复内容结束---
- Python-装饰器(语法糖)上下五千年和前世今生
装饰器上下五千年和前世今生,这里我们始终要问,装饰器为何产生?装饰器产生解决了什么问题?什么样的需求推动了装饰器的产生?思考问题的时候,始终要问,为什么要这样,而不是那样或者其他样.这里我不先说,也不 ...
- Linux ALSA 音频库 配置和使用
ALSA应用库是核心功能,而alsa-utils是一些工具功能集合库.单纯地播放一个wav文件,使用alsa-utils即可,如果还需要合成音频.调试音频质量,那么就需要ALSA应用库. 欲安装使用A ...
- 在IDEA创建类时自动创建作者日期等信息设定
1.效果 1 package com.dream.test; 2 3 /* 4 * @author 匠人码农 5 * @date 2020/04/18 11:17 6 * 概要: 7 * XXXXX ...