Vue3+Vite+AntDesignVue初始化项目

通过vite官方的命令新建一个vue3的项目，通过这个命令新建的项目结构非常简介，当然什么也没有，需要手动安装路由等。

npm create vite@latest

1、配置热更新和路径别名

安装@types/node，配置地址时会用到
npm install @types/node --save-dev

import * as path from "path";
export default defineConfig({
    server: {
        // 热更新
        hmr: true，
        //  自动打开浏览器
        open: true
    }

// 路径别名
    resolve: {
		alias: {
			'@': path.resolve(__dirname, 'src'),
			'comp': path.resolve(__dirname, 'src/components'),
			'styles': path.resolve(__dirname, 'src/assets/styles')
		}
	}
})

路径别名在vite.config.ts文件里配置后，还需要在tsconfig.json文件里配置一下paths，因为TS无法自动识别别名路径。

"paths": {
	"@/*": ["src/*"],
	"comp/*": ["comp/*"],
	"styles/*": ["styles/*"]
}

 2、安装路由

npm i vue-router@next -S

 在src目录下新建router目录，然后添加index.ts放路由配置，添加routes.ts来放路由相关路径，最后在main.js里引入。

// index.ts文件
import { createRouter, createWebHistory } from "vue-router";
import routes from "./routes";

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router;


// routes.ts文件
const routes = [
  {
    path: '/',
    name: 'login',
    meta: {
      title: '登录页'
    },
    component: () => import('@/pages/login/login.vue')
  },
  {
    path: '/home',
    name: 'home',
    meta: {
      title: '首页'
    },
    component: () => import('@/pages/home/home.vue')
  }
]

export default routes;


// main.ts文件
import router from "@/router";

const app = createApp(App);
app.use(router);

app.mount('#app');

3、安装状态管理器pinia

        vue3+vite的项目，官方推荐的状态管理器改为Pinia了，取消了Mutations操作，只有 state getters actions 简化状态库管理，而且对typescript和vue3的支持度更高。

npm install pinia

在main.ts里边引入pinia，并且实例化：

import { createApp } from 'vue'
import App from './App.vue'
import { createPinia } from 'pinia'
​
const pinia = createPinia()
const app = createApp(App)
app.use(pinia)
app.mount('#app')

4、安装scss

npm i sass -D

 在src >> assets目录下新建styles目录，用来存放样式，然后在main.ts文件里引入了全局样式。

5、安装UI库

npm install ant-design-vue --save

npm i unplugin-vue-components -D

 因为以前的项目里使用的都是element UI，所以在这个项目里决定使用AntDesignVue，尝试一些新的东西。

在这个项目里准备按需引入，不再像以前直接在main.ts里注册全局组件，毕竟后台管理系统最常用的UI组件只有那几个，这里先引入Button、message、Form组件。

// main.ts
import { Button, message, Form } from "ant-design-vue";

app.use(Button);
app.config.globalProperties.$message = message;
app.use(Form);


// vite.config.ts
import Components from 'unplugin-vue-components/vite';
import { AntDesignVueResolver } from "unplugin-vue-components/resolvers";

plugins: [
    vue(),
    Components({
      resolvers: [AntDesignVueResolver()]
    })
]

搭建静态页面的步骤就到此为止了，先写了一个登录页，后面再慢慢更新吧。