尚硅谷vite+vue3 （尚医通）项目实战笔记

如何配置项目运行后自动打开？
在package.json 启动命令中添加
“dev”: “vite --open”,

如何配置src的别名？
利用node内置模块path设置一下在vite.config.ts 中的别名

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, 'src')
    }
  }
})

如果出现了红色的错误提示需要安装@types/node 是ts的一个声明文件包，用于描述nodejs常用的模块和常用的第三包ts类型
这样配置完成后我们在编辑器中编写没有提示，需要在项目的ts.config中添加配置

 "baseUrl": ".",
    "paths": {
      "@/*": [
        "src/*"
      ]
    },

如何在开发前清除默认样式？
首先我们可以在npm官网搜索下reset 文件直接复制到我们的工程中
然后在main.ts 中引入该文件

报错没有scss因为脚手架默认支持的css，我们需要安装下scss

试图直接npm i scss ，启动项目依然报错了

报错内容是找不到sass，我使用的后缀文件是scss，为何提示的内容是找不到sass ？

这里需要分清楚sass和scss的区别了
Sass是为了使CSS开发更方便而产生的，原先我们是用原生CSS来写样式，增加了编程的特性，但它不方便，比如：不支持嵌套、运算、作用域 等

// 下面是sass的语法
nav
  ul
    margin: 0
    padding: 0
    list-style: none

  li
    display: inline-block

  a
    display: block
    padding: 6px 12px
    text-decoration: none

而Scss(sassy css)是Sass（(Syntactically Awesome Stylesheets)的改良版本。sass使用缩进，这对于写惯css的开发者来说很不直观，也不能将css代码加入到Sass里面。因此sass语法进行了改良，Sass 3就变成了Scss(sassy css)，与原来的语法兼容，只是用{}取代了原来的缩进。而且，所有有效的 CSS 也同样都是有效的 SCSS

// 下面这个是scss的语法
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

官网：https://sass.bootcss.com/guide.html
两个是一个东西，只是语法不同

引入element-plus组件库，如何修改输入框的宽度？
直接找到它的类名覆盖不生效，因为我们组件样式有scope 局部样式，想要修改第三方组件库的样式，可以使用深度选择器

为什么加了scope就可以实现样式的隔离了？

为组件的