搭建一个Vue3+Ts项目_vue3 创建项目 生成ts

前言：项目使用的技术有Vite+Vue3+Ts+sass+Router+pinia+axios。好了我们开始吧。

一、创建项目

找到你想创建的文件里文件夹里，cmd打开控制面板

npm create vite@latest
1

回车后输入y,再输入你项目的名字
接下来选vue

√ Project name: ... test
? Select a framework: » - Use arrow-keys. Return to submit.
    Vanilla
>   Vue
    React
    Preact
    Lit
    Svelte
1
2
3
4
5
6
7
8

再是选ts回车，就创建完了。

? Select a variant: » - Use arrow-keys. Return to submit.
    JavaScript
>   TypeScript
    Customize with create-vue
    Nuxt
1
2
3
4
5

二、启动项目

开发工具打开项目 npm i 下载依赖，npm run dev就跑起来了。

说个另外的问题，页面有报错，但是不影响项目运行，像这样。鼠标悬停红色波浪线Cannot find module 'vue'. Did you mean to set the 'moduleResolution' option to 'node', or to add aliases to the 'paths' option?

解决方法：找到tsconfig.json文件。"moduleResolution": "node", moduleResolution的值改为node

还有在写ts语法的时候，一些变量名未使用也会报错，解决方法还是找到tsconfig.json文件，把noUnusedLocals的值改为false

三、安装sass

npm install sass -D
1

四、安装 router

npm i vue-router
1

根据图片创建相对应的文件夹路径和文件

login.vue页面

<template>
    <div @click="tologin">登录</div>
    <h3>{{ store.name }}</h3>
    <h4 @click="changName">修改名称</h4>
</template>
<script lang="ts" setup>
import {useStore} from '../../store/index'

import { getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance() as any;

function login(): void {
  router.push({
                  name: 'home'
            })
      // let data = {
      //       roleId: "A",
      //       username: "dpc",
      //       password: "dpc12345",
      //       sysType: "zhfw",
      // }
      // proxy.$post("/login", data).then((response: any) => {
      //       console.log(response)
      //       router.push({
      //             name: 'home'
      //       })
      // })
}
// useRouter()useStore()我用了下面的自动引用所以没import，如果没用那两个插件乖乖import吧
const router = useRouter()
const store = useStore()
function tologin() {
      // router.push({
      //       name: 'home'
      // })
      login()
}
function changName():void{
  store.name = '变化'
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

home.vue页面

<template>
    <div @click="back">返回</div>
</template>
<script lang="ts" setup>
// useRouter()我用了下面的自动引用所以没import，如果没用那两个插件乖乖import吧
const router = useRouter()
function back() {
    router.push({
      name: 'login' 
    })
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12

index.ts

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

export const routes = [
  {
    path: '/',
    redirect: '/login',
  },
  {
    name: 'login',
    path: '/login',
    component: () => import("../views/login/login.vue")
  },
  {
    name: 'home',
    path: '/home',
    component: () => import("../views/home/home.vue")
  }

]

const router = createRouter({
  scrollBehavior: () => ({ left: 0, top: 0 }),
  history: createWebHistory(),
  routes,
})


router.beforeEach((to, from, next) => {
  next()
})

export default router
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

main.ts 配置router

切记app.mount('#app')要在之后，不然会出一些问题的，没错，我就遇到了

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import { createPinia } from 'pinia'
import http from './utils/request.js';
//routes
import router from './router/index'

const app = createApp(App)

app.use(http)
//routes 
app.use(router)
app.use(createPinia())
app.mount('#app')
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

app.vue

<template>
  <router-view></router-view>
</template>` 
1
2
3

五、自动引入组件（看个人喜欢，自行选择要不要引入啦）

我觉这个东西还挺有意思的，两个插件提供自动引入

npm install -D unplugin-vue-components unplugin-auto-import
1

vite.config.ts文件，保存后会自动生成auto-import.d.ts文件+components.d.ts文件

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// import { resolve } from "path";
// 自动导入vue中hook reactive ref等
import AutoImport from "unplugin-auto-import/vite"
//自动导入ui-组件 比如说ant-design-vue  element-plus等
import Components from 'unplugin-vue-components/vite';
 
// https://vitejs.dev/config/
export default defineConfig({
	plugins: [
		vue(),
		AutoImport({
			//安装两行后你会发现在组件中不用再导入ref，reactive等
			imports: ['vue', 'vue-router'],
            //存放的位置
			dts: "src/auto-import.d.ts",
		}),
		Components({
			// 引入组件的,包括自定义组件
            // 存放的位置
            dts: "src/components.d.ts",
		}),
	],
 
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

六、安装pinia

 npm install pinia 
1

在 src 路径创建下 store/index.ts文件，main.ts引入，如上main.ts所示。login.vue页面已经提供测试方法，直接用

import { defineStore, acceptHMRUpdate } from "pinia";

export const useStore = defineStore({
  id: "index",
  state: () => ({
    name: "old name",
  }),
  getters: {
    myName: (state) => {
      return `getters ${state.name}`
    }
  },
  actions: {
    changeName(name: string) {
      this.name = name
    }
  },
});

if (import.meta.hot) {
  import.meta.hot.accept(acceptHMRUpdate(useStore, import.meta.hot))
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

七、安装axios

npm install axios --save
1

在src路径下创建utils/request.ts文件，main.ts引入，如上main.ts所示。login.vue页面已经提供测试方法，直接用
此时应该是调不通的，这就涉及另外的东西了。咱先创建出来，然后自己偷偷解决

/**axios封装
 * 请求拦截、相应拦截、错误统一处理
 */
import axios from 'axios';
import router from '../router/index'
//  let protocol = window.location.protocol; //协议
//  let host = window.location.host; //主机
//  axios.defaults.baseURL = protocol + "//" + host;
axios.defaults.baseURL = '/api'

axios.interceptors.request.use( //响应拦截
  async config => {
    // 每次发送请求之前判断vuex中是否存在token        
    // 如果存在，则统一在http请求的header都加上token，这样后台根据token判断你的登录情况
    // 即使本地存在token，也有可能token是过期的，所以在响应拦截器中要对返回状态进行判断 
    config.headers.token = sessionStorage.getItem('token')
    return config;
  },
  error => {
    return Promise.reject(error);
  })
// 响应拦截器
axios.interceptors.response.use(
  response => {
    if (response.status === 200) {
      return Promise.resolve(response); //进行中        
    } else {
      return Promise.reject(response); //失败       
    }
  },
  // 服务器状态码不是200的情况    
  error => {
    if (error.response.status) {
      switch (error.response.status) {
        // 401: 未登录                
        // 未登录则跳转登录页面，并携带当前页面的路径                
        // 在登录成功后返回当前页面，这一步需要在登录页操作。                
        case 401:
          // 自定义过期之后的操作
          break
        // 403 token过期                
        // 登录过期对用户进行提示                
        // 清除本地token和清空vuex中token对象                
        // 跳转登录页面                
        case 403:
          sessionStorage.clear()
          break
        // 404请求不存在                
        case 404:
          break;
        // 其他错误，直接抛出错误提示                
        default:
      }
      return Promise.reject(error.response);
    }
  }
);
/** 
 * get方法，对应get请求 
 * @param {String} url [请求的url地址] 
 * @param {Object} params [请求时携带的参数] 
 */
const $get = (url: string, params: object) => {
  return new Promise((resolve, reject) => {
    axios.get(url, {
      params: params,
    })
      .then(res => {
        resolve(res.data);
      })
      .catch(err => {
        reject(err.data)
      })
  });
}
/** 
 * post方法，对应post请求 
 * @param {String} url [请求的url地址] 
 * @param {Object} params [请求时携带的参数] 
 */
const $post = (url: string, params: object) => {
  return new Promise((resolve, reject) => {
    axios.post(url, params) //是将对象 序列化成URL的形式，以&进行拼接   
      .then(res => {
        resolve(res.data);
      })
      .catch(err => {
        reject(err.data)
      })
  });
}
// 下面是将get和post方法挂载到vue原型上供全局使用、
// vue2.x中是通 Vue.prototype 来绑定的，像这样Vue.prototype.$toast = Toast。在vue3中取消了Vue.prototype，推荐使用globalProperties来绑定，
export default {
  install: (app: any) => {
    app.config.globalProperties['$get'] = $get;
    app.config.globalProperties['$post'] = $post;
    app.config.globalProperties['$axios'] = axios;
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100