创建Vue3.0工程

1.使用 vue-cli 创建

官方文档:创建一个项目 | Vue CLI (vuejs.org)

## 查看@vue/cli版本,确保@vue/cli版本在4.5.0以上
vue --version
## 安装或者升级你的@vue/cli
npm install -g @vue/cli
## 创建
vue create vue_test
## 启动
cd vue_test
npm run serve

 使用vue3需要确保@vue/cli版本在4.5.0以上

参看版本 vue-V

创建Vue3.0工程_第1张图片

创建Vue3.0工程_第2张图片 创建Vue3.0工程_第3张图片 选择Vue3版本

创建Vue3.0工程_第4张图片 然后就等待

创建Vue3.0工程_第5张图片 完成

然后 

$ cd vue3_test
 $ yarn serve 

打开工程看一下

创建Vue3.0工程_第6张图片长的跟Vue2一模一样 

2.使用 vite 创建

官方文档:开始 | Vite 官方中文文档 (vitejs.dev)

vite官网:Home | Vite中文网 (vitejs.cn)

创建Vue3.0工程_第7张图片

什么是vite?—— 新一代前端构建工具。
优势如下:

  • 开发环境中,无需打包操作,可快速的冷启动。
  • 轻量快速的热重载(HMR)。
  • 真正的按需编译,不再等待整个应用编译完成。

传统构建 与 vite构建对比图

创建Vue3.0工程_第8张图片

创建Vue3.0工程_第9张图片

## 创建工程
npm init vite-app 
## 进入工程目录
cd 
## 安装依赖
npm install
## 运行
npm run dev

 兼容性注意

Vite 需要 开始 | Vite 官方中文文档 (vitejs.dev) 版本 14.18+,16+。然而,有些模板需要依赖更高的 Node 版本才能正常运行,当你的包管理器发出警告时,请注意升级你的 Node 版本。

创建Vue3.0工程_第10张图片

 创建Vue3.0工程_第11张图片 创建Vue3.0工程_第12张图片 速度很快,但是它其实跟我们耍一个小聪明,它并没有帮我们安装好依赖包,需要我们自己手动去设置

创建Vue3.0工程_第13张图片 创建Vue3.0工程_第14张图片 这里要注意了,启用文件不是npm run sever 而是 npm run dev

创建Vue3.0工程_第15张图片 启动的页面是这样的

创建Vue3.0工程_第16张图片

 

 

你可能感兴趣的:(前端框架Vue2+Vue3,vue.js,javascript,前端)