vue3+vite+ts+elementPlus+sass 项目搭建

兼容性注意

Vite 需要 Node.js 版本 >= 12.0.0。

npm init vite@latest

进入项目目录，npm install 安装依赖包

初始化的vue3项目 没有router axios vuex sass等插件

根据自己需求安装依赖包

npm i axios @antv/g2 element-plus lodash print-js qf-export-excel qs vue-router vuex vuex-persistedstate -S



npm i sass -D

需要说一点就是，webpack建立的项目，使用sass需要node-sass和sass-loader，

vite项目建立vue项目 直接安装sass依赖包就可以直接使用

配置sass全局变量，

新建scss文件，直接在vite.config.ts中配置，这一点在vue2中还得安装插件进行配置

css: {
			preprocessorOptions: {
				scss: {
					additionalData: `
          @import "@/assets/css/variable.scss";`,
				},
			},
		},

引入多个scss的文件直接用 ； 分开

scss: {

          additionalData: `

          @import "@/assets/css/variable.scss";@import "@/assets/css/variable2.scss";`,

        },

组件中单独引入

<style scoped lang="scss">

@import '@/assets/scss/variable.scss';

@import '@/assets/scss/variable2.scss';