因为公司用到的技术栈是vue3 + ts， 所以需要用vite创建一个新的项目。
安装环境
vite 需要node的版本 >= 12.0.0
node的安装只需要去官网上下载安装包安装即可，安装完成之后可以通过命令查看当前安装的版本
node -v
安装脚手架
因为需要新建的项目是typeScripe的，所以需要用npm init vite@latest
npm init vite@latest
然后在提示下配置项目信息：
Project name: // 输入项目名 输入后按回车确认
Select a framework: // 选择要使用的框架,方向键选择，回车键确认，我们选择 vue
vanilla
vue
react
lit
preact
svelte
Select a variant: // 选择语言， 选择vue-ts，回车确认，项目创建完成
vue
vue-ts
创建完成之后的截图：
参考链接：www.cnblogs.com/lqqgis/p/15…
安装常用依赖
vue-router 项目中的路由
npm i vue-router@4
vueX 状态仓库
npm i vueX
Sass css预处理
不要问为什么装三个，装就完事了
npm i sass -D
npm i sass-loader -D // sass 解析器
npm i node-sass -D // sass 环境
如果安装出错了可以查看这篇文章：juejin.cn/post/707892…
还有一个要注意的，在 style 标签上定义语言类型的时候需要看清楚是 scss 还是 sass ，千万要记住是 scss ，这个我自己没注意，自动补全选择了 sass ，被折磨了半小时!
axios http请求
如何配置拦截器 网上已经有很多，都可以使用
npm i axios
postCSS（autoprefixer）
vite 已经内置了postcss,所以不需要安装 但是需要安装一些相关的插件
postcss-import
支持postcss以import的格式引入
npm i postcss-import -D
autoprefixer 自动添加浏览器兼容前缀
npm i autoprefixer -D
配置：（vite.config.ts）
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import autoprefixer from 'autoprefixer'
import postcssImport from 'postcss-import'
export default defineConfig({
plugins: [vue()],
css: {
postcss: {
plugins: [
autoprefixer,
postcssImport
]
}
}
})
实现效果：
unocss 即时按需原子CSS引擎
npm i -D unocss
// vite.config.ts
import UnoCSS from 'unocss/vite'
export default {
plugins: [
UnoCSS({ /* options */ }),
],
}
// main.ts
import 'uno.css'
使用方法 直接在节点上添加类名（<div class="m-l-2">)
gasp动画库
@vue/core
很多常用的方法都已经封装好了，可以直接使用
