#前端运行

# 安装依赖
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 、***.cssindex.html 等静态文件。

新增 view

在 @/views 文件下 创建对应的文件夹,一般性一个路由对应一个文件, 该模块下的功能就建议在本文件夹下创建一个新文件夹,各个功能模块维护自己的utilscomponents组件。

新增 api

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

#新增组件

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

#新增样式

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

   

 

Logo

快速构建 Web 应用程序

更多推荐