搭建Vite+Vue项目

vite官方文档 https://vitejs.cn/

全局安装

安装Vite npm i -g create-vite-app@1.18.0

项目创建

通过 Git Bash Here 打开黑窗口
指令: create-vite-app 项目名
npm i 安装node包

启动项目

npm run dev
启动命令在package.json里自己找

为什么选择Vite

现实问题

缓慢的服务器启动,缓慢的更新

服务器随起随用。 同时不仅有 Vue 文件支持，还搞定了热更新，而且热更新的速度不会随着模块增多而变慢。

为什么生产环境仍需打包

省略打包这个步骤，因此需要什么资源直接在浏览器里引入即可

Vite 一种新的,更快地 web 开发工具

1 快速的冷启动

2 即时的模块热更新

3 真正的按需编译

全局scss

先安装这些

npm install --save-dev sass
npm install --save-dev node-sass
npm install --save-dev sass-loader

然后在根目录下新建vite.config.js文件
新建一个varuables.scss文件写样式

module.exports = {
  cssPreprocessOptions: {
    scss: {
      additionalData: '@import "./src/assets/css/varuables.scss";' // 添加公共样式
    }
  }
}

重启试一下

$color:green

<style lang="scss">
#app {
  background: $color;
}
</style>

看看效果

ok 很绿 没有问题 scss的全局配置搞定

踩坑记录scss(路径)

additionalData: '@import "./src/assets/css/varuables.scss";' 

注意自己的路径一定要加 ; 号