vue 環境的配置
vue的專案的環境的配置,對我們有用到的依賴以及配置的總結,方便以後使用:
如果配置了cnpm,把下面的npm換成cnpm會節約你好多時間。如果沒有配置,那就這樣配置一下:
npm install -g cnpm --registry=https://registry.npm.taobao.org
具體的可以看這個 http://npm.taobao.org/
1、安裝sass的依賴包
npm install --save-dev sass-loader
//sass-loader依賴於node-sass npm install --save-dev node-sass
在vue檔案中引用
<style lang="scss" scoped>
2、安裝less的依賴包
npm install less less-loader --save
在vue檔案中引用
<style lang="less" scoped>
@import './home.less';
</style>
3.如果是移動端我們可以安裝lib-flexible 彈性盒佈局
具體的可以參考 https://www.npmjs.com/package/flexibilitynpm i lib-flexible --save
2. 在專案入口檔案main.js中引入lib-flexible
import 'lib-flexible/flexible.js'
3.在專案根目錄的index.html 頭部加入手機端適配的meta的程式碼,
<meta name="viewport" content="width=device-width, initial-scale=1.0">
這個可以不加,
flexible.js中有判斷如果沒有自己會自動新增,如果你加了可能會報一個這樣的警告
4.安裝px2rem-loader
npm install px2rem-loader
在實際的開發中,使用flexible外掛時 會自動把px轉換成rem單位,這樣我們在開發的時候直接就用px,px2rem-loader 直接幫我們轉成rem
5.配置px2rem-loader
在vue-cli生成的webpack 配置中,vue-loader 的options和其他樣式檔案loader 最終都是由build/untils.js裡的一個方法生成的。
我們只需要在cssLoader後面加上一個px2remLoader即可,px2rem-loader的remUnit 選項意思是1rem=多少畫素,結合lib-flexible,我們將px2remLoader的option.remUnit 設定成設計稿寬度的1/10,
這裡我們假設設計稿的寬度為750px ,並將px2remLoader 放進loaders陣列中
var px2remLoader = {
loader: 'px2rem-loader',
options: {
remUnit: 75
}
}
// generate loader string to be used with extract text plugin
function generateLoaders (loader, loaderOptions) {
var loaders = [cssLoader,px2remLoader]
if (loader) {
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}