1. 基础
1.卸载老版本vue-cli:
yarn global remove vue-cli
2.卸载老版本vue:
yarn global remove vue
3.安装vue最新版本:
yarn global add vue@next
4.安装vue-cli最新版本:
yarn global add @vue/cli@next
2.安装
-
使用vite安装vue
npm init vite@latest <project-name> -- --template vue
yarn create vite my-vue-app --template vue-ts
-
安装 sass
yarn add -D sass
-
安装eslint
npx eslint --init
-
安装 vue-router
yarn add vue-router@4
-
安装 pinia
yarn add pinia
-
安装axios
yarn add axios
-
安装 antDesign
yarn add ant-design-vue
- main 入口文件中 添加样式
- antD 使用 vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite';
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
Components({
resolvers: [AntDesignVueResolver()],
}),]
})
```
8. 安装 unplugin-vue-components
- 安装该插件才可以按需加载 `yarn add unplugin-vue-components -D`
9. 配置alis
```javascript
export default defineConfig({
resolve: {
alias: {
"@": path.resolve(__dirname, "src")
},
},
plugins: [
vue(),
Components({
resolvers: [AntDesignVueResolver()],
}),]
})
- vue-router 简单配置
import * as VueRouter from "vue-router"
const Home = { template: '<div>Home</div>' }
const About = { template: '<div>About</div>' }
const routes = [
{ path: '/', redirect: '/demo' },
{ path: '/about', component: About },
{ path: '/login', component: import('@/pages/login/index.vue') },
// 子路由 前面不能加/
{
path: '/demo',
component: import('@/pages/demo/index.vue'),
redirect: '/demo/pinia',
children: [
{ path: 'pinia', component: import('@/pages/demo/pinia.vue') },
]}
]
// 3. 创建路由实例并传递 `routes` 配置
// 你可以在这里输入更多的配置,但我们在这里
// 暂时保持简单
export default VueRouter.createRouter({
// 4. 内部提供了 history 模式的实现。为了简单起见,我们在这里使用 hash 模式。
history: VueRouter.createWebHashHistory(),
routes// `routes: routes` 的缩写
})
- svg 配置 (有点恼火,但是成功了)
- 插件安装
yarn add -D vite-plugin-svg-icons
- 创建组件
svgIcon
文件
<template>
<svg aria-hidden="true" class="svg-icon">
<use :xlink:href="symbolId" :fill="color" />
</svg>
</template>
<script setup lang="ts">
import { computed } from "vue";
const props = defineProps({
prefix: { type: String, default: "icon" },
iconClass: { type: String, required: true },
color: { type: String, default: "" },
});
const symbolId = computed(() => `#${props.prefix}-${props.iconClass}`);
</script>
<style scoped>
.svg-icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
overflow: hidden;
fill: currentColor;
}
</style>
- 全局引入 main.ts
// 注册图标
import 'virtual:svg-icons-register';
import SvgIcon from '@/components/svgIcon/index.vue' // 引入组件,位置自己定
- vite 配置
import {createSvgIconsPlugin} from 'vite-plugin-svg-icons'
plugins: [
createSvgIconsPlugin({
// Specify the icon folder to be cached,这里配置svg存放的位置
iconDirs: [path.resolve(process.cwd(), 'src/assets/icons/svg')],
// Specify symbolId format
symbolId: 'icon-[dir]-[name]'
})]
- 引用 – 因为全局注册了这个组件,所以可以直接用
<SvgIcon name="github" className="back"></SvgIcon>