VUE项目创建基础配置----vue-base

最新推荐文章于 2024-05-27 23:13:20 发布

原创最新推荐文章于 2024-05-27 23:13:20 发布 · 728 阅读

1 ·

CC 4.0 BY-SA版权

VUE 专栏收录该内容

17 篇文章

订阅专栏

本文详细介绍如何在前端项目中配置Stylus预编译CSS、解决移动设备点击延迟问题，以及如何处理编译错误。同时，介绍了viewport和rem布局的配置方法，以及使用SCSS进行样式重置和全局样式设定的最佳实践。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如果使用的是stylus预编译css,需要先安装对应的依赖

cnpm install stylus stylus-loader --save-dev

会安装一下两个依赖

"stylus": "^0.54.5",
"stylus-loader": "^3.0.2",

https://www.jianshu.com/p/8601ccf91225

cnpm install babel-runtime --save

"babel-runtime": "^6.26.0", 对ES的语法进行转义

cnpm install fastclick --save

"fastclick": "^1.0.6", 解决移动设备点击时300ms延迟问题

cnpm install babel-polyfill --save-dev

"babel-polyfill": "^6.26.0", ES6中api的转义,如Promise

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import 'babel-polyfill'
import Vue from 'vue'
import App from './App'
import router from './router'
import fastclick from 'fastclick'

import 'common/stylus/index.styl'

fastclick.attach(document.body)   //避免在移动设备上点击时300ms延时

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  // components: { App },
  // template: '<App/>'
  render: h=>h(App)
})

拷贝vue项目编译报错

1.删除node_modules文件夹下的内容,重新cnpm install安装依赖,cnpm run dev重新运行服务

2.如果还是不行,cnpm cache clean --force 强制删除缓存

viewport配置

在index.html中配置:

rem配置

在app.vue的script中添加下面代码

  document.addEventListener('DOMContentLoaded', () => {
  	const html = document.querySelector('html')
  	let fontSize = window.innerWidth/10
  	fontSize = fontSize>50 ? 50 : fontSize
  	html.style.fontSize = fontSize + 'px'

  })

如果使用scss预编译css代码,添加reset.scss和global.scss两个配置文件

reset.scss: https://meyerweb.com/eric/tools/css/reset/index.html

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

html, body {
  width: 100%;
  height: 100%;
  font-family: 'PingFangSC-Light', 'PingFang SC', 'STHeitiSC-Light', 'Helvetica-Light', 'Arial', 'sans-serif';
}

global.scss

@import 'reset';

//1rem = fontSize px
//1px = (1/fontSize) rem
$fontSize: 37.5    //设置默认字体大小
@function px2rem($px){
  @return ($px / $fontSize) + rem
}

@mixin center() {
  display: flex;
  justify-content: center;    //水平居中
  align-items: center;    //垂直方向居中
}

最后在main.js中引入global.scss就可以了