今日学习内容:
vue-cli创建项目
1. 创建项目
vue create music
初始化HTML中的代码
目标:解决浏览器兼容问题,SEO(TKD),网页快捷图标等。
puclic/index.html的**header**中加入下列代码,讲引用的图标拷贝到public目录
public中的文件不会被webpack处理
步骤:
1 删除自动生成的文件:public文件夹,src文件下的5个文件夹,assets。。
2 修改**public/index.html**
3 修改**src/main.js** 文件
其中用了一个新的方法**render**,和之前的区别就是 会替代app的区域。
1.Vue渲染组件的两种方式
1.1 先定义注册组件, 然后在Vue实例中当做标签来使用
1.2 先定义注册组件, 然后通过Vue实例的render方法来渲染
2.两种渲染方法的区别
1.1 当做标签来渲染, 不会覆盖Vue实例控制区域
1.2 通过render方法来渲染, 会覆盖Vue实例控制区域
4修改eslint配置文件.eslintrc.js
安装vs插件:
vetur 的特性: 语法高亮, 代码片段 (emmet 给我的感觉是一个写好了的 snippet), 质量提示 & 错误、格式化 / 风格、智能提示等
2. LESS和SASS文件后缀名区别
LESS以.less结尾
SASS以.sass或者.scss结尾
两种不同结尾方式区别: .sass结尾以缩进替代{}表示层级结构, 语句后面不用编写分号
.scss以{}表示层级结构, 语句后面需要写分号
企业开发中推荐使用**.scss结尾**
注意点: scss需要大括号和分号结尾。
导入其他SASS文件
1 .scss文件中导入其它.scss文件
和LESS一样SASS文件中也支持导入其它SASS文件
其实原生的CSS也支持通过@import导入其它的CSS文件, 只不过不常用
不常用的原因在于原生的@import导入其它的CSS文件,
只有执行到@import时浏觅器才会去下载对应 css文件,这导致请求次数变多,页面加载起来特别慢
而LESS和SASS中的@import是直接将导入的文件拷贝到当前文件中生成一份CSS, 所以只会请求一次, 速度更快。
|