Vue3+TypeScript系列笔记

1.创建Vue3工程

1.1基于vue-cli创建项目 (传统webpack项目)

目前vue-cli已处于维护模式，官方推荐基于vite创建项目

# 查看@vue/cli版本，确保@vue/cli版本在4.5.0以上
vue --version 或者 vue -V

# 安装或升级@vue/cli
npm install -g @vue/cli

# 执行创建命令
vue create 输入项目名

# 以下为vue控制台选项
choose a version of Vue.js that you want to start the project will (Use arrow keys)
> 3.x
  2.x

# 选择3.x

如果控制台选项是下面这种

选择default([Vue 3] babel,eslint)或者Manually select features自行进行配置

1.2基于vite创建项目(推荐)

# 执行创建项目命令
npm create vue@latest

项目名称不要出现中文和特殊字符

最好采用纯小写的字母+数字+下划线去组成

上图仅为示例，组件可以按需引入

2.使用Visual Studio Code打开项目并安装插件

使用vs code打开项目文件夹后，发现项目未有代码高亮显示以及代码提示

需在vs code的插件库内搜索Vue-Official插件进行安装

3.分析vue3的主要项目结构

一个 Vue 3 项目可能还会包含其他一些目录和文件，如测试文件、配置文件等，具体的目录结构可能会因项目的实际需求和配置而有所不同

详细对以下常用目录或文件进行解释

.vscode：vscode插件配置文件，如果vscode内没有下载对应的插件，会通过此目录下的extensions.json文件进行提示

node_modules：项目依赖目录，通过npm install下载的项目依赖包都会放在此目录下

public：脚手架的根目录，此目录包含了不需要经过构建就可以直接使用的静态资源

src：源代码目录，是vue3项目开发的主要工作目录

目录中可能包含以下子目录和文件

• assets：资源文件目录，存放项目中需要导入的静态资源，例如图片
• components：组件目录，存放一些比根组件和页面组件小的功能组件
• views：页面组件目录，存放页面级别的Vue组件
• router：路由目录，存放路由配置，配合实现页面跳转
• store：Vuex状态管理目录，存放Vuex状态管理的相关文件
• App.vue：Vue3项目的根组件
• main.ts或main.js：Vue3项目入口文件中所引入的ts文件(在《使用编写第一个Vue页面》文章中会进行具体分析文件的作用)
• index.html：Vue项目的入口文件

此vue3+typeScript系列笔记会不定时，持续进行更新，欢迎进行关注
[超详细]npm更换下载源
[Windows环境]nvm工具的介绍和安装
nvm工具的常用命令
Vue3项目解决运行时无NetWork地址的问题