【3】目錄介面&header元件 -【配置相對地址】
阿新 • • 發佈:2018-12-04
- 修改【public】-【index.html】meta標籤
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
- 在【src】- 新建資料夾【common】- 新建資料夾【fonts】:存放需要的字型圖示庫
- 新建資料夾【stylus】:存放樣式
stylus =》index.styl :引入icon.stylus【字型圖示樣式】 和 base.stylus【基礎樣式; 定義html和body】 兩個樣式;在【main.js】中需要引用的是【idnex.stylus】即可以引用icon和base
import 'common/stylus/index.styl'
=》mixin.styl:這裡直接引用cube-ui裡面定義的全域性樣式
=》variable.styl:這裡引用cube-ui裡面定義的全域性樣式變數 ,也定義一些新顏色的變數
- 資料夾【components】:新增資料夾【v-header】頭部元件和資料夾【support-ico】
配置相對路徑
在資料夾【vue.config.js】中通過方法【chainWebpack】
const path = require('path') //
function resolve(dir) {
return path.join(__dirname, dir) //resolve是一個方法:node.js提供的path組(require(‘path’),path有一個 path.join方法 =》拼接路徑 __dirname【絕對路徑】
}
chainWebpack(config) {
config.resolve.alias
.set('components ', resolve('src/components'))
.set('common', resolve('src/common'))
.set('api', resolve('src/api'))
}
在vue中就可以直接使用相對地址即可:下面程式碼就可以找到 src/components/common/stylus/mixin 檔案
@import "~common/stylus/mixin"