# vue-manage

**Repository Path**: arwin1/vue-manage

## Basic Information

- **Project Name**: vue-manage
- **Description**: vue单页后台管理系统
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 3
- **Created**: 2022-06-15
- **Last Updated**: 2022-06-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 自己手动构建一个 vite2 + vue3 + element-plus 后台管理系统

[vue3 中文网](https://v3.cn.vuejs.org/)

[vite 中文网](https://cn.vitejs.dev/)

[element-plus](https://element-plus.gitee.io/zh-CN/guide/installation.html)

## 1. 项目初始化

```bash
# 建立vue-manage项目
npm init vite@latest vue-manage --template vue
cd vue-manage && npm install
git init
git add .
git commit -m 初始化vue3项目
git remote add origin git@gitee.com:jxmlearner/vue-manage.git
git push -u origin master
```

- 加入 `prettier` 配置文件

根目录下创建 `.prettierrc`

```js
{
  "bracketSpacing": true,
  "printWidth": 160,
  "semi": false,
  "singleQuote": true,
  "trailingComma": "none"
}
```

## 2. 安装需要的基本依赖库,清理初始化生成的代码

`element-plus` 使用全量加载方式

```bash
npm i vue-router@4 vuex@4 element-plus -S
npm i sass -D
```

## 3. `sass`样式处理

在 `vite.config.js` 中配置加载 `mixin` 和样式变量

```js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  },
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "@/style/variables.scss";
        @import "@/style/mixins.scss";`
      }
    }
  }
})
```

## 4. 配置基本路由

- `router/index.js`

```js
import { createRouter, createWebHashHistory } from 'vue-router'

const routes = [
  { path: '/', redirect: '/home', component: () => import('../views/main.vue'), children: [{ path: 'home', component: () => import('../views/home.vue') }] },
  { path: '/login', component: () => import('../views/login.vue') }
]

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

router.beforeEach((to, from, next) => {
  next()
})

export default router
```

- `main.js`

```js
import { createApp } from 'vue'
import App from './App.vue'
import './style/index.scss'
import router from './router'

createApp(App).use(router).mount('#app')
```