vue2写单页面项目总结记录

栏目: CSS · 发布时间: 3年前

来源: www.hxvin.me

内容简介:vue2写单页面项目总结记录

本文转载自:http://www.hxvin.me/2017/05/29/post用vue写webapp项目总结系列1/?utm_source=tuicool&utm_medium=referral,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有。

一直想做个有数据内容的项目,刚好vue社区提供了API,在此感谢。

这是一个基于 vue+vue-cli+vue-router+axios+webpack 开发的vue社区 SPA ;UI用 Muse-UI ;css用 scssflex 布局, rem 做移动端适配,最终效果web端移动端都适配。

如果你和我一样用vue还挺生疏的,那好好做完这个项目,会学到很多东西,能有挺大的进步,一起(๑•̀ㅂ•́)و✧加油。

如果对您有帮助,请给一个 star 鼓励一下萌新,感谢 ^ ^

github项目地址

项目API

准备开发环境

  • $ 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

vue2写单页面项目总结记录

assetsPublicPath: '/vue-home/dist'

这个公共路径原本为assetsPublicPath: ‘/‘,这样在本地 服务器 是可以跑,可是打包上传到github后会发现打开的页面是空白的,报错如下图。

vue2写单页面项目总结记录

原因是路径错了,vue-home是项目文件夹名称,dist是npm run build之后出现的文件夹,github上线就是读取dist文件夹而生成的网页(成功展示的demo地址长这样: http://www.hxvin.me/vue-home/dist/)

vue2写单页面项目总结记录

解决上线路径问题不知道还有没有其他更方便的解决方法,如果有,请跟我讲下哦

port: 8080 这个是让你改端口的

vue-home/src/App.vue

vue2写单页面项目总结记录

rem适配移动端,1rem=10px

html{
  font-size: 62.5%;
 
}

建议注释掉这段,不然会然干扰后面的css

/*text-align: center;*/
/*color: #2c3e50;
margin-top: 60px;*/

/vue-home/index.html图

vue2写单页面项目总结记录

我们是做的移动端,适配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

vue2写单页面项目总结记录

图中有标识了哪些是用来干嘛的,分别是用MuseUI的添加之一;filters是用来把社区api数据中的时间格式转换成 *分钟前``*小时前``*天前

未完待续。。。。。。(代码好像用文章不方便介绍,我还是写好代码注释好了哦)


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

关注码农网公众号

关注我们,获取更多IT资讯^_^


查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

智能

智能

[法]弗雷德里克·马特尔 / 君瑞图、左玉冰 / 商务印书馆 / 2015-8 / 59.90

揭示数字化主流大趋势的最新权威论著 《主流》作者的最新力作!与法国秋季新版同步上市! 面对数字化时代的到来,美国、欧盟、中国、俄罗斯、印度、巴西、古巴、伊朗、南非、韩国、新加坡、肯尼亚、墨西哥、日本等世界各国各地区正在如何应对? 在国际地缘政治格局下如何把握数字化主流的大趋势? 谷歌、苹果、脸书、亚马逊、阿里巴巴、腾讯、中兴、华为等大家熟知的网络巨头接受了作者的采访。作者的......一起来看看 《智能》 这本书的介绍吧!

在线进制转换器
在线进制转换器

各进制数互转换器

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具