工作日志：从零搭建vue3+ts+sass项目（3）

折腾了两天后，发现elementPlus的代码都是ts的，本来不想现在用ts，因为非常不熟悉，但长痛不如短痛，重开项目！直接vue3+vite+ts+sass！让暴风雨来得更猛烈一下吧！我差那几个bug吗？

1、执行命令如下：

npm create vite@latest
npm install
npm install sass -D
npm i vue-router

2、在src下创建文件夹和文件，过程很丝滑，没有bug，说明这肯定是一条正确的道路啊。

3、刚说完过程丝滑，bug这不就来了？安装pinia后，在main.ts中引入，就报错了。

修改vite.config.ts文件如下：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'; 
// https://vitejs.dev/config/
export default defineConfig({
    plugins: [vue()],
    resolve: {
        alias: [
            {
                find: '@',                                   // 别名
                replacement: resolve(__dirname, 'src'),      // 别名对应地址
            },
            {
                find: 'components',
                replacement: resolve(__dirname, 'src/components'),
            }
        ]
    }
})

又出问题：找不到模块“path”或其相应的类型声明。
好的，继续安装path吧！（保持微笑）。

4、安装 @types/node 模块，解决 path 模块报错的问题。

npm i @types/node -D

5、path不报错了，可是pinia报错的问题还是没有解决啊！继续排查……
好好好……排查半天，原来是import App from './App.vue’这句话的问题，是因为App.vue这个文件中报错了，最后把文件报错修改完，pinia的问题也就没有了。

开心不到两分钟，又提示：找不到模块“pinia”或其相应的类型声明。百度不出原因，已疯……

平静下来，继续操作。

npm uninstall pinia
npm i pinia -D

好，目前为止不报错了。
在package.json文件中发生了点变化。pinia版本由2.0改成了2.2，从dependencies对象里转移到了devDependencies对象里。devDependencies是用于在开发环境下依赖的模块，而dependencies就是无论开发环境还是生产环境都需要的依赖模块。

6、开始安装elementplus。

npm install element-plus --save

在main.ts文件里写入：

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

app.use(ElementPlus)

好，完成！
就让今天的bug结束在这里吧！接下来的时间，一切顺利！

但并不顺利，那个pinia又开始提示找不到模块了。它也是太随心所欲了。什么时候我解决了再总结吧，现在我毫无办法。

PS：补充俩知识点。

npm命令中，-D是开发依赖，会把包添加到package.json的devDependencies下，这些包只在做项目的时候会使用到，在项目打包上线后不依赖于这些包项目依然可以正常运行。比如：gulp/webpack、eslint、sass等等。

-S是生产依赖，会把包添加到package.json的dependencies下，这些包在项目打包上线后依然需要使用项目才能正常运行，比如：axios、element-ui、vue-router等等。