VUE3.0和2.0的区别及项目的搭建

16 篇文章 0 订阅

#VUE3.0和2.0的区别及项目的搭建
在2019.10.5日发布了Vue3.0预览版源码,但是预计最早需要等到 2020 年第一季度才有可能发布 3.0 正式版。
可以直接看 github源码。

标题新版VUE 3.0计划并已实现的主要架构改进和新功能:
编译器(Compiler)
使用模块化架构
优化 “Block tree”
更激进的 static tree hoisting 功能 (检测静态语法,进行提升)
支持 Source map
内置标识符前缀(又名"stripWith")
内置整齐打印(pretty-printing)功能
移除 Source map 和标识符前缀功能后,使用 Brotli 压缩的浏览器版本精简了大约10KB
运行时(Runtime)
速度显著提升
同时支持 Composition API 和 Options API,以及 typings
基于 Proxy 实现的数据变更检测
支持 Fragments (允许组件有从多个根结点)
支持 Portals (允许在DOM的其它位置进行渲染)
支持 Suspense w/ async setup()
目前不支持IE11
List item
3.0 新加入了 TypeScript 以及 PWA 的支持
部分命令发生了变化:
下载安装 npm install -g vue@cli
删除了vue list
创建项目 vue create
启动项目 npm run serve
默认项目目录结构也发生了变化:
移除了配置文件目录,config 和 build 文件夹
移除了 static 文件夹,新增 public 文件夹,并且 index.html 移动到 public 中
在 src 文件夹中新增了 views 文件夹,用于分类 视图组件 和 公共组件
如果:你个人还是很想用之前的创建项目的方式 ,那你则需要安装 (npm install -g @vue/cli-init) 这样就可以像之前一样创建项目 eg: vue init webpack vue-program

npm install -g @vue/cli-init
vue init` 的运行效果将会跟 `vue-cli@2.x` 相同
vue init webpack my-project

项目搭建
第一步安装

npm install -g vue@cli

第二步创建项目文件

vue create project    //项目的名称

1
第三部 选择快捷式安装配置
在这里插入图片描述
在这里插入图片描述

这里如果你是第一次用3.0版本的话,是没有前两个的,而只有最后两个,这里是 让你选的,第一个是默认配置,一般选第二个,自己配置,这里选择最后一个
第四步选择安装依赖
在这里插入图片描述

当你选择后会出现上面图上的东西,这里你可以自由选择用哪些配置,按上下键 选择哪一个,按空格键确定,所有的都选择好后,按enter键进行下一步
第五步 选择css预处理
在这里插入图片描述

在这里插入图片描述
less和sass可以自行选择
第六步 选择自动化代码格式化检测
在这里插入图片描述

第七步是否保存刚才的配置,选择确定后你下次再创建新项目 就有你以前选择的配置了,不用重新再配置一遍了
第八步配置文件放哪
在这里插入图片描述

第一个是放在单独的文件配置
第二个是放在package.json文件
第九步是否将以上这些将此保存为未来项目的预配置
在这里插入图片描述

第十步 回车下载
第十一步启动项目

 npm run serve    
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值