项目背景：公司要开新的项目，决定使用现在流行的vue搭建前端的框架。我之前写过一些vue.js的代码，还没有使用构建工具搭建过vue项目，所以记录一下搭建的过程。

1 关于style标签中的scoped

scoped属性，当 style标签有 scoped 属性时，它的 CSS 只作用于当前组件中的元素。如果不加这个属性，写在style标签中的样式就是全局样式了，当然这两种是可以同时存在的。在https://vue-loader-v14.vuejs.org/zh-cn/features/scoped-css.html这个网页中有更加详细的解释。

2 关于屏幕高度的计算

在做框架页面的时候需要计算页面高度使得菜单内容和组件内容充满屏幕。有两种方法，可以使用js计算页面高度，从而进行控制。也可以使用css的calc()进行计算。要注意vw是宽度单位，100vw就是100%宽，vh是高度单位，100vh就是100%高。括号中的计算支持加减乘除，但是注意要在运算符号前后使用空格，否则不管用。如

<div style="width: calc(100vw - 10px)">

宽度：100%-10px的意思

从0搭建vue项目笔记1相关推荐

Vue-CLI + Webpack 搭建 Vue 项目最全分析
一.vue-cli介绍 vue-cli是一个用于快速搭建vue项目的脚手架. 二.vue-cli安装.更新安装过nodeJs .cnpm 后,全局安装vue-cli(以后其他项目可直接使用): c ...
搭建vue项目环境以及创建一个简单的vue的demo
一.vue-cli脚手架的搭建步骤 1.首先,确定你的电脑上已经安装了nodejs,可以使用npm包管理器安装环境,如果还没有安装node环境,则需要安装node.js 这个很简单默认点击安装 ...
从零开始使用webpack 搭建vue项目
从零开始使用webpack 搭建vue项目 1 创建项目 npm init 生成 package.json 创建 index.html webpack.confug.js project-name|- ...
使用veu-cli3/4搭建vue项目详细配置
文章目录使用vue-cli4 搭建vue项目一.安装vue-cli4 二.创建一个vue项目三.预设选项四.启动项目五.可视化UI 使用vue-cli4 搭建vue项目一.安装vue-cl ...
webpack搭建vue项目（不用脚手架）
webpack搭建vue项目(不用脚手架) npm默认安装的是最新版本,这里讲的是Webpack4用法,如果遇到问题请检查是否是版本问题 webpack5升级了一些东西,例如图片的打包 1.初始化项目 ...
搭建vue项目脚手架_逆战班出品
搭建vue项目脚手架 1. 安装执行以下命令(npm) npm install @vue/cli -g//全局安装创建目录 vue create 目录文件名进入目录 cd 目录文件名启动项目 ...
MAC电脑使用vue-cli脚手架搭建vue项目；mac使用脚手架vue-cli搭建vue项目
windows搭建vue项目看这篇
搭建 vue项目（Windows + 命令行 + vsCode）
1.win键 + R ,输入CMD打开命令行. 2.输入node -v 查看node.js是否安装,如果输出版本号,则进行下一步,否则安装node.js. 下载地址:https://nodejs.or ...
关于搭建Vue项目的顺序及遇到的问题
关于搭建Vue项目的顺序前言:笔者在搭建Vue项目中遇到了许多问题,当最后解决的时候,仍然对这个过程的来龙去脉极为模糊,在这里从最开始搭建nodejs开始到最后Vue项目搭建完成进行一个一条龙的总结 ...

从0搭建vue项目笔记1

1 关于style标签中的scoped

2 关于屏幕高度的计算

从0搭建vue项目笔记1相关推荐

最新文章

热门文章