若依前后端分离框架 前端学习
#前端运行# 安装依赖npm install# 强烈建议不要用直接使用 cnpm 安装,会有各种诡异的 bug,可以通过重新指定 registry 来解决 npm 安装速度慢的问题。npm install --registry=https://registry.npm.taobao.org# 本地开发 启动项目npm run dev打开浏览器,输入:http://local...
#前端运行
# 安装依赖
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
就只会作用在当前组件内了,避免造成全局的样式污染。
更多推荐
所有评论(0)