1500字范文 > Vue3应用之使用Vite搭建Vue3项目以及TypeScript Vue Router Vuex Ant Design的使用

Vue3应用之使用Vite搭建Vue3项目以及TypeScript Vue Router Vuex Ant Design的使用

时间：2023-11-17 05:47:16

尤大的 Vue3.0 已经发布有一阵子了，已经很成熟了。今天想起来，是时候该上手体验分享一波了。

前言使用 Vite 搭建 Vue3.0 项目1. 全局安装 Vite2. 使用 Vite 创建 Vue3 项目3. 配置 Vite4. 插件依赖安装eslint-plugin-vueTypeScript[Vue Router](/vuejs/vue-router-next)Vuex[Ant Design Vue](/docs/vue/introduce-cn/)Sass 使用插件开发完整项目使用 TypeScript使用路由 Vue Router使用状态管理 Vuex添加新页面 Views根据实际更新 main.ts更新 App.vue完整代码请移步至 [GitHub](/jxh1997/vue3-vite) 下载。问题解决方案1. 找不到模块“xxx”或其相应的类型声明。ts(2307)

前言

大家都知道，在 Vue3 生态系统中有一个新构建工具 Vite ，它的开发服务器比 Vue CLI 快 10 ~ 100倍，是不是很好奇？具体的内容可以移步至：迟到的 Vue3.0 与 Vite 的体验学习总结的七、Vite 与 Vue CLI 阅读。

本文将主要分享如何使用 Vite 来创建一个 Vue3.0 的项目，并且结合相关内容（TypeScript、Vue Router、Vuex、Ant Design等）编写一个简单的Demo。

使用 Vite 搭建 Vue3.0 项目

1. 全局安装 Vite

npm install -g create-vite-app

2. 使用 Vite 创建 Vue3 项目

create-vite-app vue3-vite

可以发现瞬间创建完成。

Done. Now run:cd vue3-vitenpm install (or `yarn`)npm run dev (or `yarn dev`)

根据提示安装依赖运行项目

C:\Users\jingx\Desktop\vite\vue3-vite>yarn devyarn run v1.22.10warning package.json: No license field$ vite[vite] Optimizable dependencies detected:vueDev server running at:> Network: http://10.7.40.138:3000/> Local: http://localhost:3000/

项目成功启动：

3. 配置 Vite

在项目中创建一个vite.config.js或vite.config.ts文件。如果在当前工作目录中找到 Vite，它将自动使用它。

vite.config.ts基本配置：

const path = require("path")function pathResolve(dir: string) {return path(__dirname, ".", dir);}module.exports = {// 服务端渲染ssr: false,// 是否开启 httpshttps: false,// 设置目录别名alias: {// 键必须以斜线开始和结束'/@/': pathResolve('/src'),'/@components/': pathResolve('/src/components')},// 跨域设置proxy: {// 如果是 /api 开头，则访问如下地址'/api': 'http://10.7.40.138:8080',},// 引入第三方的配置optimizeDeps: {include: ["moment", "echarts", "axios", "mockjs", "@ant-design/icons-vue"]},}

详细 config.ts 配置参考：Vite - config.ts

4. 插件依赖安装

eslint-plugin-vue

yarn add -D eslint eslint-plugin-vue

TypeScript

yarn add -D typescript

参考文档：

Vue3 - TypeScript 支持Vite - TypeScript

Vue Router

yarn add vue-router@next

Vuex

yarn add vuex@@next

Ant Design Vue

yarn add ant-design-vue@next

完整引入组件

import {createApp } from 'vue'import App from './App.vue'import './index.css'import Antd from 'ant-design-vue';import 'ant-design-vue/dist/antd.css'; createApp(App).use(Antd).mount('#app');

以上代码便完成了Antd的引入。需要注意的是，样式文件需要单独引入。

注意：createApp(App).mount(’#app’).use(Antd)
.mount(’#app’) 和 .use(Antd) 的顺序一定不要写错，否则会报：createApp(…).mount(…).use is not a function 的错误。
这也是以为小伙伴提醒我的，非常感谢。

按需引入组件

# 需要使用 babel-plugin-import 来进行按需加载yarn add -D babel-plugin-import

配置.babelrc文件

{"plugins": [["import", {"libraryName": "ant-design-vue", "libraryDirectory": "es", "style": "css" }] // `style: true` 会加载 less 文件]}

# 按需加载需要的组件import {Button } from 'ant-design-vue';

Sass

yarn add -D sass

使用插件开发完整项目

使用 TypeScript

TypeScript是JavaScript类型的超集，它可以编译成纯js。我们在项目中要做的就是将.js文件更新成.ts文件即可，至于里面的细节内容可以去 TypeScript官网阅读文档学习。当然，在项目中也可以不使用ts，其他内容都是相同的，本项目是为了体验ts才使用的，如果不使用可以直接省略。将项目中的mian.js重命名为main.ts，并且将项目中引用该文件的位置index.html也同步更新扩展名。

使用路由 Vue Router

新建文件：router/index.ts用于配置路由信息

import {createRouter, createWebHistory } from 'vue-router';const routes = [{path: '/',name: 'Login',component: () => import("/@/views/Login.vue"),}, {path: '/Home',component: () => import('/@/views/Home.vue'),children: [{path: '/index',component: () => import('/@/views/Index.vue'),meta: {title: '首页' },},{path: '/admin',component: () => import('/@/views/Admin.vue'),meta: {title: '状态管理' },},{path: '/center',component: () => import('/@/views/Center.vue'),meta: {title: '个人中心' },}]}]export default createRouter({history: createWebHistory(),routes,})

需要在main.ts中注入该路由信息。

可以在.vue页面中使用<router-view>、<router-link>等来使用路由。

使用状态管理 Vuex

Vuex 实例对象属性主要有5个核心属性：state、mutations、getters、actions、modules。具体使用就不再赘述了，使用方法大家跟 Vue2 的一样。

新建文件：store/index.ts用于配置 vuex。其中state、mutations是一定要定义的，其他的三个属性对象根据实际需要。

import {createStore } from 'vuex'export default createStore({state: {count: 0,},getters: {},mutations: {add(state) {state.count++;}},actions: {add(ctx) {mit('add')}},modules: {}})

需要在项目的main.ts中将Vuex注册到全局实例中

在文件中使用：通过this.$store.state.xxx来获取状态的值，可以直接使用状态，也可以在vue计算属性computed中使用。在页面的具体使用见Admin.vue内容。

添加新页面 Views

Login.vue登录页面

<template><div class="login-wrap"><div class="ms-login"><div class="ms-title">后台管理系统</div><div class="ms-content"><a-form layout="inline" :model="formInline" @submit="handleSubmit"><a-form-item><a-input v-model:value="formInline.user" placeholder="Username"><template #prefix><UserOutlined style="color: rgba(0, 0, 0, 0.25)"/></template></a-input></a-form-item><a-form-item><a-inputv-model:value="formInline.password"type="password"placeholder="Password"><template #prefix><LockOutlined style="color: rgba(0, 0, 0, 0.25)"/></template></a-input></a-form-item><a-form-item><a-buttontype="primary"html-type="submit":disabled="formInline.user === '' || formInline.password === ''">Log in</a-button></a-form-item></a-form></div></div></div></template><script>import {UserOutlined, LockOutlined } from "@ant-design/icons-vue";import {reactive, getCurrentInstance } from "vue";import {message } from "ant-design-vue";export default {setup() {const formInline = reactive({username: "",password: "",});const {ctx } = getCurrentInstance();const handleSubmit = () => {message.info("登录成功！");setTimeout(() => {ctx.$router.push("/index");}, 1000);};return {formInline,handleSubmit,};},components: {UserOutlined,LockOutlined,},};</script><style scoped>// .... 具体代码见 Github</style >

Home.vue后台页面

<template><a-layout id="components-layout-demo-custom-trigger"><a-layout-sider v-model:collapsed="collapsed" :trigger="null" collapsible><div class="logo"><span>后台管理中心</span></div><a-menu theme="dark" mode="inline" v-model:selectedKeys="selectedKeys"><a-menu-item key="1"><router-link :to="{ path: '/index' }">首页</router-link></a-menu-item><a-menu-item key="2"><router-link :to="{ path: '/admin' }">状态管理Vuex</router-link></a-menu-item><a-menu-item key="3"><router-link :to="{ path: '/center' }">个人中心</router-link></a-menu-item></a-menu></a-layout-sider><a-layout><a-layout-header style="background: #fff; padding: 0"><menu-unfold-outlinedv-if="collapsed"class="trigger"@click="() => (collapsed = !collapsed)"/><menu-fold-outlinedv-elseclass="trigger"@click="() => (collapsed = !collapsed)"/></a-layout-header><a-layout-content:style="{margin: '24px 16px',padding: '24px',background: '#fff',minHeight: '280px',}"><router-view></router-view></a-layout-content></a-layout></a-layout></template><script>import {UserOutlined,VideoCameraOutlined,UploadOutlined,MenuUnfoldOutlined,MenuFoldOutlined,} from "@ant-design/icons-vue";export default {components: {UserOutlined,VideoCameraOutlined,UploadOutlined,MenuUnfoldOutlined,MenuFoldOutlined,},data() {return {selectedKeys: ["1"],collapsed: false,};},};</script><style scoped>// .... 具体代码见 Github</style >

Index.vue后台首页

<template><img class="img" src="/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2685630714,1375929910&fm=26&gp=0.jpg" alt="" srcset=""></template>

Admin.vue状态管理页面Vuex

<template><h2>通过 Vuex 实现状态管理</h2><h3>state from vuex： {{count }}</h3><br /><a-button type="primary" @click="add">add</a-button></template><script>import {computed, getCurrentInstance } from "vue";export default {setup() {const {ctx } = getCurrentInstance();const count = computed(() => ctx.$store.state.count);const add = () => {ctx.$mit("add");};return {count,add,};},};</script>

根据实际更新 main.ts

import {createApp } from 'vue'import App from './App.vue'import router from './router'import store from './store'import './styles/index.scss'import Antd from 'ant-design-vue';import 'ant-design-vue/dist/antd.css';const app = createApp(App)app.mount('#app')app.use(Antd)app.use(router)app.use(store)

此处定义路由时可能会报找不到模块“xxx”或其相应的类型声明。ts(2307)的错误，该解决方案请移至文章末尾查看。