vite 搭建 Vue3.0项目

vite 搭建 Vue3.0项目

  • vue3.0+TS+AntDesignVue项目
    • vite
      • 初始化vite项目
    • 配置项目
      • 配置typescript
      • 配置Vue Router
      • 配置Vuex
      • 配置Ant Design Vue

vue3.0+TS+AntDesignVue项目

vite

vite是尤大大在今年新鼓捣出来的一个工具
为什么尤大大要推出vite,在使用webpack的时候,每次开发启动项目都比较慢,而且热更新也比较慢,而vite的主要特点就是快,官网对于vite的特点是这样描述的

1、快速的冷启动
2、即时的模块热更新
3、真正的按需编译

初始化vite项目

1、初始化项目,可以打开git bash; win电脑也可以直接cmd打开窗口
执行下面命令

yarn create vite-app 
//我用的yarn,如没安装需要安装yarn

下图 Done in 15.39s. 执行完也是快 ;vite 搭建 Vue3.0项目_第1张图片
2、cd 进入目录即可;
3、执行安装依赖 yarn install ; 通过yarn dev 启动项目;下图是在vscode启动
vite 搭建 Vue3.0项目_第2张图片
上图可以看到新建的项目结构与vue-cli4创建的项目结构基本一样,都是App.vue和main.js
查看main.js文件内容

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'

createApp(App).mount('#app')

发现创建Vue的方式变了,原来是new Vue来初始化Vue,但在Vue3.0中,修改为了通过createApp的方式;
Vue3中文文档

配置项目

配置typescript

1、安装typescript

yarn add typescript -D

2、初始化 tsconfig.json

//执行命令 初始化 tsconfig.json 
npx tsc --init     

3、将main.js修改为main.ts
其他的引用也修改为main.ts,也需要将其他页面的

你可能感兴趣的:(typescript,vue.js,vue.js,typescript,javascript)