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插件
- 安装vetur
- 安装 自动闭合标签
二. 创建vue3工程
- 打开vscode进入工程目录下,打开终端,新建工程
vue create 项目名称
- 是否使用淘宝源:
国内就无奈的选择 y 吧
- 创建何种工程
如果使用JavaScript 直接选择第二项就可以了
如果使用typescript 请选择第三项, 手动配置
因为上一步有自行选择vue版本 所以要做一下选择
- 是否选择类类型组件 暂时选否
- 是否使用typescript版的babel? 暂时选否
- 配置代码规范工具 eslint
- 设置保存时进行代码规范 lint
- 上述配置单独写入配置文件还是写入包配置文件?
- 是否把上述配置保存成一个固定配置
- 现在vue cli会自动安装包
安装完成:
- 现在, 我们的工程建好了!
我们可以根据提示进入工程目录,然后运行起来
npm run serve
- vue工程可以访问啦!
App running at:
- Local: http://localhost:8080/
- Network: http://192.168.1.8:8080/
三. 图形界面创建工程
- 打开vscode 进入想创建工程的文件夹, 进入图形界面
vue ui
- 创建工程
- 选择固定工程创建模版
4.选择要安装的功能框架
- 继续配置
- 是否保存为固定工程创建模版?
根据需求设置, 这里我就不用保存了
- 然后, 会创建项目
项目创建完成
四. 项目目录
可以看到和vue2.0基本没有区别, 有一些区别是因为我们使用typescript引起的
五. package.json文件
image.png
六. vue3.0是如何启动的?
这里我们要看的第一个文件是: main.ts
