最近閑來(lái)無(wú)事，打算用vue練練手，正好比較喜歡豆瓣fm小清新的界面，那么就仿照豆瓣fm，開發(fā)一個(gè)屬于自己的vue項(xiàng)目吧。
項(xiàng)目會(huì)用到以下技術(shù)：
- Vue2：采用最新Vue2的語(yǔ)法
- Vuex：管理公共組件狀態(tài)量
- vue-router：管理單頁(yè)面應(yīng)用路由
- axios：發(fā)起http請(qǐng)求
- scss：css預(yù)處理語(yǔ)言
- Webpack：自動(dòng)化構(gòu)建工具，主要配置vue-cli腳手架提供。
- ES6：采用ES6語(yǔ)法。
- CSS3：CSS3動(dòng)畫及樣式。
我們現(xiàn)在開始搭建項(xiàng)目。
1. vue-cli
安裝
$ npm install -g vue-cli
使用
$ vue init <template-name> <project-name>
實(shí)例
$ vue init webpack vue-douban-fm
用vue-cli生成的項(xiàng)目沒有scss、axios、vuex,需要我們手動(dòng)添加
2. 添加scss依賴
在package.json中的devDependencies中加入以下內(nèi)容(當(dāng)然，版本號(hào)可以按需修改)
"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下加入(當(dāng)然，版本號(hào)可以按需修改)
"axios": "^0.18.0",
"vuex": "^3.0.1"
4. 刪除node_modules目錄，再安裝項(xiàng)目依賴
如果不清楚這個(gè)目錄，直接npm install,可能會(huì)在項(xiàng)目啟動(dòng)時(shí)報(bào)錯(cuò)，找不到資源依賴。未了避免這種問題出現(xiàn)，我們直接
$ rm -rf node_modules
再安裝項(xiàng)目依賴
$ npm install
如果還有問題，則
$ npm cache clean --force
5. 修改webpack.base.conf文件
在resolve增加對(duì)'scss'的配置
resolve: {
extensions: ['.js', '.vue', '.json','scss'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
}
},
6. 引入公共樣式
在項(xiàng)目目錄下創(chuàng)建style目錄，再創(chuàng)建common.scss文件
在app.vue文件中引入（記得完成步驟5）
- 需要將style標(biāo)簽中加入lang="scss"
- @import引入scss文件
<style lang="scss">
@import './style/common';
</style>
如果是需要從node_modules導(dǎo)入您的Sass模塊，我們需要用一個(gè)~告訴webpack這不是一個(gè)相對(duì)的導(dǎo)入，
比如我想通過(guò)webpack配置文件中的別名alias來(lái)引導(dǎo)路徑， 如： '@/style/common' 來(lái)引入，那么我們需要
<style lang="scss" scoped>
@import '~@/style/app'
</style>
