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进行自定义的配置