技术分享
首页
  • JavaScript

    • 构造函数和原型
    • Cookie和Session
    • Object.create(null)和{}
    • TypeScript配置
    • typescript入门到进阶
  • 框架

    • Vue-Router
    • React基础入门
  • 其它

    • Http协议
    • 跨域问题总结
  • 分析Promise实现
  • Axios源码分析
  • Webpack原理
  • vueRouter源码分析
  • Vue

    • Vite快速搭建Vue3+TypeScript项目
    • Cordova打包Vue项目的问题
    • Vue将汉字转为拼音,取出首字母
    • h5项目问题总结
  • JavaScript

    • new Function
  • 后端

    • Node.js中使用Crypto生成Token
    • Body-Parser处理多层对象的问题
  • 其它

    • 项目Demo汇总
    • Vuepress+Vercel搭建个人站点
    • 项目中能用到的
    • husky规范代码提交
  • Mongoose基础
  • Multer文件上传中间件的使用
  • JavaScript

    • 浅谈两数全等
    • JavaScript进制转换
    • 手写bind,apply,call和new
  • 算法

    • 数组去重和排序
    • 数组扁平化
    • 斐波那契数列
  • JavaScript 数据结构
  • 其它

    • webpack面试题
    • vite面试题
    • svg和canvas的优缺点
    • TypeScript面试题
    • Vue常见面试题
  • 计算机网络

    • 数据链路层
    • 网络层
  • Git的使用
  • Nginx的使用
  • CentOS7安装Nginx
  • 正则表达式
  • SEO搜索引擎优化
  • Serverless介绍
友链
GitHub (opens new window)

刘誉

总有人要赢,为什么不能是我
首页
  • JavaScript

    • 构造函数和原型
    • Cookie和Session
    • Object.create(null)和{}
    • TypeScript配置
    • typescript入门到进阶
  • 框架

    • Vue-Router
    • React基础入门
  • 其它

    • Http协议
    • 跨域问题总结
  • 分析Promise实现
  • Axios源码分析
  • Webpack原理
  • vueRouter源码分析
  • Vue

    • Vite快速搭建Vue3+TypeScript项目
    • Cordova打包Vue项目的问题
    • Vue将汉字转为拼音,取出首字母
    • h5项目问题总结
  • JavaScript

    • new Function
  • 后端

    • Node.js中使用Crypto生成Token
    • Body-Parser处理多层对象的问题
  • 其它

    • 项目Demo汇总
    • Vuepress+Vercel搭建个人站点
    • 项目中能用到的
    • husky规范代码提交
  • Mongoose基础
  • Multer文件上传中间件的使用
  • JavaScript

    • 浅谈两数全等
    • JavaScript进制转换
    • 手写bind,apply,call和new
  • 算法

    • 数组去重和排序
    • 数组扁平化
    • 斐波那契数列
  • JavaScript 数据结构
  • 其它

    • webpack面试题
    • vite面试题
    • svg和canvas的优缺点
    • TypeScript面试题
    • Vue常见面试题
  • 计算机网络

    • 数据链路层
    • 网络层
  • Git的使用
  • Nginx的使用
  • CentOS7安装Nginx
  • 正则表达式
  • SEO搜索引擎优化
  • Serverless介绍
友链
GitHub (opens new window)
  • 项目 Demo 汇总
  • node中使用crypto生成token
  • new Function
  • body-parser处理多层对象的问题
  • Vite快速搭建Vue3+TypeScript项目
    • 先放几张效果图
    • 初始化项目
    • 安装 vue-router,vuex
      • vue-router
      • vuex
    • 安装 element-plus
      • 按需引入
    • 写在最后
  • Cordova打包Vue项目的问题
  • Vue将汉字转为拼音,取出首字母
  • 项目中能用到的
  • Vuepress+Vercel搭建个人站点
  • husky规范代码提交
  • h5项目问题总结
  • vue动态换行,行末省略
  • mocks项目复盘
  • 项目
coderly
2021-03-04

Vite快速搭建Vue3+TypeScript项目

# vite 快速搭建 Vue3 + TypeScript 项目

参考链接:https://zhuanlan.zhihu.com/p/348959109

今年 2 月份,vite 出了 2.x 版本,抱着学一学的心态决定出个简单的项目,结合 element-plus,以及将会成为每位前端必会的 typescript,实现了如下内容。为了能帮到每一位想学习的开发者,代码已开源于 GitHub 上

# 先放几张效果图

源码地址:https://github.com/coderlyu/vite-frontend-template(创作不易,欢迎点颗 star 再走)

  • 💡 Vue 3.x
  • ⚡️ Typescript
  • 🛠️ Vite 2.x
  • 📦 Vuex 4.x
  • 🔩 Vue-Router 4.x
  • 🔑 Md5 And Sign Provide Transmission For Website Security
  • 👍 Mock In Development
  • 🔖 Iconfont And Svg
  • 🔍 Element-plus UI
  • 📌 And More...
图片 图片 图片 图片 图片

# 初始化项目

创建项目

yarn create @vitejs/app <project-name>

# 或者
npm init @vitejs/app <project-name>
1
2
3
4

以博主这个项目为例:文件名为 vite-frontend-template

npm init @vitejs/app vite-frontend-template
1

此时按下回车,可以看到以下页面,博主选择的是 vue-ts(上下键可以切换选择的模板),按下回车之后会给你一个配置好了typescript 的 vite 配置模板
图片

之后

  cd vite-frontend-template
  npm install
  npm run dev
1
2
3

就可以看到项目模板运行之后的样子,本地访问 http://localhost:3000/
图片

# 安装 vue-router,vuex

npm i vue-router@next vuex@next
1

# vue-router

在 src 目录下新建 router/index.ts

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import HelloWorld from '../components/HelloWorld.vue'
const routes: Array<RouteRecordRaw> = [
  {
    path: '',
    redirect: (_) => {
      return { path: '/home' }
    },
  },
  {
    path: '/home',
    name: 'HelloWorld',
    component: HelloWorld,
  },
  {
    path: '/about',
    name: 'About', // route level code-splitting // this generates a separate chunk (about.[hash].js) for this route // which is lazy-loaded when the route is visited.
    component: () =>
      import(/* webpackChunkName: "About" */ '../components/About.vue'),
  },
  {
    path: '/:currentPath(.*)*', // 路由未匹配到,进入这个
    redirect: (_) => {
      return { path: '/404' }
    },
  },
]
const router = createRouter({
  history: createWebHistory(''),
  routes,
  scrollBehavior(to, from, savedPosition) {
    return {
      el: '#app',
      top: 0,
      behavior: 'smooth',
    }
  },
})
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
33
34
35
36
37
38
39

在 src 目录下再新建一个 components/About.vue 文件,内容如下:

<template>
  <h1>{{ msg }}</h1>
</template>
<script lang="ts">
  import { defineComponent } from 'vue'
  export default defineComponent({
    name: 'About',
    data() {
      return {
        msg: 'About Page',
      }
    },
    setup() {},
  })
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# vuex

在 src 目录下创建 store/index.ts

import { InjectionKey } from 'vue'
import { createStore, Store } from 'vuex'

export interface State {
  count: number;
}

export const key: InjectionKey<Store<State>> = Symbol()

export const store =
  createStore <
  State >
  {
    state() {
      return {
        count: 0,
      }
    },
    mutations: {
      increment(state) {
        state.count++
      },
    },
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

最后修改下 App.vue

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <router-view />
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import HelloWorld from './components/HelloWorld.vue'
export default defineComponent({
  name: 'App',
  components: {
    HelloWorld
  }
})
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

运行之后,你可以看到如下页面http://localhost:3000/home
图片

about 页面 http://localhost:3000/about
图片

# 安装 element-plus

npm install element-plus --save
1

# 按需引入

修改 main.ts

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

import { ElButton } from 'element-plus'

const app = createApp(App)

app.component(ElButton.name, ElButton)

app.use(store, key)
app.use(router)
app.mount('#app')
1
2
3
4
5
6
7
8
9
10
11
12
13
14

样式按钮引入可以使用插件 vite-plugin-style-import

  • 安装 npm i vite-plugin-style-import -D
  • 修改 vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import styleImport from 'vite-plugin-style-import'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    styleImport({
      libs: [
        {
          libraryName: 'element-plus',
          esModule: true,
          resolveStyle: (name) => {
            return `element-plus/lib/theme-chalk/${name}.css` // 按需引入样式
          },
        },
      ],
    }),
  ],
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

在 About.vue 页面使用

<template>
  <h1>{{ msg }}</h1>
  <el-button type="primary">element-plus按钮</el-button>
</template>
<script lang="ts">
  import { defineComponent } from 'vue'
  export default defineComponent({
    name: 'About',
    data() {
      return {
        msg: 'About Page',
      }
    },
    setup() {},
  })
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

此时访问 http://localhost:3000/about,可以看到按钮已经出来了
图片

# 写在最后

目前 vue3.x 的生态环境在不断完善,使用 vite 开发时,可以在npm上搜 vite-,里面还是有很多能用的 vite 插件,比如vite-plugin-mockit,vite-svg-loader ...
图片

  • 同时可以多关注 vue3.x 官网 https://v3.vuejs.org/guide/introduction.html
  • vuex4.x 官网:https://next.vuex.vuejs.org/
  • vue-router4.x 官网:https://next.router.vuejs.org/guide/
  • vite2.x 官网:https://vitejs.dev/config/

博主学习的时候也是翻这些内容去学习,如果有心的话,上面的代码,大部分都可以在这些官网里面找到。
源码地址:https://github.com/coderlyu/vite-frontend-template

#Vite#Vue#TypeScript
上次更新: 2021/08/08, 11:10:19
body-parser处理多层对象的问题
Cordova打包Vue项目的问题

← body-parser处理多层对象的问题 Cordova打包Vue项目的问题→

最近更新
01
代码片段
04-22
02
koa全家桶
03-29
03
mocks项目复盘
03-29
更多文章>
Theme by Vdoing | Copyright © 2021-2022 coderly | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式