在用脚手架初始化一个项目以后,我们还需要根据我们的项目来进行一些样式相关的处理。 panda-vue-template 手把手搭建vue小商城2.0
reset.css
来解决这个问题-->reset.css的引入,这里我们项目中使用一下normalize.css
:$ npm install normalize.css --save
// main.js引入一下即可
import Vue from 'vue'
// A modern alternative to CSS resets
// https://github.com/necolas/normalize.css
+ import 'normalize.css/normalize.css'
import App from './App.vue'
import router from './router'
import store from './store'
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
reset.css
的区别是什么:--->normalize.css与reset.css有哪些区别? normaliz.css
只是在浏览器的样式差异上打了几个补丁来抹平这些差异,所以我们还添加了一份样式来对其进行补充:reset.css sass
语法。你要使用less?-->less的引用及公共变量的抽离 # 安装sass
$ npm install node-sass sass-loader --save-dev
sudo
一下试试;node-sass
还是安装不上,切换淘宝镜像源啊什么的都不行,那么试下这行命令。-->相关issue $ sudo npm i --unsafe-perm node-sass -D
@vue/cli3.x不
需要在去webpack配置文件里面设置了。- 因为一个东西--`DPR(DevicePixelRatio)`称`设备像素比`,是一个`手机物理像素 /CSS像素`的比值。
- 但是自从retina屏以来,不同的手机有不同的像素密度,css中的`1px`并不等于移动设备中的`1px`, 最直接的表现就是1px边框问题;简单说就是你给border的css写个`1px`,到手机上却变粗了显示成`2px`。很多文章的解决办法都是用
postcss-preset-env
这个插件来让我们可以拥有使用未来css语法的能力。vue-cli3.x
构建的项目,安装好了就可以用了,不需要去配置webpack的这部分内容,还是很方便的。参考链接: