一. 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
- nginx 命令
- 浏览器 输入 http:ip:port/stark/# 即可打开页面
二.stark大数据平台项目目录
三.vue的常用语法和es6常用语法
1.vue常用语法
2. es6 常用语法
四.vue 基本页面编写
- template : 类似于 .html 文件, 可以使用 vue 的常用指令
- script : 写在 service 文件夹下
- style : 可以使用 flex 布局 flex布局
五. 书写规范
- .vue 文件 首字母大写驼峰式命名
- 变量命名,小驼峰式
- 样式文件 最好 采用 引用式