vue相关问题

一、vue打包后css中引用的图片路径不正确

1：将绝对路径改为相对路径
打开webpack.prod.conf.js，找到output，添加publicPath :'./'
也可以 config文件夹下面的index.js 找到build下面的assetsPublicPath，值改为’./’
2：资源最终要打包到static文件夹下面，修改build下面的utils.js添加publicPath:’…/…/’， 如下图：

3：将绝对路径改为相对路径
在vue项目中使用了MUI框架,但是在npm run build进行打包的时候未生成dist文件,报错如下:

在mui.css文件中全局搜索svg,将外层的单引号改为双引号即可。

二、行内样式

<div class="picContent" v-bind:style="{background:'url(http://www.yunguoji.com.cn' + item.pic + ')', backgroundPosition:'center center', backgroundSize: 'cover'}"></div>

<div class="picContent" v-bind:style="{background:'url(http://www.yunguoji.com.cn' + item.pic + ') center', backgroundSize: 'cover'}"></div>

<div class="picContent" v-bind:style="{background:'url(http://www.yunguoji.com.cn' + item.pic + ') center / cover'}"></div>

三、vue解析富文本生成的html标签

用 v-html

四、路由跳转携带参数##

<li v-for="item in items">
	<router-link :to="{ path: 'newsDetail', query: { id: item.id }}">
		<div class="newsInfo">
				<h4>{{item.title}}</h4>
				<p>{{item.des}}</p>
		</div>
	</router-link>
</li>

//接收参数

this.id = this.$route.query.id;

五、vue是数据驱动的理念，但是如果用了动态追加内容的方式，新追加进来的元素样式不生效的问题

vue给每个元素都添加data-v-2a41d7aa ，新追加进来的元素却没有。对于动态追加的元素样式单独写一个style, 不加scoped.

六、Error: No PostCSS Config found in… 报错

项目在本地运行不报错，上传到 GitHub 之后，再 clone 到本地，执行：
npm install
安装完成之后再执行：
npm run dev
报错如上。
在项目根目录新建postcss.config.js文件，并对postcss进行配置：

module.exports = { 
  plugins: { 
    'autoprefixer': {browsers: 'last 5 version'} 
  } 
}

再次执行 npm run dev 解决

七、使用sass

1：npm install node-sass --save
2：npm install --save-dev sass-loader style-loader css-loader
3：

vue中使用mui

1：mui中默认禁止了a标签的跳转。
在app.vue中添加：

2：mui中默认禁止click事件，使用的是tap事件

使用：