基于vue的stark大数据平台前端开发

一. vue项目构建

1.项目环境搭建

1.安装 node.js

• 下载 node.js 包, 根据指示安装即可。node.js官网
• 安装成功检测 : cmd 输入 node -v, npm -v。 能够显示版本，表示安装成功。

2.安装 webpack

• cmd 中 输入 npm install webapck -g
• 安装检测成功 : cmd 输入 webpack -v。 能够正常显示版本,表示安装成功

3.安装 vue-cli

• cmd 中 输入 npm install vue-cli -g
• 安装检测成功 : cmd 输入 vue，出现其他信息表示安装成功。

4. 安装 nginx

• windows系统： 直接使用平台压缩包
• Linus系统 Linus安装nginx教程
• Mac系统 Mac安装教程

2. 项目启动

• 从 git 下载项目
• 当前文件目录下，cmd 执行 npm install
• 当前文件目录下，cmd 执行 npm run dev
• 配置 nginx 配置文件
  
  项目文件配置 修改v1的ip和port， 对应 后台服务的 ip和port
  
  平台组件包配置 修改 $librariesRootpath的 本地文件路径
  
• 启动 nginx
  • nginx 命令
    • 启动 : start nginx
    • 重启 : nginx -s reload
    • 停止 : nginx -s stop
  • 经常出现的错误
    • 页面404 : 页面路径配置不正确
    • 服务404 ： 服务的ip和端口是否正确
    • 服务403 : 跨域问题。检测项目 F1U1_stark_bundle\static\json\config.jsonservice 对应的 ip 和 port 对应 nginx 的 server_name 和 listen
• 浏览器 输入 http:ip:port/stark/# 即可打开页面

二.stark大数据平台项目目录

三.vue的常用语法和es6常用语法

1.vue常用语法

• 路由 vue路由
  • 路由注册
  • 路由跳转
  • 获取当前的路由信息
  • 路由跳转传递参数
• 组件组件概念
  • 组件注册
• 常用指令
  • v-bind
  • v-if
  • v-for
  • v-on
  • v-show
  • v-model
• 生命周期和钩子函数
  • 钩子函数
  • 生命周期
  • 使用 f1UI 框架中， 与f1相关的前端组件渲染,在 mounted 函数中渲染

2. es6 常用语法

• 定义变量 let 和 const
• class语法
• 箭头函数
• 数组的新增API
• 对象的新增API
• 字符串的新增API

四.vue 基本页面编写

• template : 类似于 .html 文件， 可以使用 vue 的常用指令
• script ： 写在 service 文件夹下
• style ： 可以使用 flex 布局 flex布局

五. 书写规范

• .vue 文件 首字母大写驼峰式命名
• 变量命名，小驼峰式
• 样式文件 最好 采用 引用式