基于 Vue+Mint-ui 的 Mobile-h5 的项目说明

首先,要开发vue相关的项目,要会搭建vue的相关环境,要搭建的目录如下:

1.安装node.js和npm

2. webpack

3. vue-cli脚手架构建工具 

具体这里不作详解,站在前人的肩膀上学习即可
安装node.js和npm
webpack和vue-cli脚手架构建工具 

二. vue-cli脚手架创建的代码详解

利用脚手架(vue-cli)构建一个vue项目,接下来学习分析下代码。

具体这里不作详解,站在前人的肩膀上学习即可
教程参考: https://www.jianshu.com/p/2b661d01eaf8

三. 本项目 vue+mint-ui 的h5项目说明及详解 1. 运行项目

因为项目配置和需要的模块都已经配好了的,所以运行只需要:

1.在svn上把 mobile-h5 项目代码下载下来。
2.直接进入mobile-h5目录中,即是和 package.json 的文件同级目录,或者直接用vsCode编辑器打开 mobile-h5 项目,在命令终端那里。

安装依赖,执行命令:

npm install

或者简写:

npm i

没有报错时,安装结果如图:

基于 Vue+Mint-ui 的 Mobile-h5 的项目说明


安装报错时,会出现 error 的,或者直接中止了,window系统一般是因为npm 的环境没有配置好。

安装好模块后,再执行如下命令来运行

npm run dev

没有报错时,结果会如下图:

npm run dev.png

直接打开本地链接 :8080 就可访问了,如下图:

本地运行效果

2. 项目目录说明

都写在 README.md 里面了,具体的也可查看 README.md 的内容。

#目录结构 ├── mobile-h5 # 总项目目录 ├── build # webpack 配置文件目录 ├── config # webpack 配置文件引用的目录 ├── kpi # webpack 打包正式生成的目录 ├── src # 主开发文件的目录 │ ├── assets # 图片资源 │ ├── components # 组件模块 | │ ├── app # 组件模块 | | | ├── add # 本项目指标新增的组件的模块 | | | ├── common # 组件通用的模块 | | | ├── index # 本项目首页组件通用的模块 | | | ├── index # 本项目套餐组件通用的模块 │ ├── filters # 过滤器模块 │ ├── filters # 过滤器模块 │ ├── less # less 的公共样式模块 │ ├── libs # 封装的公共 js 文件模块 │ ├── mixins # mixins 文件模块 │ ├── router # 路由模块 │ ├── store # vuex 的 store 模块 │ ├── views # 主开发的 vue 模块 │ ├── ├── static # webpack 打包依赖的目录 ├── index.html # 主页面入口,也是生成打包生产环境代码要依赖的文件 3. 修改webpack的配置,使其符合本项目的要示

a. 因为本地开发时,请求接口会跨域的问题,所以要用代理。

具体说明 参考 https://my.oschina.net/lixiaoyan/blog/1797724

提示:要在手机上开发测试,npm run dev 运行的localhost是不行的,要配置nginx来做代理服务才行。

image.png

b.把打包的目录修改成生产环境需要的目录 kpi。

image

image

c. 添加别名,在其他地方引入文件时,可以省略部分路径的书写

image

4. 开发目录规范说明

a. 开发要根据 业务模块 来划分,进而进行 文件模块 的划分。

比如:

组件components 里面 

components/common是全局公共的组件,

components/app 是mobile-h5的开发组件

components/app/add mobile-h5的指标新增的组件

components/app/index 是mobile-h5的首页的组件

components/app/setMeal 是mobile-h5的套餐的组件

mixins 里面

mixins/add 是mobile-h5的指标新增的 mixins

mixins/common 是mobile-h5的公共的 mixins

modules 里面

modules/add 是mobile-h5的指标新增的状态数据保存

modules/setMeal 是mobile-h5的套餐的状态数据保存

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wpzfxs.html