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

#前端运行

# 安装依赖
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 文件下 创建对应的文件夹，一般性一个路由对应一个文件， 该模块下的功能就建议在本文件夹下创建一个新文件夹，各个功能模块维护自己的

utils

或

components

组件。

新增 api

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

#新增组件

在全局的 

@/components

 写一些全局的组件，如富文本，各种搜索组件，封装的分页组件等等能被公用的组件。 每个页面或者模块特定的业务组件则会写在当前 @/views 下面。

如：

@/views/system/user/components/xxx.vue

。这样拆分大大减轻了维护成本。

#新增样式

页面的样式和组件是一个道理，全局的 @/style 放置一下全局公用的样式，每一个页面的样式就写在当前 

views

下面，请记住加上

scoped

 就只会作用在当前组件内了，避免造成全局的样式污染。