3分钟教你创建一个vite+ts+vue3的脚手架2022年。

官方地址

vite官网

vite的介绍

Vite是Vue作者尤雨溪又一个备受关注的开源项目，它是一个前端构建工具，可类比Webpack。它主要解决了传统bundle-base

vite 概念 Vite 是一个面向现代浏览器的一个更轻、更快的 Web 应用开发工具 它基于 ECMASCRIPT 标准原生模块系统 （ES Modules）实现

解决webpack 开发阶段 devServer 冷启动时间过长，HMR 热更新反应速度慢的问题；能够显著提升前端开发体验

Vite 特性

闪电般的冷启动速度，即时热模块更换，真正的按需编译，开箱即用

vite和webpack的区别及优势

vite 优点

webpack服务器启动速度比vite慢
由于vite启动的时候不需要打包，也就无需分析模块依赖、编译，所以启动速度非常快。当浏览器请求需要的模块时，再对模块进行编译，这种按需动态编译的模式，极大缩短了编译时间，当项目越大，文件越多时，vite的开发时优势越明显
vite热更新比webpack快
vite在HRM方面，当某个模块内容改变时，让浏览器去重新请求该模块即可，而不是像webpack重新将该模块的所有依赖重新编译；
vite使用esbuild(Go 编写) 预构建依赖，而webpack基于nodejs, 比node快 10-100 倍

vite 缺点

生态不及webpack，加载器、插件不够丰富
打包到生产环境时，vite使用传统的rollup进行打包，生产环境esbuild构建对于css和代码分割不够友好。所以，vite的优势是体现在开发阶段
没被大规模重度使用，会隐藏一些问题
项目的开发浏览器要支持esmodule，而且不能识别commonjs语法

安装命令

创建一个文件夹

npm create vite@latest

回车选择 vue

回车选择 vue-ts

创建成功 cd 到根文件夹(vite-project)里面

创建vuex

在src里面新建 store文件夹创建 index.ts 文件

import {
    
     createStore } from "vuex";
export default createStore<any>({
    
    
    state: {
    
    }, // 数据源存放地
    getters: {
    
    }, // vuex 的计算属性
    mutations: {
    
    }, // 操作state数据的方法
    actions: {
    
    }, // 用来做异步操作发送请球
    modules: {
    
    }, // 模块化vuex
    plugins: [], // 使用插件的地方
    // 开启严格模式
    strict:true
})

main.ts 文件

import {
    
     createApp } from 'vue'
import App from './App.vue'
import store from './store'// 引入
createApp(App).use(store).mount('#app') // 使用

配置路由

在src下面创建一个 view 文件 在里面创建一个 index.vue home.vue 文件 文件里面要写如内容

index.vue文件 的内容 还有一个 home.vue （自己创建）

<template>
  <div class="wrap-box">首页</div>
</template>

<script lang="ts" setup>
import {
    
    
  ref,
  reactive,
  toRefs,
  computed,
  onMounted,
  watchEffect,
  watch,
} from "vue";
import {
    
     useRoute, useRouter } from "vue-router";
import {
    
     useStore } from "vuex";
const store = useStore();
const route = useRoute();
const router = useRouter();
const data = reactive({
    
    
  // 数据源的存放地
});
onMounted(() => {
    
    
  // 初始化渲染
});
</script>

<style lang="scss" scoped>
.wrap-box {
    
    
}
</style>

在src里面新建 router文件夹创建 index.ts 文件

import {
    
     createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
import HomeView from '../view/index.vue'

const routes: Array<RouteRecordRaw> = [
  {
    
    
    path: '/',
    name: 'index',
    component: HomeView,
  },
  {
    
    
    path: '/home',
    name: 'home',
    component: () => import('../view/home.vue')
  }
]

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

export default router

在main.js文件里面引入

import {
    
     createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
createApp(App).use(store).use(router).mount('#app')

清除vite自带的文件

找到 App.vue 写入

<template>
  <!-- 入口显示路由 -->
  <router-view></router-view>
</template>
<script setup lang="ts"></script>

<style>
* {
    
    
  padding: 0;
  margin: 0;
}
li {
    
    
  list-style: none;
}
</style>

components 清除 HelloWorld.vue 文件 （如果没有引入HelloWorld.vue 文件 还是显示引入了重新启动）

tsconfig.json 文件夹写入

{
    
    
  "compilerOptions": {
    
    
    "target": "esnext",
    "useDefineForClassFields": true,
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "lib": ["esnext", "dom"]  ,
    "baseUrl": ".", 
    "paths": {
    
     
        "@/*": ["src/*"]
    }
  },    
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{
    
     "path": "./tsconfig.node.json" }]
}

vite.config.ts 文件夹

import {
    
     defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import {
    
     resolve } from 'path'
// https://vitejs.dev/config/
export default defineConfig(({
    
     command, mode }): any => {
    
    
  // 如果是command:serve|build
  // mode:development | production
  const BASE_URL = command === 'serve' ? '/' : '/'

  return {
    
    
    // 自定义全局变量
    define: {
    
    
      'process.env.BASE_URL': `"${
      
      BASE_URL}"`
    },
    plugins: [vue()],
    // 设置路径别名
    resolve: {
    
    
      alias: {
    
    
        "@": resolve(__dirname, 'src'),
      },
      extensions: ['.js', '.json', '.ts', '.vue'] // 使用路径别名时想要省略的后缀名，可以自己 增减
    }
  }
})

package.json 文件夹下载依赖

{
    
    
  "name": "yiyun-shop",
  "private": true,
  "version": "0.0.0",
  "scripts": {
    
    
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    
    
    "@kangc/v-md-editor": "^2.3.14",
    "axios": "^0.26.1",
    "element-plus": "^2.1.4",
    "vue": "^3.2.25",
    "vue-router": "^4.0.14",
    "vuex": "^4.0.2"
  },
  "devDependencies": {
    
    
    "@types/node": "^17.0.22",
    "@vitejs/plugin-vue": "^2.2.0",
    "sass": "^1.32.7",
    "sass-loader": "^12.0.0",
    "typescript": "^4.5.4",
    "vite": "^2.8.0",
    "vue-tsc": "^0.29.8"
  }
}

执行 npm i 把依赖下载好

完成

npm run dev 执行即可

总结

Vite，就像刚出来的M1芯片Mac,都说好，但是一开始买的人不多，担心生态问题，后面都说真香

相信vue3作者的大力支持下，vite即将大放异彩！

我已经在我自己项目的生产环境中，开始使用vite!