菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

标题: vue-cli使用2023.6.28 [打印本页]

作者: 霁后彩虹O 时间: 2023-6-29 00:06
标题: vue-cli使用2023.6.28
今日学习内容：

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, 所以只会请求一次, 速度更快。

欢迎光临菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/)