优秀的编程知识分享平台

网站首页 > 技术文章 正文

Vue/CLI Vue脚手架安装及搭建前端项目

nanyue 2024-09-07 16:39:47 技术文章 9 ℃

版本区别

我用个表格详细区分下Vue CLI各个版本的区别:

Vue CLI版本

最新版本

Vue CLI最新更新时间

默认使用Vue版本

Vue最新更新时间

v2

v2.9.3

2018.2.5

v2.5.11

2017.12.15

v3

v3.4.1

2019.2.1

v2.5.22

2019.1.12


v3.5.0

2019.3.6

v2.6.7

2019.2.22

v4

v4.5.15

2021.3.17

v2.6.11

2019.12.14




v3.0.0

2020.9.18

vue-cli3和4区别:

内容区别:dev.to/sfbdev

Vue2和3区别:

搭建的项目结构区别:

vue-cli2

vue-cli3

注意: 1、Vue CLI工具在v2版本从npm下载是使用 npm i -g vue-cli,从v3版本开始vue-cli就会变成 @vue/cli 2、Vue CLI在版本v4.5之后可以除了创建Vue2的项目,还可以创建Vue3.0的项目。

本着新项目用新技术的原则,我们应该用最稳定较新的版本。Vue3因为太过新,所以不使用。

使用Vue2.6是最好选择,但是由于我之前的项目都是Vue2.5的,那么Vue2.5和Vue2.6有哪些区别呢?很影响项目开发吗?

vue2.5和vue2.6区别

vue2.5和vue2.6的区别:www.infoq.cn

  • 新功能:
    • slot新语法,slot性能提升
    • 异步错误处理
    • 动态指令参数
    • 显式创建单独的反应式对象
    • 服务器端渲染期间的数据预取
    • 新 ES 模块构建,可直接导入使用
  • 优化:编译器警告消息中的代码帧
  • 底层
    • 让 nextTick 恢复使用 Microtask
    • 通过 this.$scopedSlots 暴露的函数现在总是返回 Arrays

优点:

  • vue2.6发布时间很久,比较稳定,而且最新更新时间很近,对于新产品scv用2年前的不好
  • vue2.6可以使用最新的脚手架,目录结构更清晰简单
  • vue2.6与vue2.5新增修改的功能不多,用到的很少,还有一些只是底层的改进,用法不变

搭建过程

nodejs的安装

建议:使用14的稳定版本

http://nodejs.cn/download/

安装脚手架

推荐指定的稳定版本:

i === install

npm i -g @vue/cli@4.5.15

会vue3语法可以使用

npm i -g @vue/cli

创建项目:

vue create myprject

选择自定义:

选择需要的功能的使用空格即可

选项含义:

  • Choose Vue version 选择Vue版本
  • Babel 将采用 ES6语法编写的代码转换为ES5
  • TypeScript 支持使用 JavaScript的TypeScript 书写源码。
  • Progressive Web App (PWA) 渐进式网络应用程序支持。
  • Router 支持 vue-router 路由。
  • Vuex 支持 vuex状态管理 。
  • CSS Pre-processors CSS 预处理器。
  • Linter / Formatter 支持eslint格式化。
  • Unit Testing 支持单元测试。
  • E2E Testing 支持 E2E 测试。

cd xxxx (进入创建好的项目)

npm run serve (启动项目)

Tags:

最近发表
标签列表