内容简介:vue2写单页面项目总结记录
一直想做个有数据内容的项目,刚好vue社区提供了API,在此感谢。
这是一个基于 vue+vue-cli+vue-router+axios+webpack
开发的vue社区 SPA
;UI用 Muse-UI
;css用 scss
, flex
布局, rem
做移动端适配,最终效果web端移动端都适配。
如果你和我一样用vue还挺生疏的,那好好做完这个项目,会学到很多东西,能有挺大的进步,一起(๑•̀ㅂ•́)و✧加油。
如果对您有帮助,请给一个 star
鼓励一下萌新,感谢 ^ ^
准备开发环境
- $ npm install -g vue-cli
- $ vue init webpack vue-home
? Project name vue-home ? Project description vue-home ? Author afei ? Vue build standalone ? Install vue-router? Yes ? Use ESLint to lint your code? No ? Setup unit tests with Karma + Mocha? No ? Setup e2e tests with Nightwatch? No
- $ cd vue-home
- $ npm install
- $ npm run dev
等写完项目后 - $ npm run build
-
注意:npm run dev 之后 默认浏览器打开的是 http://localhost:8080 请换成 http://localhost:8080/vue-home/dist
如果你电脑的8080端口被占用,请congfig/index.js中找到
port: 8080
修改成8081或者其他可用的端口
开始动手(我会根据每个文件来讲解)
项目结构
├── build │ ├── build.js │ ├── check-versions.js │ ├── dev-client.js │ ├── dev-server.js │ ├── utils.js │ ├── vue-loader.conf.js │ ├── webpack.base.conf.js │ ├── webpack.dev.conf.js │ └── webpack.prod.conf.js ├── config │ ├── dev.env.js │ ├── index.js │ └── prod.env.js ├── dist //等写完项目后 $ npm run build 的打包文件 │ ├── index.html │ └── static ├── index.html //首页入口文件 ├── node_modules ├── package.json ├── src │ ├── App.vue //项目入口文件 │ ├── assets │ │ ├── 1495982696.png //手机扫描二维码 │ │ ├── logo.png //vue logo │ │ └── sass //sass通用样式 │ ├── components //组件 │ │ ├── FooterNav.vue //底部nav组件 │ │ ├── HeaderBar.vue //顶部横条 │ │ ├── HeaderTabs.vue //顶部tabs组件&主页面内容拉取 │ │ └── Hello.vue │ ├── main.js //核心文件 在这里引入了Muse UI 时间过滤器 │ ├── pages //页面 │ │ ├── content.vue //帖子内容页面 │ │ ├── index.vue //首页 │ │ ├── login.vue //登录页面 │ │ ├── message.vue //信息通知页面 │ │ ├── more.vue │ │ ├── my.vue //个人信息页面 │ │ ├── people.vue //社区用户信息页面 │ │ └── publish.vue //发布帖子页面(此页面还没写完) │ ├── router //路由与组件配置 │ │ └── index.js │ └── util //时间过滤器,转换时间格式 │ └── filter.js └── static
vue-home/config/index.js
assetsPublicPath: '/vue-home/dist'
这个公共路径原本为assetsPublicPath: ‘/‘,这样在本地服务器是可以跑,可是打包上传到github后会发现打开的页面是空白的,报错如下图。
原因是路径错了,vue-home是项目文件夹名称,dist是npm run build之后出现的文件夹,github上线就是读取dist文件夹而生成的网页(成功展示的demo地址长这样: http://www.hxvin.me/vue-home/dist/)
解决上线路径问题不知道还有没有其他更方便的解决方法,如果有,请跟我讲下哦
port: 8080 这个是让你改端口的
vue-home/src/App.vue
rem适配移动端,1rem=10px
html{ font-size: 62.5%; }
建议注释掉这段,不然会然干扰后面的css
/*text-align: center;*/ /*color: #2c3e50; margin-top: 60px;*/
/vue-home/index.html图
我们是做的移动端,适配web端,所以在index.html里面加上meta
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
用MuseUI的添加之一
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic"> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
vue-home/src/main.js
图中有标识了哪些是用来干嘛的,分别是用MuseUI的添加之一;filters是用来把社区api数据中的时间格式转换成 *分钟前``*小时前``*天前
未完待续。。。。。。(代码好像用文章不方便介绍,我还是写好代码注释好了哦)
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- 页面优化小总结 (图片类型)
- 移动端页面分享快照生成总结
- VUE开发微信H5页面总结
- h5页面在不同ios设备上的问题总结
- 小心!网购支付页面前缀应是https不是http!三大区别总结!
- 输入URL到浏览器显示页面的过程,搜集各方面资料总结一下
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
大数据架构商业之路
黄申 / 机械工业出版社 / 2016-5-1 / 69.00元
目前大数据技术已经日趋成熟,但是业界发现与大数据相关的产品设计和研发仍然非常困难,技术、产品和商业的结合度还远远不够。这主要是因为大数据涉及范围广、技术含量高、更新换代快,门槛也比其他大多数IT行业更高。人们要么使用昂贵的商业解决方案,要么花费巨大的精力摸索。本书通过一个虚拟的互联网O2O创业故事,来逐步展开介绍创业各个阶段可能遇到的大数据课题、业务需求,以及相对应的技术方案,甚至是实践解析;让读......一起来看看 《大数据架构商业之路》 这本书的介绍吧!