作者 adminz 发布于 2018-04-07 修改于

vue2+vux2单页面应用入门实战:2、用vux2构建项目首页

上一节已经配置好了开发环境,这节利用vux2模板快速配置一个项目,并运行,创建新的首页。

vue的官方推荐有许多第三方组件,对vue的UI框架进行简单的比较后,我个人觉得,如果是PC端页面,选择iview-ui 。如果是移动端选择vux。VUX是基于WeUI和Vue(2.x)开发的移动端UI组件库,如果开发基于微信的页面,那更要选择vux了。

vue第三方UI组件库:https://github.com/vuejs/awesome-vue#frameworks
vux官网:https://doc.vux.li/zh-CN/

一、应用vux2模板

vux@2.x 推荐webpack+vue-loader方式的开发,如果要手动配置vux2就要对webpack非常熟悉,因此使用vux2模板来部署vux2,来了解大致的流程。vux2 模板默认为 webpack2 模板。

(详细说明见vux2官方教程快速开始部分)

vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目,目前还没有安装,首先安装 vue-cli 。再用vux2模板构建一个项目并运行。打开Windows命令行终端,运行代码如下:

npm install vue-cli -g // 如果没有安装过vue-cli
vue init airyland/vux2 abc // abc为自己的项目目录

下载vux2模板,出现如下交互:前几项直接回车,在是否安装vue-router 、是否启用ESLint 时回复Y并回车,设置单元测试时回复N并回车。结果如下:

? Project name abc // 回车 项目名称
? Project description A Vue.js project // 回车 项目描述
? Author // 回车 作者
? Vue build standalone // 回车 回车 打包方式
? Install vue-router? Yes // Y 安装vue-router组件
? Use ESLint to lint your code? Yes // Y 使用ESLint代码规范
? Pick an ESLint preset Standard  // 回车 回车
? Setup unit tests No // N 不设置单元测试
? Setup e2e tests with Nightwatch? No // N

 

Thumbnail
以vux2模块构建项目

 

配置完成后,当前目录下就出现了项目目录abc,进入目录,安装依赖,会出现node_modules目录,最后启动项目。命令如下:

cd abc // 进入项目目录
npm install // 安装依赖
npm run dev // 启动项目

此时执行配置在package.json中的脚本,Node.js提供服务,如果没有错误的话,默认运行地址是 http://localhost:8080,对项目中页面组件源文件的修改会实现编译并更新页面。在浏览器中打开此页面如下图,如果不关闭窗口或终止本命令,以后对本项目的修改会自动刷新浏览器页面,实现反映给用户。如果代码中的错误,也会在命令行终端中给出错误提示。

 

Thumbnail
出现此默认页面说明项目正常运行了

 

二、项目基本结构

启动 VSCode 编辑器,打开刚才新建的项目目录 abc,如下图所示。

目录中的 index.html 文件是页面入口文件,源代码都在 src 目录中,components 目录里的就是vue组件。

打开 main.js 文件,看到第27行定义了vue实例渲染的是App组件,最后一行定义了将渲染之后的内容挂载到 index.html 文件中的第9行 id 为 app-box 的div 上。

main.js 第12、13行定义了根路径是组件 Home 。此时,浏览器页面显示的内容就是组件 HelloFromVux 中定义的内容。修改第7行 HelloFromVux 为 HelloWorld,查看浏览器,看到页面已经变为了组件 HelloWorld 中定义的内容。

 

Thumbnail
vux项目目录结构

 

三、新建首页

新建Home组件,按需要将vux2的各组件示例,引入到 Home.vue中,像搭积木一样建立起首页。github由于网络速度太慢,将本项目代码托管在 码云gitee 中,方便查看,本项目地址:https://gitee.com/uxpi/vu2_vux2_study

1、vux2某些组件的示例代码中引用了图片,需要从github先下载vux2的源码,把其 src\assets 目录中的所有示例图片复制到本项目的目录 src\assets 中,在示例代码中要用到这些图片。

注意:在vue组件中引用的图片等静态资源如果路径不正确或者不存在时,会出现错误提示。

2、新建文件 Home.vue,将以下要新建的组件引入到 Home.vue 文件中,最后代码如下。

查看代码链接:
https://gitee.com/uxpi/vu2_vux2_study/blob/385a12d69ab5219c4fb9f9edd01ca2cfd9edab45/src/components/Home.vue

3、新建文件 Footer.vue ,查看vux2 官方文档 [组件] [ Tabbar ] [ demo源码 ] ,将全部源码复制到 Footer.vue 文件中,去掉 Group, Cell组件相关代码,另外由于在测试时发现 footer 不能固定在底部,增加了一行 css 进行修正,修改后 Footer.vue 文件代码如下。

查看代码链接:
https://gitee.com/uxpi/vu2_vux2_study/blob/75af0841866fc7c47f031196f57b61c44039737b/src/components/Footer.vue

4、新建文件 FrontSlide.vue ,查看vux2 官方文档 [组件] [ Swiper ] [ demo源码 ] ,主要是 swiper 标签、baseList 数据定义、return 返回值,修改后FrontSlide.vue文件代码如下:

查看代码链接:
https://gitee.com/uxpi/vu2_vux2_study/blob/385a12d69ab5219c4fb9f9edd01ca2cfd9edab45/src/components/FrontSlide.vue

5、新建文件 FrontList.vue ,查看vux2 官方文档 [组件] [ Panel ] [ demo源码 ] ,去掉 i18n (多语言)模块的相关代码包括所有的t()函数,去掉 Group, Radio组件的相关代码,修改后FrontList.vue 文件代码如下:

查看代码链接:
https://gitee.com/uxpi/vu2_vux2_study/blob/75af0841866fc7c47f031196f57b61c44039737b/src/components/FrontList.vue

6、新建文件 FrontNav.vue ,查看vux2 官方文档 [组件] [ Grid ] [ demo源码 ] ,去掉 i18n (多语言)模块的相关代码,修改后 FrontNav.vue 文件代码如下:

查看代码链接:
https://gitee.com/uxpi/vu2_vux2_study/blob/75af0841866fc7c47f031196f57b61c44039737b/src/components/FrontNav.vue

7、修改 main.js 文件第7行 HelloWorld 为 Home,也就是按默认路由设置,组件 Home 成为首页。

查看代码链接:
https://gitee.com/uxpi/vu2_vux2_study/blob/385a12d69ab5219c4fb9f9edd01ca2cfd9edab45/src/main.js

8、如果前面没有运行,可以在VScode终端(或windows命令行终端)本项目目录运行命令: npm run dev

 

Thumbnail
VScode在终端运行vux项目

 

9、用浏览器打开http://localhost:8080,效果如下:

Thumbnail
在浏览器中打开效果

 

Thumbnail
在浏览器中打开模拟手机操作演示

 

小结:本小节用vux2组件库及其示例代码,像搭积木一样拼凑了一个首页。下一节将使用豆瓣公开的api,将首页内容列表变成动态内容,并对路由进行改进。(请关注公众号:张龙于飞)

---- 未完待续 ----

 

张龙于飞

为技术披上艺术的嫁衣,融在教育的生命中。 

本人关注教育,关注计算机技术,关注web程序设计,专注于教育信息化,爱好吉他、音乐、电影,偶尔表露出一些不合时宜的理想主义。

Thumbnail

如果我喜欢的刚好你也喜欢的话,请关注公众号:张龙于飞