vite+vue3+scss+ts项目搭建

vue3出来快一年了，新项目需要使用vue3，现在就记录一下搭建过程和一些坑
本来用webpack已经搭建好了
!
但是想了一下，现在不都推荐vite，决定就用vite了，首先用了一下网上的命令

npm i -g create-vite-app
create-vite-app vue3vite
cd vue3vite
npm i
npm run dev

真的是超级快，秒搭建好了

但是这里就有问题了，比vue-cli脚手架搭建的项目少了好多东西，这意味着ts、router、scss等等都需要自己再重新装，于是我去了官网https://vitejs.cn/，发现官网的命令不一样，于是我又重新来了一遍

npm init @vitejs/app my-vue-app --template vue
cd my-vue-app
npm install
npm run dev

居然又不一样，这里多了个文件vite.config.js，我估计类似于以前的vue.config.js，还是使用官方方法好了，现在就只有查一下怎么能变成vue-cli搭建的那样了

启动居然network没了，原来是安装的vite版本问题

1.0.0-rc.13这个版本启动就会有network，于是我把vite版本改了直接npm i

直接报错，原来版本不一样，vite.config.js里使用的方法已经没了，需要删除vite.config.js，删除后就好了

官方方法还会出现这个，所以这两种方法搭建的项目，vite版本不能改变，2.3.8应该是新版本，所以还是用第一种方法好了
首先安装ts

npm i typescript

然后初始化tsconfig.json

npx tsc --init

安装vue-router

npm i vue-router

安装vuex

npm i vuex

把main.js改成main.ts，然后报错了，查度娘，原来还要.d.ts文件，于是我直接把webpack那个直接复制过来，这是一个和mian.ts同级，名为shims-vue.d.ts，主要是用于识别vue文件，里面长这样

/* eslint-disable */
declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  const component: DefineComponent<{}, {}, any>
  export default component
}

src下再创建router文件夹，创建文件index.ts，内容

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'

const routes: Array<RouteRecordRaw> = []

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

创建store文件夹，创建文件index.ts,这里就先不写了内容了
然后main.ts引入

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
import router from './router'
import vuex from './store'

const app = createApp(App);
app.use(router);
app.use(vuex);
createApp(App).mount('#app')

开始我是import router from './router/index.ts’这样引入的，结果报错，又是看了webpack搭建那个才知道，直接引入，或者我看网上不加.ts也可以
这时我发现vue文件script部分报警告，原来还要在script标签上加上lang=‘ts’
终于只剩最后一步了，安装scss

npm i sass
npm i sass-loader
npm i node-sass

又报错,原来没有加–save-dev，删除重来

npm i sass --save-dev
npm i sass-loader --save-dev
npm i node-sass --save-dev

启动成功，没报错了，可以使用路由和scss了，搭建完成