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