带薪学习，搭个通用的前端框架vue3+vite+ts

1.全局安装create-vite-app

npm install -g create-vite-app

2.创建项目

// 下面两个命令都可以
create-vite-app vue3-common
cva vue3-common

3.手动安装下依赖包

npm install

package.json 中可以看到依赖非常少，只有 vite 和 @vue/compiler-sfc ，没有 babel，因为 vite 是通过浏览器去解析模块

4. 安装typescript

在src下会有一个文件shims-vue.d.ts，是为了 typescript 做的适配定义文件，因为.vue 文件不是一个常规的文件类型，ts 是不能理解 vue 文件是干嘛的，加这一段是是告诉 ts，vue 文件是这种类型的。

declare module '*.vue' {
  import { defineComponent } from 'vue'
  const component: ReturnType
  export default component
}

ts的详细使用语法，可以看我的这篇文章

小白都能学会的ts入门指南

5.vite.config.ts 配置

根目录下创建 vite.config.ts ，添加配置：

用的是vite打包不是vue-cli 的webpack,api的使用会有些许不同，具体的使用可以查看vite中文官网

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
import viteCompression from 'vite-plugin-compression'
function pathResolve(dir: string) {
    return resolve(__dirname, '.', dir)
}
const proxyTarget = '' // 本地proxy
export default () => {
    return defineConfig({
        plugins: [
            vue(),
            viteCompression({
                algorithm: 'gzip',
                threshold: 10240,
            }),
        ],
        resolve: {
            alias: [
                {
                    find: /^\/@\//,
                    replacement: pathResolve('src') + '/',
                },
                {
                    find: /^\/_img\//,
                    replacement: pathResolve('src/assets/images') + '/',
                },
            ],
        },
        server: {
            port: 8080, // 启动端口
            open: true,
            proxy: {
                '/LOCAL_URL': {
                    target: proxyTarget,
                    changeOrigin: true,
                    rewrite: (p) => p.replace(/^\/LOCAL_URL/, ''),
                },
            },
        },
    })
}

6. 启动项目

npm run dev

比起之前用vue-cli创建的项目，本地启动速度确实有质的飞跃，亲测秒开

1、安装 vue-router@4.0.12

// 查看版本
npm info vue-router versions
// 安装
npm install vue-router@4.0.12

在src下新建router文件

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

const routes: Array<RouteRecordRaw> = [
    {
        path: '/',
        redirect: '/home',
    },
    {
        path: '/home',
        component: () => import('/@/views/home/index.vue'),
    },
    {
        path: '/my',
        component: () => import('/@/views/my/index.vue'),
    },
]
// 开启历史模式
// vue2中使用 mode: history 实现 createWebHistory()
// vue2中使用 mode: hash 实现 createWebHashHistory()
const router = createRouter({
    history: createWebHashHistory(), // 替代之前的 mode，是必须的
    routes,
    scrollBehavior: () => ({ left: 0, top: 0 }),
})

router.beforeEach((to, from, next) => {
    console.log('beforeEach----')
    next()
})

router.afterEach(() => {
    window.scrollTo(0, 0)
})

export default router

在main.ts中注册

import router from '/@/router'
app.use(store)

2、安装vuex@4.0.2

npm install vuex@4.0.2

在src下新建store文件

import { createStore } from 'vuex'

export default createStore({
    state: {},
    mutations: {},
    actions: {},
    modules: {},
})

在main.ts中注册

import store from '/@/store'
app.use(store)

3、安装 element-plus

npm install element-plus

在main.ts中注册

import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'
app.use(ElementPlus, { size: 'small' })

4、main.ts

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'
import App from './App.vue'
import router from '/@/router'
import store from '/@/store'
;(async () => {
    const app = createApp(App)

    app.use(ElementPlus, { size: 'small' })
    app.use(store)
    app.use(router)

    app.mount('#app', true)
})()

其实项目的目录结构、使用方式，和我们熟悉的vue-cli大体相似

Vue 2 和 Vue 3 的区别

90% 的写法完全一致，除了以下几点

• Vue 3 的 Template 支持多个根标签，Vue 2 不支持

• 弃用全局API new Vue ,使用 createApp

• Composition API

• ......