跟技术胖学vue3.0(typescript版)(一) 环境搭建 , 工程创建 , 工程结构

vue3.0终于来了, 下面我们开始愉快的尝鲜吧!!!

vue3官方网站 : https://v3.vuejs.org/

vue3.0 B站发布会:https://www.bilibili.com/video/BV1iA411J7cA?from=search&seid=2979047174353974296

vue3.0 新特性

• vue3.0 向下兼容vue2.0
• 性能提升了很多
• 使用composition API解决复杂代码的封装问题
• 加入了新的api
• 对typescript对支持更好了!(源代码就是用typescript开发的)

一. 环境搭建

1.搭建mac环境

1.安装 homebrew

我的mac是安装了homebrew https://brew.sh/
安装方法: (需前置安装xcode)

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

2. 安装 nodejs

brew install nodejs

3. 安装 cnpm(非必需)

nodejs默认安装了npm包管理工具, 但npm对天朝网络来说连接缓慢.可能需要科学的上网方法
或者,使用国内源代替
如果你使用npm 无问题, 可以跳过此步骤

npm install -g cnpm --registry=https://registry.npm.taobao.org

如果没有安装cnpm, 之后的命令都要用npm代替cnpm

4.安装webpack

cnpm install webpack -g

5. 安装vue cli

cnpm install -g @vue/cli

安装完后使用vue --version查看版本

2. 搭建Windows环境

3. 搭建linux环境

4. 配置vscode插件

1. 安装vetur

2. 安装 自动闭合标签

二. 创建vue3工程

1. 打开vscode进入工程目录下,打开终端,新建工程

vue create 项目名称

2. 是否使用淘宝源:

国内就无奈的选择 y 吧

3. 创建何种工程

如果使用JavaScript 直接选择第二项就可以了
如果使用typescript 请选择第三项, 手动配置

因为上一步有自行选择vue版本 所以要做一下选择

4. 是否选择类类型组件 暂时选否

5. 是否使用typescript版的babel? 暂时选否

6. 配置代码规范工具 eslint

7. 设置保存时进行代码规范 lint

8. 上述配置单独写入配置文件还是写入包配置文件?

9. 是否把上述配置保存成一个固定配置

10. 现在vue cli会自动安装包

安装完成:

11. 现在, 我们的工程建好了!

我们可以根据提示进入工程目录,然后运行起来

npm run serve

12. vue工程可以访问啦!
    App running at:

• Local: http://localhost:8080/
• Network: http://192.168.1.8:8080/

三. 图形界面创建工程

1. 打开vscode 进入想创建工程的文件夹, 进入图形界面

vue ui

2. 创建工程

3. 选择固定工程创建模版

4.选择要安装的功能框架

5. 继续配置

6. 是否保存为固定工程创建模版?

根据需求设置, 这里我就不用保存了

7. 然后, 会创建项目

项目创建完成

四. 项目目录

可以看到和vue2.0基本没有区别, 有一些区别是因为我们使用typescript引起的

五. package.json文件

image.png

六. vue3.0是如何启动的?

这里我们要看的第一个文件是: main.ts