初始化项目
在想要创建项目的文件夹打开终端(cmd或Powershell)
![](https://i-blog.csdnimg.cn/blog_migrate/f188eb928f4ee1cec86cfcc835ed627f.png)
yarn create vite 回车(或 npm create vite 回车)
注意:一开始用yarn的话就一直都要yarn,不然容易出问题,npm同理,要从一而终-.-,yarn和npm不要混着用
yarn create vite
输入项目名称 回车
![](https://i-blog.csdnimg.cn/blog_migrate/20238ae5983eb10e9b2eb87870fa18a1.png)
选择前端框架(以vue为例) 回车
![](https://i-blog.csdnimg.cn/blog_migrate/4ada423ee14384256dc7365c4838924d.png)
选择Typescript 回车
![](https://i-blog.csdnimg.cn/blog_migrate/5e0927bc9c4125b931c9f062bbfbc8e1.png)
项目创建成功
![](https://i-blog.csdnimg.cn/blog_migrate/98a579035821f9d335f093d71735892d.png)
安装依赖并运行项目
进入到项目文件(这里演示的时vscode打开项目文件的情况,你也可以通过终端命令进入),vscode打开项目后,按control+~打开终端
安装项目默认的依赖包:yarn(或者npm i)
yarn
运行项目:yarn run dev(或者npm run dev)
yarn run dev
![](https://i-blog.csdnimg.cn/blog_migrate/f1054bd6708bc5bb986abfcf4bf18adf.png)
初始配置
可以看到上图的地址,端口为5173,可以通过配置vite.config.ts来修改端口
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
server:{
host:'0.0.0.0',//解决vite use--host to expose
port:8080,
open:true
}
})
配置vite别名
在vue开发时,我们习惯用@代替src,但是vite默认是不识别vite的,所以需要配置
1-下载@types/node包 :yarn add @types/node --save-dev(或npm i @types/node --save-dev)
yarn add @types/node --save-dev
2-配置vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path' // 引入resolve
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
...
// 配置resolve
resolve:{
alias:[
{
find:'@',
replacement:resolve(__dirname,'src')
}
]
}
3-配置tsconfig.json (如果创建项目时选的时js,则没有这个文件,可以跳过此配置)
{
"compilerOptions": {
"target": "ESNext",
...
"noEmit": true,
// 配置以下代码
"baseUrl": ".",
"paths": {
"@/*": ["src/*"]
}
},
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
"references": [{ "path": "./tsconfig.node.json" }]
}
安装路由:yarn add vue-router(或 npm i vue-router)
1-创建相关文件
在src目录下创建view文件夹,在view文件夹里创建home文件夹,在home文件夹里创建home.vue文件
在src目录下新建 router 文件夹,在 router 文件夹里新建 index.ts 文件,并对index.ts做如下配置
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
const routes: Array<RouteRecordRaw> = [
{
path: '/',
name: 'home',
component:()=>import('@/view/home/Home.vue')
}
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default router
2-在main.ts中导入并挂载路由
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from "./router";
createApp(App).use(router).mount('#app')
3-清空App.vue的文件内容,并复制如下代码
<script setup lang="ts">
</script>
<template>
<router-view></router-view>
</template>
<style>
</style>
安装css预处理器less和less-loader(根据习惯选用less或scss或sass)
yarn add -D less less-loader
安装pinia(共享资源管理,根据项目可以选择pinia或者vuex)
yarn add pinia
根据以上步骤就完成了项目的基本搭建,大家可以再根据需要的UI框架(elementUI、ant-design、vant等),到官网查看指定的安装就配置方法
因为我没用过ant-design,所以打算学着用一下这个
ant-design的安装及配置步骤
根据ant官网介绍,实在vite.config.ts中引入并配置unplugin-vue-components
1-安装ant-design-vue组件库
yarn add --save ant-design-vue
2-在main.ts完成全局完整注册
import { createApp } from 'vue';
import Antd from 'ant-design-vue';
import App from './App';
import 'ant-design-vue/dist/antd.css';
const app = createApp(App);
app.use(Antd).mount('#app');
3-按需加载:安装unplugin-vue-components
yarn add unplugin-vue-components -D
4-按需加载:在vite.config.ts中引入并配置
// vite.config.ts
import Components from 'unplugin-vue-components/vite'
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'
export default defineConfig({
plugins: [
...
Components({
resolvers: [AntDesignVueResolver()]
})
]
})
根据官方介绍:如果使用的 Vite,你可以使用 unplugin-vue-components 来进行按需加载。但是此插件无法处理非组件模块,如 message,这种组件需要手动加载:
import { message } from 'ant-design-vue';
import 'ant-design-vue/es/message/style/css'; //vite只能用 ant-design-vue/es 而非 ant-design-vue/lib