⼿把⼿Vue3项⽬（⼀）——安装配置
Vite+Vue3+TypeScript+Ant-de。。。
项⽬中涉及到的配置：
Vite
Vue 3
VueRouter 4
Vuex 4
Ant- design-vue
TypeScript
less
tsx / jsx ⽀持
Eslint
Prettier
Stylelint
Git 代码检测 pre-commit / commit-message
后续⽂章会继续更新，mock、json-server模拟前端数据，实现前后端分离开发，axios安装与配置，后台管理系统登录逻辑实现，VueRouter动态路由配置和权限管理，通⽤组件的封装等等。
vite搭建vue项⽬
具体步骤请参考，前⾯的⽂章——使⽤vite从开始搭建vue项⽬
安装配置 ant- design-vue 2.2.6
安装
// 安装ant-design-vue
pnpm add ant-design-vue@next
// 安装ant-design-vue/icon
pnpm add @ant-design/icons-vue
// vite 按需导⼊插件
// **废弃：pnpm add vite-plugin-components // 安装不过⼀周左右时间，插件就重命名了，所以按照新插件重新配置**
// 参考这⾥：<github/antfu/unplugin-vue-components>
pnpm add unplugin-vue-components -D
配置
// fig.js
// import ViteComponents, { AntDesignVueResolver } from 'vite-plugin-components';
**import Components from 'unplugin-vue-components/vite'
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'**
export default {
plugins: [
/* ... */
// 项⽬插件重命名之后废弃，改为使⽤ unplugin-vue-components，之前的也是可以使⽤的
ViteComponents({
customComponentResolvers: [AntDesignVueResolver()],
}),
// 新的使⽤⽅法
// <github/antfu/unplugin-vue-components>
// ant-design-vue 按需导⼊
**Components({
resolvers: [
AntDesignVueResolver(),
// ElementPlusResolver(),
// VantResolver(),
],
// globalComponentsDeclaration
dts: true,
// customLoaderMatcher
include: [/\\.vue$/, /\\.vue\\?vue/, /\\.md$/],
})**
],
};
验证
<a-button type="primary">
<template #icon>
<SearchOutlined/>
</template>
Primary Button
</a-button>
<br>
<StepForwardOutlined/>
安装配置 less
安装
pnpm add less
配置
import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
// <vitejs.dev/config/>
export default defineConfig({
// ⽀持 less 样式
css: {
preprocessorOptions: {
less: {
javascriptEnabled: true,
},
},
}
})
验证
<div class="box">
<div class="h1">h1</div>
<div class="h2">h2</div>
</div>
// 样式⽂件App.less，或者写在⽂件内
.
box {
width: 100%;
hight: 100px;
border: 1px solid #42b983;
.h1 {
color: red;
}
.h2 {
color: blue;
}
}
安装配置 VueRouter 4
安装
pnpm add vue-router@4
配置
// router/index.ts ----------------创建路由------------------
import {createRouter, createWebHistory} from "vue-router"; import {routes} from "@/router/config";
const router = createRouter({
history: createWebHistory(),
routes
})
router.beforeEach((to, from) => {
/
/ to.path = '/login'
return true
})
export default router
// router/config.ts ----------------路由路径配置⽂件------------
export const routes = [
// 路由重定向
{
path: '/',
redirect: '/home',
},
{
path: '/home',
// component: Home
component: () => import("@modules/home/Index.vue")
},
{
path: '/about',
component: () => import("@modules/about/Index.vue")
}
]
// main.ts -----------------使⽤router--------------------------
import {createApp} from 'vue'
import router from "@/router";
import App from './App.vue'
import "ant-design-vue/dist/antd.less"
// import '@ant-design/icons-vue'
const app = createApp(App)
app.use(router)
// createApp(App).use(router).mount('#app')
// App.vue  ----------------在页⾯中渲染路由加载的页⾯------------------------
<script setup lang="ts">
/
/ This starter template is using Vue 3 <script setup> SFCs
// Check out </api/sfc-script-setup.html#sfc-script-setup> </script>
<template>
<router-view></router-view>
</template>
<style>
</style>
验证
<!-- 1.通过访问根⽬录确定路由重定向是否成功 -->
<template>
<h1>home</h1>
<router-link to="/about">about</router-link>
</template>
<script lang="ts">
import {defineComponent} from "vue";
export default defineComponent({
name: "home",
components: {},
setup() {
return {}
}
})
</script>
<style lang="less" scoped>
</style>
<!-- 1. 通过访问根⽬录确定路由重定向是否成功 -->
<!-- 2. 通过地址栏输⼊其他地址如 /about ，观察是否跳转页⾯成功 -->
<!-- 3. 通过router-link确定页⾯router可以使⽤-->
<template>
<h1>home</h1>
<router-link to="/about">about</router-link>
</template>
<script lang="ts">
import {defineComponent} from "vue";
export default defineComponent({
name: "home",
components: {},
setup() {
return {}
}
})
</script>
<style lang="less" scoped>
</style>
<template>
<h1>home</h1>
<router-link to="/about">about</router-link>
ant安装包</template>
<script lang="ts">
import {defineComponent} from "vue";
export default defineComponent({
name: "home",
components: {},
setup() {
return {}
}
})
</script>
<style lang="less" scoped>
</style>
安装配置alias
安装
// 导⼊ path 的时候提⽰报错，需要安装 @types/node 类型检测
pnpm add @types/node
配置
// fig.ts
import {defineConfig} from 'vite'
import path from 'path'
export default defineConfig({
//src⽬录的配置
resolve: {
alias: {
// src ⽬录路径
'@': solve(__dirname, 'src'),
// 公共组件导⼊路径
'@modules': solve(__dirname, 'src/modules/components')
}
},
// 下⾯的配置⽅式废弃了，刚配置好的时候还可以，⼀周之后发现不会热更新了，让后在终端看到alias这个配置废弃了  // 让更换成 resolve.alias 的⽅式，更换之后发现确实可以了
alias: {
'@': solve(__dirname, 'src'),
// 还可以额外添加⼀些其他的
"components": solve(__dirname, "src/components"),
"styles": solve(__dirname, "src/styles"),
"views": solve(__dirname, "src/views"),
"utils": solve(__dirname, "src/utils"),
}
})
// ts.config.json
{
"compilerOptions": {
// 如果是ts项⽬，仅仅添加上⾯还不够，因为编辑器⽆法⾃动识别别名路径
"baseUrl": ".",
"paths": {
"@/*": [
"src/*"
]
}
},
"include": [
"src/**/*.ts",
"src/**/*.d.ts",
"src/**/*.tsx",
"src/**/*.vue"
]
}
验证
// 待会⼉在导⼊路由导⼊组件的时候使⽤，或者在App中引⼊⼀个login的测试组件
// App.vue
<script setup lang="ts">
/
/ This starter template is using Vue 3 <script setup> SFCs
// Check out </api/sfc-script-setup.html#sfc-script-setup>
// 使⽤ alias @ 引⼊
import Login from '@/views/login/Login.vue'
// 使⽤相对路径引⼊确认⽆误
// import Login from './views/login/Login.vue'
// 测试导⼊ ts ⽂件是否报错，结论：可以正常使⽤，但编辑器有 ts 红⾊下划线错误提⽰import router from "@/router";
console.log(router)
</script>
<template>
<Login></Login>
</template>
<style>
</style>
安装配置⽀持页⾯ tsx / jsx
安装
pnpm add @vitejs/plugin-vue-jsx
配置
// 在 fig.ts 配置
import vueJsx from '@vitejs/plugin-vue-jsx'
export default defineConfig({
plugins: [ vueJsx()]
})
// tsconfig.json ⽂件中
{
"include": [
"src/**/*.ts",
"src/**/*.js",
"src/**/*.d.ts",
"src/**/*.tsx",
"src/**/*.jsx",
"src/**/*.vue"
],
"compilerOptions": {
// 在.tsx⽂件⾥⽀持JSX
"jsx": "preserve",
}
}
验证
// .tsx ⽂件
import { defineComponent } from 'vue'
export default defineComponent({
setup() {
return () => <div>Hello,World</div>
}
})

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。