vue3+vite+ts 搭建项目

1、vite项目初始化

我们使用vite来初始化项目，记得初始化的过程选择vue-ts哟，这样我们就能引入ts，后面不用额外单独对他引入

npm init vite@latest

2、vite 配置

配置别名@

（1）安装node依赖
npm i --save-dev @types/node

（2）引入node模块
tsconfig.json
{
  "compilerOptions": {
  ...(省略配置)
    "types": ["node"]
  },
  "include": ...(省略配置)
}

（3）配置@别名
import { defineConfig } from 'vite'
import path from 'path'
export default defineConfig({
  ...(省略配置)
  resolve:{
    alias:{
      '@':path.resolve(__dirname,'src')
    }
  }
})

（4）使用
app.vue

vite 的配置项很多，具体的小伙伴可以到vite官网去看一下https://vitejs.dev/config/，这次我们就配置一下别名。这个别名@的配置有一个小小的坑，也不算是坑，就是要引入path的时候会报错，这可能是我自己对这个不熟，又没有认真看这个提示，就花了点时间才解决这个问题。下面就是解决方案及具体可以看我另外一篇文章。

使用import方式引入的报错提示

image.png

使用require方式引入path的报错提示

image.png

解决方案：

(1)安装node依赖

npm i --save-dev @types/node

(2)配置node模块
在ts.config.js中添加配置"types": ["node"]

image.png

（3）配置别名

resolve:{
    alias:{
      '@':path.resolve(__dirname,'src')
    }
  }

image.png

3、引入sass

（1）安装依赖
npm install --save-dev sass
（2）使用

4、引入ui库

在src目录下创建plugins文件夹，再新建一个element3.ts,用于存放ui库引入的配置

（1）安装依赖
npm i element3 -S

（2）全局引入

src/plugins/element3.ts
 import element3 from 'element3'
 import 'element3/lib/theme-chalk/index.css'
 export default function (app){
    app.use(element3)
 }

main.ts
import element3 from "./plugins/element3";
createApp(App).use(element3).mount('#app')

（3）按需引入

src/plugins/element3.ts
import {ElButton,ElInput} from 'element3'
import 'element3/lib/theme-chalk/button.css'
import 'element3/lib/theme-chalk/input.css'
export default function (app){
    app.use(ElButton)
    app.use(ElInput)
}

main.ts
import element3 from "./plugins/element3";
createApp(App).use(element3).mount('#app')

5、引入vue-router

（1）安装依赖
npm i vue-router@next -S

（2）编写路由配置
src/router/index.ts
import { createRouter,createWebHashHistory } from 'vue-router'

const router = createRouter({
    history:createWebHashHistory(),
    routes:[
        {
            path:'/',
            component:()=> import('../views/home.vue')
        }
    ]
})
export default router

（3）引入
...
import router from "./router";

createApp(App).use(router).mount('#app')

（4）使用
src/views/home.vue






App.vue

6、引入vuex

（1）安装依赖
npm i vuex@next -S

（2）编写vuex属性
src/store/index
import { createStore } from 'vuex'

export default createStore({
    state:{
        count:10
    },
    mutations:{
        add(state){
            state.count++
        }
    }

})

（3）引入
import store from './store'
createApp(App).use(store).mount('#app')

（4）使用
HelloWord.vue
{{$store.state.count}}

7、引入mock

1、安装依赖
npm i  mockjs -S 
npm i vite-plugin-mock -D

2、配置依赖
import { viteMockServe } from 'vite-plugin-mock'
export default defineConfig({
  plugins: [...,viteMockServe()],
})

3、编写mock接口
在根目录新建mock文件夹，新建user.ts文件
export default [
    {
        url: '/api/getUsers',
        method: 'get',
        response: () => {
            return {
                code: 0,
                message: 'ok',
                data: ['Amy','Tim']
            }
        },
    },
]

4、调用接口
Helloworld.vue
fetch('/api/getUsers').then(res=>res.json()).then(data=>{
  console.log(data)
})

5、配置启动项(可选)
    安装依赖
      cnpm i cross-env -D     
     配置(package.json)
    "dev": "cross-env NODE_ENV=development vite"