若依前后端分离框架前端学习

「爱情、让人受尽委屈。」 2023-07-21 05:28 183阅读 0赞

### [\#][Link 1]前端运行 ###

# 安装依赖
    npm install
    
    # 强烈建议不要用直接使用 cnpm 安装，会有各种诡异的 bug，可以通过重新指定 registry 来解决 npm 安装速度慢的问题。
    npm install --registry=https://registry.npm.taobao.org
    
    # 本地开发 启动项目
    npm run dev

打开浏览器，输入：http://localhost:80 （默认账户 `admin/admin123`）  
若能正确展示登录页面，并能成功登录，菜单及页面展示正常，则表明环境搭建成功

前端部署

当项目开发完毕，只需要运行一行命令就可以打包你的应用

# 打包正式环境
    npm run build:prod
    
    # 打包预发布环境
    npm run build:stage

构建打包成功之后，会在根目录生成 `dist` 文件夹，里面就是构建打包好的文件，通常是 `***.js` 、`***.css`、`index.html` 等静态文件。

### 新增 view ###

在 [@/views][views] 文件下 创建对应的文件夹，一般性一个路由对应一个文件， 该模块下的功能就建议在本文件夹下创建一个新文件夹，各个功能模块维护自己的`utils`或`components`组件。

### 新增 api ###

在 [@/api][api] 文件夹下创建本模块对应的 api 服务。

### [\#][Link 2]新增组件 ###

在全局的 `@/components` 写一些全局的组件，如富文本，各种搜索组件，封装的分页组件等等能被公用的组件。 每个页面或者模块特定的业务组件则会写在当前 [@/views][views] 下面。  
如：`@/views/system/user/components/xxx.vue`。这样拆分大大减轻了维护成本。

### [\#][Link 3]新增样式 ###

页面的样式和组件是一个道理，全局的 [@/style][style] 放置一下全局公用的样式，每一个页面的样式就写在当前 `views`下面，请记住加上`scoped` 就只会作用在当前组件内了，避免造成全局的样式污染。

![20200402154016379.png][]

[Link 1]: http://doc.ruoyi.vip/ruoyi-vue/document/hjbs.html#%E5%89%8D%E7%AB%AF%E8%BF%90%E8%A1%8C
[views]: https://gitee.com/y_project/RuoYi-Vue/tree/master/ruoyi-ui/src/views
[api]: https://gitee.com/y_project/RuoYi-Vue/tree/master/ruoyi-ui/src/api
[Link 2]: http://doc.ruoyi.vip/ruoyi-vue/document/qdsc.html#%E6%96%B0%E5%A2%9E%E7%BB%84%E4%BB%B6
[Link 3]: http://doc.ruoyi.vip/ruoyi-vue/document/qdsc.html#%E6%96%B0%E5%A2%9E%E6%A0%B7%E5%BC%8F
[style]: https://gitee.com/y_project/RuoYi-Vue/tree/master/ruoyi-ui/src/assets/styles
[20200402154016379.png]: /images/20230528/34697db311e0460f9a706adfc7ef5e05.png