手把手带你开发豆瓣FM(vue)
最近闲来无事,打算用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 '[email protected]/style/app'
</style>