创建项目
pnpm create vite
安装依赖
pnpm install
引入avue组件
import {createApp} from 'vue'; import Avue from '@smallwei/avue'; import '@smallwei/avue/lib/index.css'; const app =createApp({}); app.use(Avue);
配置别名
import path from 'path' resolve: { alias: { '~': path.resolve(__dirname, './'), '@': path.resolve(__dirname, 'src') }, },
配置运行端口 和代理
server: { port: 9527, host: '0.0.0.0', open: true, proxy: { // 代理配置 '/dev': '' }, },
安装elementplus
pnpm install element-plus
安装axios
pnpm install axios
安装路由
yarn add vue-router@4
配置路由
import { createRouter, createWebHashHistory } from 'vue-router' import { createRouter, createWebHashHistory } from 'vue-router' import Layout from '@/layout/index.vue' import N01 from './modules/N01' import N02 from './modules/N02' const router = createRouter({ history: createWebHashHistory(), routes: [ { path: '/', name: 'Dashboard', component: Layout, redirect: '/dashboard', meta: { title: '主页' }, children: [ { path: 'dashboard', name: 'Dashboard', component: () => import('@/views/dashboard/index.vue'), meta: { title: '主页', icon: 'folder', noCache: true, affix: true } } ] }, ...N01, ...N02, { path: '/login', name: 'Login', component: () => import('@/views/login/index.vue'), meta: { hidden: true, title: '登录' } }, { path: '/external-link', name: 'ExternalLink', component: Layout, meta: { title: '外链', icon: 'folder' }, children: [ { path: 'https://element-plus.org', name: 'ElementPlus', meta: { title: '外链' } } ] }, { path: '/:pathMatch(.*)', redirect: '/404', name: 'Redirect404', meta: { title: '404', hidden: true } } ] }) export default router
安装 vuex
yarn add vuex@next --save
安装sass
yarn add sass