手把手带你开发豆瓣FM（vue）

2024-06-11 06:59:54

最近闲来无事，打算用vue练练手，正好比较喜欢豆瓣fm小清新的界面，那么就仿照豆瓣fm，开发一个属于自己的vue项目吧。
项目会用到以下技术：
+ Vue2：采用最新Vue2的语法
+ Vuex：管理公共组件状态量
+ vue-router：管理单页面应用路由
+ axios：发起http请求
+ scss：css预处理语言
+ Webpack：自动化构建工具，主要配置vue-cli脚手架提供。
+ ES6：采用ES6语法。
+ CSS3：CSS3动画及样式。

我们现在开始搭建项目。
###1. vue-cli

安装

$ npm install -g vue-cli

使用

$ vue init

实例

$ vue init webpack vue-douban-fm

用vue-cli生成的项目没有scss、axios、vuex,需要我们手动添加

###2. 添加scss依赖
在package.json中的devDependencies中加入以下内容(当然，版本号可以按需修改)

“node-sass”: “^4.7.2”
“sass”: “^0.5.0”,
“sass-loader”: “^4.1.1”,
“scss”: “^0.2.4”,
“scss-loader”: “0.0.1”

3. 添加axios及vuex

在package.json中的dependencies下加入(当然，版本号可以按需修改)

“axios”: “^0.18.0”,
“vuex”: “^3.0.1”

4. 删除node_modules目录，再安装项目依赖

如果不清楚这个目录，直接npm install,可能会在项目启动时报错，找不到资源依赖。未了避免这种问题出现，我们直接

$ rm -rf node_modules

再安装项目依赖

$ npm install

如果还有问题，则

$ npm cache clean –force

5. 修改webpack.base.conf文件

在resolve增加对’scss’的配置

  resolve: {extensions: ['.js', '.vue', '.json','scss'],alias: {'vue$': 'vue/dist/vue.esm.js','@': resolve('src'),}},

6. 引入公共样式

在项目目录下创建style目录，再创建common.scss文件
在app.vue文件中引入（记得完成步骤5）
+ 需要将style标签中加入lang=”scss”
+ @import引入scss文件

<style lang="scss">@import './style/common';
</style>

如果是需要从node_modules导入您的Sass模块，我们需要用一个~告诉webpack这不是一个相对的导入，
比如我想通过webpack配置文件中的别名alias来引导路径，如： ‘@/style/common’ 来引入，那么我们需要

<style lang="scss" scoped>@import  '~@/style/app'
</style>

相关资料

手把手带你开发豆瓣FM（vue）相关推荐

ExtJS - Desktop - 开发豆瓣FM应用
这次为了美化图标,山寨了点WebQQ的图标,纯属好看,题外话:火狐的Firbug是好东西,山寨全靠它了. 下面是ExtJS版的豆瓣FM : 代码很简单,实现原理就是在豆瓣FM的地址上套一个Ext.Wn ...
手把手带你从零打造Vue SSR，清晰易懂！
Vue SSR,服务端渲染,优点大家都很清楚,能大大提升首屏渲染速度,优化用户体验,还有利于SEO. 但说实话,Vue SSR并不好上手.官网给的例子大而全,太复杂.而网上很多从0到1打造Vue SS ...
手把手带你开发企业级支付系统
499元特惠价原价 1599元的 <企业级支付系统从0到1手把手开发实战> === 课程内容 === 支付项目从0带你手把手落地,包含了完整的商品.会员.订单等多个模块,在进行支付宝沙 ...
记录--手把手带你开发一个uni-app日历插件（并发布）
这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助相信我们在开发各类小程序或者H5,甚至APP时,会把uni-app作为一个技术选型,其优点在于一键打包多端运行,较为强大的跨平台的性能.但 ...
校园二手商城小程序，手把手带你开发一款云开发版商城小程序，校园二手微信小程序，可升级社区团购小程序
从今天开始带领大家实现一款云开发版的校园二手商城小程序技术选型 1,前端微信小程序原生框架 css JavaScript 2,管理后台云开发Cms内容管理系统 web网页 3,数据后台小程序云 ...
校园超市，百货超市小程序，手把手带你开发一款微信商城小程序，云开发+cms+数据库+js+css+微信小程序
从今天开始带领大家实现一款云开发版的校园二手商城小程序技术选型 1,前端微信小程序原生框架 css JavaScript 2,管理后台云开发Cms内容管理系统 web网页 3,数据后台小程序云 ...
手把手带你开发一款云开发版点餐小程序，微信扫码点餐，店铺地图导航，外卖小程序，用户端和后厨端都有
从今天开始带领大家实现一款云开发版的点餐小程序视频讲解:<云开发后台+微信扫码点餐小程序+cms网页管理后台> 技术选型 1,前端微信小程序原生框架 css JavaScript 2, ...
【H5开发】02手把手带你开发H5列表页面 ~ 包含查询、重置、提交功能
不要害怕孤独,因为这个世界上总有一个人在努力走向你. 上节回顾:从一个简单页面带你体验H5开发https://blog.csdn.net/Sabrina_cc/article/details/1198 ...
手把手带你开发一个批量下载资源的谷歌浏览器扩展
唠一唠. 今天呢,我们来开发一款谷歌浏览器插件,这是一款怎样的插件呢?接下来我就为大家揭秘其神秘的面纱.这是一款面向网页,分类抓取图片资源,视频资源,链接资源(包括压缩包等),并且实现了资源可筛选,可 ...
Ubuntu12.10安装豆瓣FM（Banshee播放器）
安装方法参考了这篇文章作为程序猿,写代码的时候开个浏览器只为了听豆瓣FM实在太不爽啦,果断寻找解决方法~本来Ubuntu默认播放器是rhythmbox,也有人开发了豆瓣FM插件,不过我试了试,发现安 ...

最新文章

热门文章