1. 2018-09-06 關於在vue中使用外部js，css的過程
走訪了好幾個移動框架，來回切換了幾次，發現都不是很適合我使用，要麼是組件不夠用，要麼是組件無法二次封裝。我在自己的項目中大多是需要使用框架之樣式，所以思來想去還是用比較熟悉的mui移動框架（ 官方網址 ）。但是mui是沒法使用npm進行安裝的（一大遺憾），思來想去於是將mui框架所需的js,css文件放在static目錄下：
在index.html中以靜態資源的方式進行引用。
當然想要在組件中直接使用mui這個變數，需要在build/webpack.base.conf.js文件中進行配置
如需引用mui框架的樣式只需要引入mui中的class樣式
以上是我在項目中遇到問題的一些解決方案，謝謝。
2. vue.config.js完整默認配置
mole.exports = {
// 基本路徑
baseUrl: '/',
// 輸出文件目錄
outputDir: 'dist',
// eslint-loader 是否在保存的時候檢查
lintOnSave: true,
// use the full build with in-browser compiler?
// https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only
compiler: false,
// webpack配置
// see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
chainWebpack: () => {},
configureWebpack: () => {},
// vue-loader 配置項
// https://vue-loader.vuejs.org/en/options.html
vueLoader: {},
// 生產環境是否生成 sourceMap 文件
proctionSourceMap: true,
// css相關配置
css: {
// 是否使用css分離插件 ExtractTextPlugin
extract: true,
// 開啟 CSS source maps?
sourceMap: false,
// css預設器配置項
loaderOptions: {},
// 啟用 CSS moles for all css / pre-processor files.
moles: false
},
// use thread-loader for babel & TS in proction build
// enabled by default if the machine has more than 1 cores
parallel: require('os').cpus().length > 1,
// 是否啟用dll
// See https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#dll-mode
dll: false,
// PWA 插件相關配置
// see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
pwa: {},
// webpack-dev-server 相關配置
devServer: {
open: process.platform === 'darwin',
host: '0.0.0.0',
port: 8080,
https: false,
hotOnly: false,
proxy: null, // 設置代理
before: app => {}
},
// 第三方插件配置
pluginOptions: {
// ...
}
}
// 設置代理
# string
mole.exports = {
devServer: {
proxy: '<url>'
}
}
# Object
mole.exports = {
devServer: {
proxy: {
'/api': {
target: '<url>',
ws: true,
changeOrigin: true
},
'/foo': {
target: '<other_url>'
}
}
}
}
3. vue 怎麼require css文件
首先，引入公共樣式時，我們在「main.js」里使用AMD的方式引入,即
?
1require('./assets/css/main.less');require(http://r.yuzhua.com);
這時，我們會拋出一個錯誤，是因為我們沒有寫解析的依賴，webpack不知道怎麼解析
當出現以上錯誤時，說明你的項目里缺少依賴；
?
1npm install style-loader --save這時你就可以引入css文件了；
4. vue.js怎麼動態設置css
template
<ul>
<li v-for="tab in tabs" :class="{ 'is-active': tab.isSelected}">
<a :href="tab.href" @click="selectTab(tab)">{{tab.name}}</a>
</li>
</ul>
script
selectTab(selectedTab) {
this.tabs.forEach(tab => {
tab.isSelected = (tab.name == selectedTab.name);
})
}
給每個a標簽綁定一個方法，並傳入當前對象作為參數
當點擊時遍歷所有a標簽，比較當前遍歷對象的某個屬性（例子中的name)與傳入對象的某個屬性
比例結果賦值給一個flag（例子中的isSelected屬性）,由這個flag去控制：class
從而實現數據驅動樣式
5. Vue3中CSS的新玩法-CSS模塊 &amp; 動態CSS
Vue3對CSS支持加入了更多的特性支持，這樣的話，我們在項目當中使用CSS就變得更加靈活了，來吧我們直接上干貨
在style的標簽上加一個mole的屬性，這樣style裡面的內容就會被編譯成CSS Moles（模塊），默認情況下，我們可以在模板代碼里，或者JS里通過$style拿到所有樣式屬性並使用
我們也可以給CSS Moles自定義一個名稱，在style的mole屬性設置一個名稱就可以了,這樣的話在模板和JS里就通過自定義的名稱來引入CSS里的屬性
與組合式 API 一同使用，注入的類可以通過 useCssMole API 在 setup() 和 .success { color: #090; }
可以通過 v-bind 這一 CSS 函數將 CSS 的值關聯到動態的組件狀態上
這個語法同樣也適用於
6. vue-cli怎麼使用css-loader
發現根本不需要再配置
這些了 build/webpack.base.conf.js 中注意這一行：
mole：{
rules：[
{
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig // vueLoaderConfig
},
]
}
其實vue-cli中已經完全配置好提取CSS到單獨文件了具體配置可以查看文件 build/vue-loader.conf.js 中
使用時直接在.vue 文件中@import就好了
<style>
@import './assets/css/base.css';
//
</style>
這里用link的時候 除了路徑問題外 style標簽下的樣式也會無效，具體為什麼還不清楚
7. vue 中怎麼動態給標簽加css
一、Vue css過渡的基本語法
<div v-if="show" :transition="expand">hello</div>
然後為 .expand-transition, .expand-enter 和 .expand-leave 添加 CSS
/* 必需 */
.expand-transition {
transition: all .3s ease;
height: 30px;
padding: 10px;
background-color: #eee;
overflow: hidden;
}
/* .expand-enter 定義進入的開始狀態 */
/* .expand-leave 定義離開的結束狀態 */
.expand-enter, .expand-leave {
height: 0;
padding: 0 10px;
opacity: 0;
}
你可以在同一元素上通過動態綁定實現不同的過渡：
<div v-if="show" :transition="transitionName">hello</div>
new Vue({
el: '...',
data: {
show: false,
transitionName: 'fade'
}
})
8. vue引入公共css文件
如圖是一個常見的vue文件結構
在app.html 或者*.vue中引入css，如下所示：
在 app.html引入css對陣個頁面都生效，在vue文件中引入，只對改vue生成的頁面有效
9. vue+css實現夜間模式
最近項目中要求實現夜間模式，整理一下實現方法。
ps. 我們的項目是混合開發，所以夜間模式要通過原生交互實現，如果直接是h5項目，則可省去原生交互這塊。
step1 原生交互方法
step2 獲取模式方法
step3 實現方法
1、使用css大類區分
2、針對不同class類定義css屬性全局變數
3、全局引入樣式文件（main.js中引入）
4、頁面中可定義css私有變數（包含頁面中特殊的顏色屬性，不止涉及亮度更改的圖片）
變數定義規范：--（頁面名稱）-自定義
建議將白天與夜間模式圖片區分兩個文件夾存儲
5、變數使用規范
總結：
1、注意css變數的使用的兼容性，例如安卓5的手機可能識別不了變數，解決方法：postcss可以試試看
2、如果項目中已使用less，可直接用less來實現，現未發現其兼容性問題（下一篇文章我會寫less實現夜間模式）
10. vue中使用css moles替代scoped
最開始使用Vue的時候，是提倡並大量使用的是scoped的。
加上 scoped 屬性的style會自動添加一個唯一的屬性 。比如data-v-0467f817為組件內 CSS 指定作用域，編譯的時候 .errShow會被編譯成類似 .errShow[data-v-0467f817]。
這種添加唯一的屬性的方法可以滿足日常組件局部css作用域的開發需求，但其設計上有一定缺陷，.errShow[data-v-0467f817]並不能保證是唯一的，另外在性能上也不是很好，瀏覽器搜索.errShow[data-v-0467f817]的速度並不如.errShow，相比於這種方式，CSS moles則做的更徹底，它不是添加屬性，而是直接改變類名。
CSS Moles
CSS Moles既不是官方標准，也不是瀏覽器的特性，而是在構建步驟中對CSS類名選擇器限定作用域的一種方式（通過hash實現類似於命名空間的方法）。類名是動態生成的，唯一的，並准確對應到源文件中的各個類的樣式。
用法
配置
如果你的項目是用vue-cli搭建的，那麼腳手架已經為你配置好了，直接可以使用，如果你是用webpack自己搭建的項目或想要修改默認配置，則進行下面配置。
css-loader關於CSS moles的默認配置如下：
可以使用vue-loader的css Moles選項為css-loader進行自定義的配置