前端框架搭建

墨蓝 2022-08-28 06:46 255阅读 0赞

## 项目搭建 ##

git clone https://github.com/PanJiaChen/vue-element-admin
    cd vue-element-admin
    cnpm i
    npm run dev

删除 `src/views` 下的源码，保留如下几个文件夹：

*  dashboard：首页
 *  error-page：异常页面
 *  login：登录
 *  redirect：重定向

对 `src/router/index` 进行相应修改

*  删除 `Router Modules` 下面的 4 条 import
 *  删除路由（只保留重定向到 404 即可）

删除 `src/router/modules` 文件夹

删除 `src/vendor` 文件夹

> 如果是线上项目，建议把 components 的内容也进行清理，以免影响访问速度，或直接使用 [vue-admin-template][] 构建项目，不过 vue-element-admin 实现了登录模块，包括 token 校验、网络请求等

## 项目配置 ##

通过 `src/settings.js` 进行全局配置

*  title：站点标题，进入某个页面后，格式为 `页面标题 - 站点标题`
    
    修改 `settings.js` 的 `title: 'xxx'`
    
    修改 `utils/get-page-title.js` 的 `const title = defaultSettings.title || 'xxx'`
 *  showSettings：是否显示右侧悬浮配置按钮
 *  tagView：是否显示页面标签功能条
 *  fixedHeader：是否将头部布局固定
 *  sidebarLogo：菜单栏中是否显示 LOGO
 *  errorLog：默认显示错误日志的环境

修改 `vue.config.js` （针对源码调试）

*  将 `cheap-source-map` 改为 `source-map`，如果希望提高构建速度可以改为 `eval`

config
      // https://webpack.js.org/configuration/devtool/#development
      .when(process.env.NODE_ENV === 'development',
        config => config.devtool('cheap-source-map')
      )

我一般会使用 `eval-source-map`，可以写在 `configureWebpack` 中

configureWebpack: { 
      devtool: process.env.NODE_ENV === 'development' ? 'eval-source-map' : false,
    },

对这里不太理解的可以看我的这篇文章 [Webpack（优化和问题）][Webpack] 看 `Webpack 优化配置` 中的 `source-map`

## 项目结构 ##

[vue-admin-template]: https://github.com/PanJiaChen/vue-admin-template
[Webpack]: https://blog.csdn.net/qq_38689395/article/details/117999184