介绍
在搭建vue3.0之前,我们首先来收悉一下vue3.0相比vue2.0做了那些改进,增加了那些特性。
vue3.0相比vue2.0改进和新特性如下:
1.相比于vue2.0,性能有了明显的提升;(据作者透露有了30%-300%的性能提升)
2.相比于vue2.0,打包体积明显的缩小;采用Tree-shaking support将无用模块剪辑,仅打包需要的,大大降低了打包的体积;
3.暴露了自定义渲染api,增加了可扩展性;
4.底层完全采用typescript重写,可以很好的支持ts;
5.新特性:增加组合式api( composition-api ),是我们可以以一种低侵入式的,更灵活的组合组件的逻辑;
通过上面的简单介绍,能给大家对vue3.0有一个初步的认识,下面正式开始搭建vue3.0项目。
vue3.0项目搭建
1.安装vue-cli3.0
注意:vue3.0必须使用vue-cli3.0等以上版本
在桌面启动cmd命令窗口,执行下面命令,全局安装(可以先卸载之前的vue版本 npm uninstall vue-cli -g )
npm install -g @vue/cli
查看版本
vue -V
2.开始vue3.0的项目创建
2.1.以搭建一个项目名称为my_test的Vue前端项目为例
vue create my_test
2.2. 根据项目提示进行相应的配置方式(以Manually select features手动配置为例)
2.3.根据项目需要选择一些特性,比如此处我们选择需要Babel编译、使用Vue路由、Vue状态管理器、CSS预处理器、以及单元测试,暂时不考虑端到端测试(E2E Testing)) 注意:通过上下键切换,空格键选中的方式进行选择
2.4.选择vue版本,此处选择vue 3.x
2.5.路由采用模式,这里采用历史模式
2.6.选择CSS预处理器语言,此处选择Sass/SCSS
2.7.配置Eslint代码规范,此处选择Standard
2.8.选择何时进行代码检测,此处选择在保存时进行检测
2.9.选择单元测试解决方案,此处选择 Jest
2.10.选择 Babel、PostCSS、ESLint等配置文件存放位置,此处选择单独保存在各自的配置文件中
2.11.是否保存当前配置作为下次创建项目的模板,这里选择n,等待一会儿加载依赖,项目创建完成
3.测试项目是否创建成功
3.1 进入项目,启动项目
$ cd my
$ npm run serve
3.2 启动成功,打开浏览器访问,效果如下
文章标签: vue3.0项目搭建vue3.0特性