欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

手把手带你开发豆瓣FM(vue)

程序员文章站 2022-05-02 17:39:52
...

最近闲来无事,打算用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>

相关资料

相关标签: vue 豆瓣