通过vite vue3 vue-router elementplus mock构建helloword项目 并部署到二级目录

1. 构建helloword项目
2. 增加和展示路由
3. 使用elementplus,按需引入
4. 开发和生产环境中使用mock
5. 打包部署至二级目录

1. 构建helloword项目

打开命令行工具，进入自已的开发目录执行
npm init vite
依次输入项目名称 HelloWord
包名helloword
框架选择vue
Select a variant：vue-ts
也可以选择vue

进入helloword目录：
cd HelloWord
执行安装命令
npm install
执行开发令
npm run dev

浏览器中已经可以打开了。

2. 增加和展示路由

添加路由
npm install vue-router@4

// index.ts
import { createRouter, createWebHistory } from "vue-router";
const routes = [
    {
        path: '/',
        name: 'Home',
        component: () => import('@/views/Home.vue')
    }
]
const router = createRouter({
    history: createWebHistory(),
    routes
})
export default router;

<template>
    <div>
        <h1>HelloWord</h1>
    </div>
</template>
<script>
    export default {
        data(){
            return{}
        }
    }
</script>

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@/': new URL('./src/', import.meta.url).pathname
    }
  }
})

......
<template>
  <router-view/>
  ......
</template>
......

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import Router from './router/index.js'
const app = createApp(App)
app.use(Router).mount('#app')

此时查看浏览器已经可以看到HelloWord

3. 使用elementplus,按需引入

前端最流行的UI elementplus已支持vue3,安装
npm install element-plus --save

同时再安装两个插件自动按需加载组件自动按需加载 API
npm install unplugin-vue-components unplugin-auto-import -D

导入样式插件，安装它前需要添加sass和sass-loader依赖
npm install sass sass-loader unplugin-element-plus

import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import ElementPlus from 'unplugin-element-plus/vite'

export default defineConfig({
  plugins: [
      vue(),
      AutoImport({
        resolvers: [ElementPlusResolver()],
      }),
      Components({
        resolvers: [ElementPlusResolver()],
      }),
      ElementPlus({
        useSource: true
      })
  ]
  ......
})

<template>
    <div>
        <h1>{Msg}</h1>
        <el-button @click="buttonclick" type="primary">ElementUI-Plus</el-button>
    </div>
</template>
<script>
    import {ElMessage} from 'element-plus'
    export default {
        data(){
            return{
              Msg: 'HelloWord'
            }
        },
        methods: {
            buttonclick() {
                ElMessage({type: 'success',message:'HelloWord'})
            }
        }
    }
</script>

运行效果

安装图标插件
npm install @element-plus/icons-vue

import * as ElementPlusIconsVue from '@element-plus/icons-vue'
for (let iconName in ElementPlusIconsVue) {
    app.component(iconName, ElementPlusIconsVue[iconName])
}

<el-button @click="buttonclick" icon="Check" type="primary">ElementUI-Plus</el-button>

运行效果

4. 开发和生产环境中使用mock

在vite中使用mock模拟数据，需要借助vite-plugin-mock安装插件
npm i mockjs -D
npm i vite-plugin-mock -D

安装路径解析插件 告诉 Rollup 如何查找外部模块 解决resolve is not defined的问题
npm install @rollup/plugin-node-resolve --save-dev

安装axios插件
npm install axios --save

//  mockProdServer.ts
import { createProdMockServer } from 'vite-plugin-mock/es/createProdMockServer'

import testModule from './source/test'

export function setupProdMockServer() {
    createProdMockServer([...testModule])
}

import { MockMethod } from 'vite-plugin-mock'

export default [
    {
        url: '/api/getUserInfo', // 注意，这里只能是string格式
        method: 'get',
        response: () => {
            return 'hello world, I am mockdata'
        }
    },{
        type:'get',
        url:'/user/menu',
        response: () => {
            return {menusList:[{
                    id:'/sysManagent',
                    title:'系统管理',
                    subMenuList:[
                        {
                            id:'/userList',
                            title:'用户管理',
                            path:'/user/manage'
                        },
                        {
                            id:'/roleList',
                            title:'角色管理',
                            path:'/user/role'
                        },
                        {
                            id:'/permissionList',
                            title:'权限管理',
                            path:'/user/permission'
                        }
                    ]
                },{
                    id:'businessManagent',
                    title:'业务管理',
                    subMenuList:[
                        {
                            id:'/businessList',
                            title:'业务逻辑'
                        }
                    ]
                }],statusCode:200}
        }
    }
] as MockMethod[]

import resolve from '@rollup/plugin-node-resolve'
import { viteMockServe } from 'vite-plugin-mock'
export default defineConfig({
  plugins: [
    ...... 
    viteMockServe({
      localEnabled: true,  // 开发打包开关
      prodEnabled: true, // 生产打包开关
      supportTs: false, // 打开后，可以读取 ts 文件模块。 请注意，打开后将无法监视.js 文件。
      watchFiles: true, // 监视文件更改
      mockPath: "./src/mock/source",
      injectCode:
          ` import { setupProdMockServer } from './src/mock';
        setupProdMockServer(); `,
      injectFile: resolve("src/main.ts") // 在main.ts注册后需要在此处注入，否则Could not resolve './src/mock' from src/main.ts错误
    })
  ]
  ......
})

import { setupProdMockServer } from '@/mock';
if (process.env.NODE_ENV === 'production') {
  setupProdMockServer();
}

<template>
    <div>
    ......
       <div>{{str.msg}}</div>
    ......
    </div>
</template>

<script lang="ts" setup>
    import axios from 'axios';
    import { onMounted, reactive } from 'vue'
    let str = reactive({})
    onMounted(() => {
        axios.get("/api/getUserInfo").then(res => {
            console.log(res);
            str.msg = res.data;
            console.log(str)
        });
    })
</script>

运行效果

5. 打包部署至二级目录

  ......
  "scripts": {
    ......
    "build": "vite build --base=/hfnm/",
    ......
  },
  ......

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

执行打包命令
npm run build
如图

输出的文件夹是dist,把dist下的文件和目录全部放到你的网站根目录hfnm目录下
运行效果

源码下载