系列文章目录

提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加
例如：第一章 vue3安装全家桶教程

文章目录

系列文章目录
一、vue3安装
- 使用 vite 创建（重点推荐）
- 使用 vue-cli 创建
二：项目配置
- 安装vue-route@4
- vuex 配置
- - vite.config.ts 配置
- tsconfig.ts
总结

一、vue3安装

使用 vite 创建（重点推荐）

文档: https://v3.cn.vuejs.org/guide/installation.html
vite 是一个由原生 ESM 驱动的 Web 开发构建工具。在开发环境下基于浏览器原生 ES imports 开发，
它做到了本地快速开发启动, 在生产环境下基于 Rollup 打包。

## 非ts版本
npm init vite-app <project-name>
cd <project-name>
npm install
npm run dev##TS版本
##（小tips:git bash中直接按上下键切换选择自己想要的选项，虽然界面中不会动态展示切换的用户交互过程，但是别担心，在回车后可以看到是切换到了对应选项的）
npm init @vitejs/app <project-name>
##选择vue
##选择vue-ts
npm i

使用 vue-cli 创建

## 安装或者升级
npm install -g @vue/cli
## 保证 vue cli 版本在 4.5.0 以上
vue --version
## 创建项目
vue create my-project

二：项目配置

安装vue-route@4

vue-router@4 只能在 vue3 中使用

npm install vue-router@4

例子
在src下新建一个router文件夹，作为vue-router的配置目录。此目录下再新建index.ts文件，编辑内容如下：

import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
const history = createWebHistory()
const routes: Array<RouteRecordRaw> = [{path: "/",redirect: "/home",},{path: "/home",name: "home",component: () => import("../views/home/index.vue"),},
];
const router = createRouter({history,routes
})
export default router

新建一个views文件夹，作为项目界面开发目录。参考router中的配置可知，在views目录下新建home目录并新建index.vue，编辑文件如下：

<script setup lang="ts">
import { ref } from 'vue'const msg = ref('Hello')
const count = ref(710)
</script><template><h2>{{ msg }}</h2><h2>{{ count }}</h2>
</template><style scoped>
</style>

在main.ts中引入vue-router

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

在App.vue中使用vue-router

<script setup lang="ts">
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
</script><template><router-view />
</template><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>

vuex 配置

npm install vuex@next --save## 增加store

vite.config.ts 配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'// https://vitejs.dev/config/
export default defineConfig({root: process.cwd(),publicDir: 'assets',plugins: [vue()],  // 注册插件server: {open: true},resolve: {alias: {// 如果报错__dirname找不到，需要安装node,执行yarn add @types/node --save-dev"@": path.resolve(__dirname, "src"),"comps": path.resolve(__dirname, "src/components"),}}
})

tsconfig.ts

{"compilerOptions": {"target": "esnext","useDefineForClassFields": true,"module": "esnext","moduleResolution": "node","strict": true,"jsx": "preserve","sourceMap": true,"resolveJsonModule": true,"isolatedModules": true,"esModuleInterop": true,"lib": ["esnext","dom"],"skipLibCheck": true,"baseUrl": "./", /* Base directory to resolve non-absolute module names. */"paths": {"@": ["src"],"@/*": ["src/*"],}, /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */},"include": ["src/**/*.ts","src/**/*.d.ts","src/**/*.tsx","src/**/*.vue"],"references": [{"path": "./tsconfig.node.json"}]
}

总结

强烈推荐vite方式进行创建项目

参考：https://blog.csdn.net/ganle/article/details/120869773

vue3安装全家桶教程相关推荐

ⅰcp经济模型_干货！来自清华小哥哥的全家桶教程——手把手教你在本地构建 Nervos AppChain...
本文作者邱飞旸是一位来自清华的 Nervos 忠实粉丝,他给我们带来了相当详尽的本地搭建 AppChain 全家桶教程,快来一起享用吧! 本文主要定位给对区块链有一定了解的,但是对 Nervos Ap ...
尚硅谷_springcloud(2020新版思维导图_全网最火SpringCloud2020全家桶教程
全网最火SpringCloud2020全家桶教程教程介绍教程重点讲解了SpringCloud各种组件停止更新进入维护阶段后,后续技术组件的升级和替换策略及方案选型,既有传统Eureka.Ribbo ...
一周刷爆LeetCode，算法da神左神（左程云）耗时100天打造算法与数据结构基础到高级全家桶教程，直击BTAJ等一线大厂必问算法面试题真题详解笔记
一周刷爆LeetCode,算法大神左神(左程云)耗时100天打造算法与数据结构基础到高级全家桶教程,直击BTAJ等一线大厂必问算法面试题真题详解笔记教程与代码地址 P1 出圈了!讲课之外我们来聊聊 ...
【IDE】JetBrains全家桶教程系列，学生认证 + 汉化
1.JetBrains全家桶 AppCode:Swift 和 Objective-C IDE CLion :C/C++ IDE DataGrip :数据库客户端 GoLand : Go语言 Intel ...
Vue项目实战——实现一个任务清单【基于 Vue3.x 全家桶（简易版）】
Vue3.x 项目实战(一) 内容参考链接 Vue2.x全家桶 Vue2.x 全家桶参考链接 Vue2.x项目(一) Vue2.x 实现一个任务清单 Vue2.x项目(二) Vue2.x 实现Git ...
Vue3.x全家桶之Vue组件化开发(二)
✍灬更新说明更新时间:2022-1-03 更新内容: Vue2.x 更新至 Vue3.x Demo与文件.截图演示齐全保留了Coderwhy老师Vue2.x的精华部分,添加Vue3.x的内容在V ...
肝！Spring JDBC持久化层框架“全家桶”教程！
目录写在前面一.什么是JdbcTemplate? 二.JdbcTemplate框架搭建 1.导入所需jar包 2.配置JDBC数据源 (1).直接在中配置数据源 (2).引入外部配置文件 3.配置 ...
2023新春版：看这篇大宝典就够了！从零搭建React项目全家桶
React是近年来前端开发领域非常热门的技术框架,其背景是Facebook团队的技术支持,在全球的前端开发市场上占有率很高.结合React丰富的社区资源,可以让项目开发如虎添翼.虽然React的学习门 ...
react全家桶实战（千峰教育）
说明:本笔记为本人基于千锋教育2022版React全家桶教程_react零基础入门到项目实战完整版的学习笔记,知识点不清或不全,可以到视频教程中学习文章目录一.安装create-react-app ...
wpf 360软件管家_软件管家对比及推荐，避免全家桶的坑
大家好,我是海掌柜,一位专注软件分享.执迷互联网技术,认真工作的 90 后.00 前言之前海掌柜曾经推荐意见过软件拆卸软件,但是没有介绍过软件管理软件,今天提供软件管家的独立版,免去了小伙伴们下载 ...

vue3安装全家桶教程