使⽤Vue3+vite+TypeScript项⽬创建步骤
项⽬搭建
1//yarn的下载vite⽅式
2yarn create vite-app <projectName>
3//or
4//npm的下载vite⽅式
5npm init vite-app <projectName>
6
7//以上⽅式⾃⾏选择即可
如果已经全局安装过旧版本的vue-cli，先卸载。
1yarn global remove vue-cli
2//or
3npm uninstall vue-cli -g
安装新版的@vue/cli
1yarn global add @vue/cli
2//or
3npm install -g @vue/cli
4
5//检查下vue版本号
6vue -V
7
8//创建项⽬
9vue create <projectName>
备注：
vite 是⼀个由原⽣ESM驱动的Web开发构建⼯具，打开 vite 依赖的 package.json 可以发现在 devDependencies 开发依赖⾥⾯已经引⼊了TypeScript ，甚⾄还有 vuex , vue-router , less , sass 这些本地开发经常需要⽤到的⼯具。vite 轻量，开箱即⽤的特点，满⾜了⼤部分开发场景的需求，作为快速启动本地 Vue项⽬来说，这是⼀个⾮常完美的⼯具。
vue-cli
vue3 的更新怎么能少得了 vue-cli 呢， vue-cli 更强调的是⽤ cli 的⽅式进⾏交互式的配置，选择起来更加灵活可控。丰富的官⽅插件适
配，GUI的创建管理界⾯，标准化开发流程，这些都是 vue-cli 的特点。
选择⼿动选择功能Manually select features
备注：想要预装什么，就⼿动check什么（即使前期忘记勾选，后期也可以加装）。
1? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
2( ) Babel //转码器，可以将ES6代码转为ES5代码，从⽽在现有环境执⾏。
3( ) TypeScript// TypeScript是⼀个JavaScript（后缀.js）的超集（后缀.ts）包含并扩展了 JavaScript 的语法，需要被编译输出为 JavaScript在浏览器运⾏，⽬前较少⼈再
⽤
4( ) Progressive Web App (PWA) Support// 渐进式Web应⽤程序
5( ) Router // vue-router（vue路由）
6( ) Vuex // vuex（vue的状态管理模式）
7( ) CSS Pre-processors // CSS 预处理器（如：less、sass）
8( ) Linter / Formatter // 代码风格检查和格式化（如：ESlint）
9( ) Unit Testing // 单元测试（unit tests）
10( ) E2E Testing // e2e（end to end）测试
例如：忘记使⽤选择 TypeScript 也没事，加⼀⾏cli命令就⾏了
1vue add typescript
最后，别忘了在 .vue 代码中，给 script 标签加上 lang=“ts”
1<script lang="ts">
vite
1. 创建
1yarn create vite-app <projectName>
2//or
3npm init vite-app <projectName>
4
5//进⼊
6cd projectName
7//安装依赖
8yarn install
9//启动
10yarn dev
访问：
上图可以看到新建的项⽬结构与vue-cli4创建的项⽬结构基本⼀样，都是App.vue和main.js
查看main.js⽂件内容
1import { createApp } from 'vue'
2import App from './App.vue'
3import './index.css'
4
5createApp(App).mount('#app')
发现创建Vue的⽅式变了，原来是new Vue来初始化Vue，但在Vue3.0中，修改为了通过createApp的⽅式；
配置
1、安装typescript
1yarn add typescript -D
2、初始化 tsconfig.json
1//执⾏命令初始化 tsconfig.json
2npx tsc --init
3、将main.js修改为main.ts
其他的引⽤也修改为main.ts，也需要将其他页⾯的<script>修改为<script lang="ts">
4、配置 ts 识别vue⽂件，在项⽬根⽬录添加shim.d.ts⽂件添加以下内容
1declare module "*.vue" {
2import { Component } from "vue";
3const component: Component;
4export default component;
5}
配置
Vue Router 4.0 ，变化请查看中完整的细节，
⽬前版本beta: v4.0.12, yarn 进⾏安装需要带上版本号
1、安装vuex
1yarn add vue-router@4.0.12
2// or
3yarn add vue-router@next
2、安装完后配置vue-router 在项⽬src⽬录下⾯新建router⽬录，然后添加index.ts⽂件，添加以下内容1// import VueRouter from 'vue-router'
2import {createRouter, createWebHashHistory} from 'vue-router'
3const routes:any = []
4// Vue-router新版本中，需要使⽤createRouter来创建路由
5export default createRouter({
6// 指定路由的模式，此处使⽤的是hash模式
7history: createWebHashHistory(),
8routes // short for `routes: routes`
9})
10
11// const routes :any = []
12// // 3. Create the router instance and pass the `routes` option
13// // You can pass in additional options here, but let's
14// // keep it simple for now.
15// const router = ateRouter({
16// // 4. Provide the history implementation to use. We are using the hash history for simplicity here.
17// history: ateWebHashHistory(),
18// routes, // short for `routes: routes`
19// })
3、将router引⼊到main.ts中，修改main.ts⽂件
1import { createApp } from 'vue'
2import App from './App.vue'
3import './index.css'
4import router from './router/index'
5
6// import router 后创建并挂载根实例。
7const app = createApp(App)
8// 确保 t_use_ 实例来创建router, 将路由插件安装到 app 中
9app.use(router)
11// createApp(App).mount('#app')
配置
Vuex 4.0 ，变化请查看
⽬前版本beta: v4.0.2
1、安装vuex
1yarn add vuex@4
2//或者
3yarn add vuex@next
2、安装完后配置vuex 在项⽬src⽬录下⾯新建store⽬录，并添加index.ts⽂件，添加以下内容
1import { createStore } from 'vuex'
2
3interface State {
4userName: string
5}
6export default createStore({
7state(): State {
8return {
9userName: "vuex",
10};
11},
12});
配置
具体使⽤⽅式请参考：
1、引⼊ant-design-vue
1yarn add ant-design-vue@next
2、在main.ts中引⼊
1import { createApp } from 'vue'
2import App from './App.vue'
3import './index.css'
4import AntDesignVue from 'ant-design-vue'; 5import 'ant-design-vue/dist/antd.css';
6import router from './router/index'
7import store from './store/index'
8
9// import router 后创建并挂载根实例。
10const app = createApp(App)
11// 确保 t_use_ 实例来创建router
12// 整个应⽤程序路由器感知。
13app.use(router)
antdesignvue 表格合计
14app.use(store)
15app.use(AntDesignVue)
17// createApp(App).mount('#app')

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。