Vue + TypeScript 实战（一）项目搭建

Yushia-Lin

已于 2022-04-27 09:30:34 修改

阅读量4.2k

点赞数 4

分类专栏： Vue + TypeScript 实战文章标签： vue 前端 typescript chrome devtools

于 2022-04-14 00:01:12 首次发布

本文链接：https://blog.csdn.net/shrimp6/article/details/124160123

版权

Vue + TypeScript 实战专栏收录该内容

6 篇文章 6 订阅

订阅专栏

1、环境准备

1.1 Node.js

（1）下载安装

官网： https://nodejs.org/en/ （双击下载文件，一路 next 即可）

注：推荐下载最新稳定版

安装完成后分别输入命令 node -v 和 npm -v 查看 node 版本与 npm 版本

C:\Users\Administrator>node -v
v12.17.0

C:\Users\Administrator>npm -v
6.14.4

（2）npm存在的缺点

速度慢：npm 按照队列执行安装每个 package，只有当前 package 安装完成之后，才会进行后面的安装。
同一个项目，npm 安装的时候无法保持一致性，由于 package.json 文件中版本号的特点，下面三个版本号在安装的时候代表不同的含义：

"5.0.3",  //安装指定的5.0.3版本
"~5.0.3", //安装5.0.X中的最新版本
"^5.0.3"  //安装5.X.X中的最新版本

npm 安装的时候，一个包抛出错误，npm 会继续下载安装包，而且因为 npm 会把所有的日志输出到终端，有关错误包的错误信息就会淹没在 npm 打印的警告中，你甚至不会发现错误的产生。

所以推荐使用另一个命令 yarn

（3）yarn

安装

npm install -g yarn

查看 yarn 对应版本

yarn -v

yarn的优点

速度快，主要来自以下两个方面：

并行安装：无论 npm 还是Yarn在执行包的安装时，都会执行一系列任务。npm 是按照队列执行每个 package，也就是说必须要等到当前package安装完成之后，才能继续后面的安装。而 Yarn 是并行执行所有任务，提高了性能。

离线模式：如果之前已经安装过一个软件包，用Yarn再次安装时之间从缓存中获取，就不用像npm那样再从网络下载了
安装版本统一：精准的版本控制（yarn.lock文件），加上验证每个包的完整性，保证每次安装的npm包完全一致
更简洁的输出：结合了 emoji直观且直接地打印出必要的信息，也提供了一些命令供开发者查询额外的安装信息。

1.2 安装 Vue-Cli

npm install -g @vue/cli

安装完成后，使用命令 vue --version 查看 vue-cli 的版本号，默认最新版本

查询所有vue/cli版本包

npm view @vue/cli versions

指定一个版本并安装

npm install -g @vue/cli@4.5.17

1.3 vue-devtools

vue-devtools 是一款基于 chrome 浏览器的插件，用于调试 vue 应用，这可以极大地提高我们的调试效率。接下来我们就介绍一下 vue-devtools 的安装。

安装方式：

方式一：chrome 商店直接安装

vue-devtools 可以从 chrome 商店直接下载安装

方式二：手动安装

① 找到 vue-devtools 的 github 项目，并将其 clone 到本地

   git clone https://github.com/vuejs/vue-devtools.git

② 在文件夹下执行npm install ，安装项目所需要的 npm 包

    npm install

③ 编译项目文件

npm run build

④ 添加至 chrome 浏览器

浏览器输入地址" chrome://extensions/ " 进入扩展程序页面点击 " 加载已解压的扩展程序… "按钮，选择 vue-devtools>shells 下的 chrome 文件夹。

如果看不见 “ 加载已解压的扩展程序… ” 按钮，则需要勾选 “ 开发者模式 ”。

方式三：提供一个 4.1.4 版本的下载地址

链接：https://pan.baidu.com/s/1B1QhnXBvVLnuSFrnDYbs5A

提取码：rq9c

提示

打开 chrome 的扩展程序，将下载的文件拖进去，就可以安装了。

安装成功如下图

在这里插入图片描述

使用

安装后, 需要关闭浏览器, 再重新打开, 才能使用

浏览器打开 vue 项目后, 按 F12, 选择 vue 就可以使用了.vue 是数据驱动的, 这样就能看到对应数据了, 方便我们进行调试

2、初始化工程

2.1 创建工程

在本地创建一个文件夹（目录）用于存放这个项目前端的所有代码，在命令行（CMD、Terminal）中进入该目录，执行命令：

Project Name 根据自己需要命名

vue create <Project Name> //文件名 不支持驼峰（含大写字母）

回车后，按照如下步骤进行有关选择

2.2 具体操作步骤

使用上下键切换选项,按空格选择，回车确认选择

1. 选择一个 preset（预设）

在这里插入图片描述
我选择后者，手动选择配置

2. 选择基础配置

在这里插入图片描述
我选择 Babel、TypeScript、Router、Vuex、CSS Pre-processors、Linter / Formatter

3. 选择vue版本

在这里插入图片描述我选择 2.x

4. 选择是否使用类样式组件

在这里插入图片描述

5. 是否使用babel编译TS

在这里插入图片描述

6. 选择router模式，router是否使用history模式

在这里插入图片描述
现在无论使用 history 或 hash 都行，反正后面可以修改。我选择no（hash 模式）

7. 选择 CSS 预处理器

在这里插入图片描述

由于 Element-UI 采用 SCSS 作为 CSS 预处理器，我习惯使用 Sass/SCSS (with dart-sass) ，选择第一项。

8. 选择 ESLint 的配置

在这里插入图片描述
我选择标准配置：ESLint + Standard config。建议一定要开启 ESLint！！

9. 选择检测的触发点

在这里插入图片描述
建议选择 Lint on save, 保存时校验。

10. 选择配置文件的存放方式

在这里插入图片描述
我选择第一个，放在独立的配置文件中

11. 是否将刚才的设置保存为预设

在这里插入图片描述
这个都可以，如果保存了，以后会在最开始的选择预设中出现你预设的这一项，就可以直接运行

2.3 搭建完成

耐心等待创建代码并自动安装默认的依赖，完成后会显示如下提示：

在这里插入图片描述
根据提示，进入项目目录并执行 yarn serve，执行完后如下：

在这里插入图片描述
根据地址，打开 http://localhost:8080 即进入项目，如下图

在这里插入图片描述

3、目录结构

node_modules 第三⽅包存储⽬录
public 静态资源⽬录，任何放置在 public ⽂件夹的静态资源都会被简单的复制，⽽不经过 webpack
- favicon.ico 浏览器标签页图标
- index.html 单页面
src 源文件
- assets 公共资源⽬录，放图⽚等资源
- components 公共组件⽬录
- router 路由相关模块
- store 容器相关模块
- views 路由⻚⾯组件存储⽬录
- App.vue *根组件，最终被替换渲染到 index.html ⻚⾯中 #app ⼊⼝节点
- main.ts 整个项⽬的启动⼊⼝模块
- shims-tsx.d.ts ⽀持以 .tsc 结尾的⽂件，在 Vue 项⽬中编写 jsx 代码
- shims-vue.d.ts 让 TypeScript 识别 .vue 模块
.browserslistrc 指定了项⽬的⽬标浏览器的范围。这个值会被 @babel/preset-env 和 Autoprefixer ⽤来确定需要转译的 JavaScript 特性和需要添加的 CSS 浏览器前缀
.editorconfig EditorConfig 帮助开发⼈员定义和维护跨编辑器（或IDE）的统⼀的代码⻛格
.eslintrc.js ESLint 的配置⽂件
.gitignore Git 的忽略配置⽂件，告诉Git项⽬中要忽略的⽂件或⽂件夹
babel.config.js Babel 配置⽂件
package-lock.json 记录安装时的包的版本号，以保证⾃⼰或其他⼈在 npm install 时⼤家的依赖能保证⼀致
package.json 包说明⽂件，记录了项⽬中使⽤到的第三⽅包依赖信息等内容
README.md 说明⽂档
tsconfig.json TypeScript 配置⽂件