文档标签: vue
1、npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^92、npx tailwindcss init -p生成tailwind.config.jspostcss.config.js3、main.js中添加import "tailwindcss/tailwind.css"4、如果不生效,查找build/utils.js(不存在此文件看后面)中在postcssLoader中的options添加:
plugins: [
require('tailwindcss'), require('autoprefixer')
]
还不行就在vue.config.js中添加:
// vue.config.js
module.exports = {
c...
set $origin '*';
if ($http_origin) {
set $origin "$http_origin";
}
add_header Access-Control-Allow-Origin "$origin";
add_header Access-Control-Allow-Credentials "true";
add_header Access-Control-Allow-Methods&nb...
页面的list是根据后台接口返回数据组装而成,但是当页面更新list属性时,页面并未同时渲染成新的值,先参考了用this.$set来修改属性,但还是不行,后面就加了this.$forceUpdate()强制更新,解决问题。代码里面的关键点注意一下就行了。vue修改对象属性页面不渲染解决方法:import {mapState} from 'vuex'
import PageLoading from "../common/page-loading"
export default {
name: "message",
components: {PageLoading},
data(){
...
keep-alive的生命周期 activated: 页面第一次进入的时候,钩子触发的顺序是created->mounted->activated deactivated: 页面退出的时候会触发deactivated,当再次前进或者后退的时候只触发activated<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>router配置routes: [
{
path: '/',
&nb...
摘抄自网络,地址久了没找到。axios:axios.interceptors.request.use(config => {
config.cancelToken = new axios.CancelToken( cancel => {
window.__axiosPromiseArr.push({cancel})
})
}发送请求前:window.__axiosPromiseArr.forEach((ele, index) => {
ele.cancel()
&nb...
vue 不兼容IE11解决 方法,将es6转换成es5,在线转换地址:https://babeljs.io/repl/ 单页面或者web-view 尽量不要用es6进行代码开发,用了也没事找个网址进行es6转es5参考页面:https://blog.csdn.net/dx18520548758/article/details/80265470...
在项目里面使用的是web vue页面刷新的时候,页面出现未编译的乱码,解决vue页面加载未完成乱码vue手册中也有提到过v-cloakhttps://vuejs.org/v2/api/#v-cloak 示例:[v-cloak] {display: none;}<div v-cloak>{{ message }}</div>v-cloak 编译结束后才会显示,就不会显示没编译的内容了参考页面:https://shuibo.me/index.php/archives/182/ ...
vue的配置文件里面webpack.base.conf.js有这样一段代码:{
test: /.(png|jpe?g|gif|svg)(?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]&...
在使用vux的时候用组件drawer,导致body无滚动条,使用scrollTop就无效解决方法:document.body.scrollTop改成document.getElementById('vux_view_box_body').scrollTop这里就有一个前端的知识点了:scrollTop只针对于元素自身是否有滚动条,有才可以设置参考资料:http://www.imooc.com/qadetail/63295 ...
现在很多单页面应用都是通过vue来制件的,在微信场景下就需要有分享功能了。前端VUE代码:import axios from 'axios';
axios.defaults.baseURL = 'http://example.adophper.com/wxshareObject';
export default {
name: 'app',
methods: {
isWeiXin() {
let ua = window.navigator.userAgent.toLowerCase();
&nb...
如果是新的项目要使用vux,直接使用:vue init vux/webpack test这种新建的项目版本好像有点旧了。如果想在已经建立的项目中引用vux:npm install vux --savenpm install vux-loader --save-devnpm install less less-loader --save-dev修改build/webpack.base.conf.jsconst vuxLoader = require('vux-loader') const webpackConfig = originalConfig // 原来的 module.exports 代码赋值给变量 webpackConfig, //即将原来的module.exports 改为 const webpackConfig
module.exports = vuxLoader.merge(webpackConfig, { plugins: ['vux-ui&...
目前我遇到这个问题的解决方法是修改 Vue 项目中的的配置路径:config/index.js,具体修改内容如下图cordova,vue,混合开发,cordova+vue...
Vue 之 android内嵌H5页面不显示出现这个问题,原因有很多首先,别急,请看下面的推荐方案:1、找个Android真机测试下(机型版本为4.4以上),真机联调测试(如果不知道怎么联调,那么请看这里:Android真机 - 联调chrome调试)2、如果报 报错 vuex requires a Promise polyfill in this browser.那么,就是兼容性不够好,请看下面的解决方案:首先,使用 node 安装 *babel-polyfill 命令*npm install --save-dev -polyfill11解决方案1:在 webpack.config.js 文件中,entry 入口处修改,加入即可"babel-polyfill":"babel-polyfill",//用来解决的兼容性11例如:entry: { "babel-polyfill"...