手把手带你开发豆瓣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 <template-name> <project-name>

实例

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

相关资料