Vite创建Vue3项目之Typescript + Vuex + Vue-router

项目构建

• 使用 npm

npm init @vitejs/app

• 使用yarn

yarn create @vitejs/app

基础知识

1、项目风格

• 文件名 大小写、单复数 都根据自己的编码风格定义，或根据预定俗成的规则选择

• 在Vue项目中使用$Import$ 关键字导入组件时文件名字必须转换成小写，避免热更新失效

• 编码的格式化风格和语法检测大多会借助其它插件

• 不知道你看没看过官方Vue有个代码风格指南 点击官网，

• 其中有些错误的代码风格可能会带来未知的错误所以官方除了个 风格语法检测插件eslint-plugin-vue点击官网

  • Eslint 进入官网 ： 主要用于语法检测 ，配置文件 .eslintrc.js 和 .eslintignore 过滤检测文件类型

  • Prettire 进入官网 ：主要用于美化代码格式

Idea 开发工具 可以配置Prettire插件

---

2、别名配置

我看到过很多不一样的别名配置都可以使用，选一个自己喜欢的即可，没必要纠结于此。

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import {resolve} from "path";

export default defineConfig({
    resolve: {
        alias: {
            "@": resolve(__dirname, "src")，
        }
    },
    plugins: [vue()],

})

---

3、TypeScript 文件识别别名配置

添加属性 tsconfig.json

{
  "compilerOptions": {
	// .....
	"baseUrl": ".",
    "paths": {
      "@/*": [
        "src/*"
      ]
   }
  }
}

---

4、xxx.d.ts 类型文件说明

因为 ts 是强类型的 js语言集合，如果不通过ts的语法检测会报错。 但是并不会影响系统的执行
这种类型文件在Ts中非常常见，是类型文件 ，所以项目通常会配置node 环境的类型文件环境

# 
npm install @types/node -D

在我们项目中因为使用的是TypeScript 所以避免不了要手写这样的文件，所以通常我们都会新建一个文件夹专门存放

• 新建文件夹src/ types/ * 建在哪里都可以，你能找到就行

5、配置自定义xxx.d.ts 类型文件

路径从根目录出发，如果你的文件夹创建在 src目录下则不需要配置, Vite已经配置好了
所以我一般就会配置在src 文件下当做全局类型文件

---

6、在我们开发项目时也会使用的其它Vite插件, 这里推荐几个

插件名字	功能	说明
unplugin-vue-components使用说明	Vue 的按需组件自动导入	使用组件时不需要import
vite-plugin-svg-icons	用于生成 svg 精灵图。
@vitejs/plugin-vue-js	jsx、tsx
vite-plugin-mock	虚拟数据生成	可以反馈给浏览器数据的mock
…	还有打包压缩等插件就不列举了	自己找吧

集成 Vuex 和 Vue-router

1、环境搭建

#  @next  最新版本
npm install vuex@next --save

npm install  vue-router@next --save

---

2、Vuex入口，增添文件 src/ store/ index.ts

import {createStore} from 'vuex'

const store = createStore({
    state: {},
    getters:{},
    mutations: {},
    actions: {},
})
export default store

---

3、Vue-router入口 ，增添文件 src/ router/ index.ts

import {createRouter, createWebHashHistory, RouteRecordRaw} from "vue-router"

const routes:Array<RouteRecordRaw> = [
    {
        path: '/',
        name: 'Login',
        component: () => import('../views/Login.vue')
    },
    {
        path: "/404",
        name: "NotFound",
        component: () => import("../views/404.vue")
    },
    {
        path: "/:pathMatch(.*)*",
        redirect:"/404"

    },
]

const router = createRouter({
    history: createWebHashHistory(),
    routes
})

export default router;

---

4、将Vuex和router注册到全局，修改文件 src/ main.ts

import { createApp } from 'vue'
import App from './App.vue'
import router from "./router"
import store from "./store"

const app=createApp(App)；
app.use(store)
	.use(router)
	.mount('#app')

集成 Less | Sass 样式预处理器

官网介绍：Vite 也同时提供了对 .scss, .sass, .less, .styl 和 .stylus 文件的内置支持。
没有必要为他们安装特定的 vite 插件如less-loader、scss-loader等，但相应的预处理器依赖本身必须安装

---

1、环境搭建

# .less  
npm install -D less

# .scss and .sass
npm install -D sass

# .styl and .stylus
npm install -D stylus

2、添加全局样式文件， src/ style/ vars.less

预留空白根据自己需要填写

---

3、配置，修改根目录下文件 vite.config.ts

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import {resolve} from "path";

export default defineConfig({
    base: "./",
    resolve: {
        alias: {
            "@": resolve(__dirname, "./src")
        }
    },
    css: {
        preprocessorOptions: {
        	// scss | less | ...
            less: {
                // 全局样式，存放一些主题等变量
                additionalData: `@import "./src/style/vars.less";`
            }
        }
    },
    plugins: [vue()],
})

我不是前端人员有错误希望指正