创建node、vue、以及@vuecli 和 vue-cli 的区别

创建node、vue、以及@vue/cli 和 vue-cli 的区别

创建vue的五种方法

参考

如何创建一个vue项目（详细步骤）

方法一：vue init webpack 项目名（vue-cli2.x的初始化方式）
vue init webpack blog 创建项目(blog 是项目名)方法二：vue create 项目名 （vue-cli3.x的初始化方式）
脚手架 vue-cli3.x 创建的 vue3 项目是基于 webpack 打包的。
vue create system 创建项目 (system 是项目名)方法三：npm init vue@latest 
npm init vue@latest 创建的 vue3 项目是基于 Vite 打包的。方法四：构建一个 Vite + Vue 项目
npm 版本不同，命令不同：
npm6.x：npm create vite@latest my-vue-app --template vue
npm7.x+：npm create vite@latest my-vue-app -- --template vue方法五：基于图形化界面的方式创建 vue 项目 （vue ui）（vue-cli3.x） 
@vue/cli3.0 增加一个可视化项目管理工具，全局安装完成 cli3.0 之后，可以直接在 cmd 输入命令：vue ui 启动即可，地址默认是 localhost:8000 ( 回车后打开 )

nodejs运行vue2

参考：

nodejs运行vue项目

1、下载nodejs

官网：Node.js

LTS Recommended For Most Users（下图是我下载的版本）

2、下载后压缩包

img

3、开始安装

安装很简单，默认下一步，就可以了（中间可选择安装路径）

4、安装后判断是否安装成功 及环境变量配置

node -v ; npm -v (一般新的node安装自带npm包管理器，集成在node中)，环境变量一般安装完，自动填充的

5、以上完成后，需安装镜像

（由于有些npm有些资源被屏蔽或者是国外资源的原因，经常会导致用npm安装依赖包的时候失败，所以需要npm的国内镜像—cnpm）

命令：npm install -g cnpm --registry=http://registry.npm.taobao.org

6、npm安装vue-cli

命令：cnpm install -g vue-cli （命令中 -g 表示全局安装）

7、创建vue项目

（分两种情况：已有项目和新建项目）

 1、创建新项目：
命令：vue init webpack myKms（使用webpack模板构建项目）2、已有项目，则无需创建（而我是已有项目：git更新的代码项目 git clone 项目地址）

8、开始运行项目：进入项目所在路径，进行安装，运行

命令：cnpm install

9、运行项目，页面可以启动啦

命令：npm run dev

10、项目打包

命令：npm run build

最后项目文件里多了dist(正是我要的包)

## 查看@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

详叙 @vue/cli 和 vue-cli

重点参考：

详叙 @vue/cli 和 vue-cli

Vue CLI

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。

vue-cli 工具的初衷就是为了让开发者能够开箱即用快速地进行应用开发而开发的，它秉承的是“约定大于配置”思想，简单说就是”能不配置的就不配置，你就按照我的方式来，也不要去争论这个好不好，快速进行业务开发才是正经事”。他们不建议你去配置，但也不会拦着你去配置。另外 Webpack 对初学者并不是十分友好，‘又长又臭’的配置，普通开发者很难写入定义良好，性能优化的配置。不然就不会各种 cli 工具冒出来了，比如parcel，create-react-app。这些工具都宣称零配置，目的就是让开发者能够愉快的进行代码开发。

Vue CLI 提供：

· 通过 @vue/cli 实现的交互式的项目脚手架，会随本版本进行迭代更新(社区更好)。

· 通过 @vue/cli + @vue/cli-service-global 实现的零配置原型开发。

· 一个运行时依赖 (@vue/cli-service)，该依赖：

  • 可升级；
  • 基于 webpack 构建，并带有合理的默认配置；
  • 可以通过项目内的配置文件进行配置；
  • 可以通过插件进行扩展。

· 一个丰富的官方插件集合，集成了前端生态中最好的工具。

· 一套完全图形化的创建和管理 Vue.js 项目的用户界面。

· Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。与此同时，它也为每个工具提供了调整配置的灵活性，无需 eject。

· 提供了本地测试服务器(vue-cli提供了一套本地的node测试服务器，使用vue-cli自己提供的命令，就可以启动服务器)，集成打包上线方案，还有一些优点，包括：模块化，转译，预处理，热加载，静态检测和自动化测试等。

@vue/cli 和 vue-cli 的区别

1、npm 包名发生改变，vue-cli为2.x版本时vue的脚手架，@vue/cli为3.x版本的脚手架。

2、vue 2 创建项目 vue init webpack 。vue 3 创建项目 vue create 。CLI 2 可以选择根据模板初始化项目，而 CLI 3 并未重新开发使用模板， 如果开发者想要像 CLI 2 一样使用模板初始化项目，可全局安装一个桥接工具@vue/cli-init。同时 CLI 3的 name 也不能使用驼峰命名，它还支持 vue ui 通过图形化界面创建。

3、启动项目 由npm run dev （2）改成 npm run serve（3）。

4、生成的 vue 项目目录的命名、目录结构改变。 项目结构更简单，文件变少，结构更清晰 。

  • vue 3 移除了配置文件目录 config 和 build 文件夹。CLI 3 也隐藏了 webpack 配置文件。如果需要自定义配置，需要自己新建vue.config.js文件。同时vue.config.js支持webpack-chain写法，可以更加方便。

  • vue 3移除了 static 静态资源文件夹，新增 public 文件夹，静态资源转移到public目录中，通过/xx.xx可以直接访问，并且 index.html 移动到 public 中。

  • vue 3 在 src 文件夹中新增了 views 文件夹，用于分类 视图组件 和 公共组件。

  • vue 3 安装项目时会自动下载node-model文件夹

5、Vue-cli 所生成的项目中，是把 webpack 的配置也一起放到了项目的配置文件中了。@vue/cli 所生成的项目中，它会把关于项目的webpack配置隐藏起来，并且它会抛出一个配置文件让开发者去做定制化。@vue/cli的好处在于，如果当脚手架中的一些配置官方进行更新，那么开发者更新起来就不会这么麻烦，并且官方也希望开发者，如有需要可以通过配置文件的方式去定制他们各自的需求，使用了 webpack merge 进行了合并。

具体区别可以参考官网文档：https://cn.vuejs.org

使用 webpack 创建 vue-cli2.x 项目和 vue-cli3.x 项目的区别
在这里插入图片描述

@vue/cli 的优势：

vue-cli 2.x更像一个模板拷贝器，所有webpack配置和构建命令都是耦合在具体的项目里面，package.json会包含一大堆开发依赖。而@vue/cli才算一个构建CLI，它的优势在于开箱即可用。

  • 打包速度：
    vue-cli 3 是基于 webpack 4 打造，启动打包速度更快，vue-cli 2 还是 webapck 。

  • 抽离cli service层

    CLI 服务 (@vue/cli-service) 是一个开发环境依赖。它是一个 npm 包，局部安装在每个 @vue/cli 创建的项目中。分离了vue-cli-service之后，项目构建更新只是一个命令的事情，除非做了很多特殊化操作。特殊化操作应该封装到vue-cli的插件中。

    CLI 服务是构建于 webpack 和 webpack-dev-server 之上的。它包含了：

     加载其它 CLI 插件的核心服务。CLI: 即vue全局命令，主要用于项目创建和管理，包含了vue create、vue ui这些提供快速项目创建及功能选择的vue命令行工具命令。CLI命令的做的事情比较少，所以更新不会太频繁(开发者也很少会去更新这些命令)。

    ​ Service层: 负责项目的实际构建，也就是webpack项目构建。这一块是频繁更新的，一般作为项目的局部依赖。webpack配置这一块对于一个项项目的业务开发人员来说，是无需关心及维护的。一个针对绝大部分应用优化过的内部的 webpack 配置；项目内部的 vue-cli-service 命令，提供 serve、build 和 inspect 命令。

  • 插件化：

    • CLI 插件是向你的 Vue 项目提供可选功能的 npm 包，例如 Babel/TypeScript 转译、ESLint 集成、单元测试和 end-to-end 测试等。Vue CLI 插件的名字以 @vue/cli-plugin- (内建插件) 或 vue-cli-plugin- (社区插件) 开头，非常容易使用。当你在项目内部运行 vue-cli-service 命令时，它会自动解析并加载 package.json 中列出的所有 CLI 插件。

vue-cli 的插件机制很灵活，相比create-react-app, vue-cli是在太仁慈了。通过webpack-chain和webpack-merge可以实现webpack完全定制化。如果你要做深度的vue-cli定制化，不建议直接写在vue.config.js中，而是封装在插件中，独立的维护这个插件，然后项目再依赖这个插件。这样就可以简化升级的成本和复杂度。

  • GUI界面： 虽然大部分人都觉得作用不大，因为确实对开发效率并实际的提升效果。就是看着舒服直观，这就够了。

  • 快速原型开发：vue-cli3 支持直接将一个 vue 文件跑起来。打开速度提升，这里的优化有默认开启了多核构建、缓存。

  • 现代模式：给先进的浏览器配合先进的代码(ES6之后),同时兼容旧版本的浏览器，先进的代码不管从文件体积还是脚本解析效率都有较高的提升。现代模式可以提供一个只面对现代浏览器的版本，和一个旧浏览器的回退版本，可以使用 vue-cli-service build --modern执行，启用该模式会自动构建两个版本的 js 包，针对支持现代浏览器的原生 ES2015+ 包，和针对其他旧浏览器的包，生成的 HTML 会通过

vue-cli2 的搭建

vue 脚手架版本目前有2,3,4.不管搭建哪个版本的脚手架，首先都需要安装node。

node安装成功之后，然后检测一下之前是否安装过脚手架vue-cli,检测方法是输入命令vue -V或者vue --version如果能看到版本号说明之前安装过脚手架，

全局安装webpack和脚手架:继续在窗口里输入以下命令:1.npm install webpack -g2.npm install -g vue-cli也可以安装指定版本的脚手架，命令行执行如下:如果是安装3以下版本的脚手架，命令npm install -g vue-cli@版本号如果是安装3以上版本的脚手架，命令npm install -g @vue/cli@版本号

@vue/cli3 的搭建

1.安装node,方法也是node官网下载安装。2.命令npm install -g @vue/cli 和命令npm install webpack -g3.vue create project // project是项目名称4.第3步执行回车后就让我们选择模板:在这里插入图片描述default (babel, eslint): 默认配置，只有Babel和eslint，其他的都要自己另外再配置Manually select features: 手动配置这里我们选择手动配置，也就是选择Manually这个

使用 @vue/cli 的优势：

  • vue-cli 3 是基于 webpack 4 打造，启动打包速度更快，vue-cli 2 还是 webapck 3。
  • 项目结构更简单，文件变少，结构更清晰。
    • 移除了配置文件目录 config 和 build 文件夹，如果需要自定义配置，需要自己新建vue.config.js文件
    • 移除了 static 静态资源文件夹，新增 public 文件夹，静态资源转移到public目录中，通过/xx.xx可以直接访问，并且 index.html 移动到 public 中
    • 新增 .browserslistrc 文件，指定了项目的目标浏览器的范围，用来确定需要转译的 JavaScript 特性和需要添加的 CSS 浏览器前缀，可以理解为浏览器兼容。
    • 新增 babel.config.js 替代原先的.babelrc，具备和原先.babelrc一样的作用
  • 使用 vue create 时，选项简化，启动项目 由npm run dev 改成 npm run serve
  • @vue/cli 遵循工具(tooling)最佳实践，并将这些最佳做法作为 Vue apps 的默认配置 Preset Webpack 配置
  • ES2017 和 Babel 7 开箱即用的支持
  • 出色的 CSS 支持，包括 SCSS 和 PostCSS 支持
  • 许多集成选项（TypeScript，PWA，Web components，点对点测试，Jest等）
  • 提供了 vue ui 命令，通过可视化界面来使用 GUI 安装和管理插件（当然也可以通过vue add plugin添加插件），例如使用 iView 按需引入的时候，可以直接在可视化界面中安装 vue-cli-plugin-iview，则可以实现按需引入
  • 在 2.x 版本里，不管数据多大，都会在一开始就为其创建观察者。当数据很大时，这可能会在页面载入时造成明显的性能压力。3.x 版本，只会对「被用于渲染初始可见部分的数据」创建观察者，而且 3.x 的观察者更高效
  • 3.0 新加入了 TypeScript 以及 PWA 的支持

监测机制

3.0 将带来一个基于 Proxy 的 observer 实现，它可以提供覆盖语言 ( JavaScript） 全范围的响应式能力，消除了当前 Vue 2 系列中基于 Object.defineProperty 所存在的一些局限，这些局限包括：

对属性的添加、删除动作的监测； 对数组基于下标的修改、对于 .length 修改的监测； 对 Map、Set、WeakMap 和 WeakSet 的支持

编译器

Vue 3.0与编译器相关的代码编译将会有一个大的提升，用一句话概括为：“摇树友好”的输出；更多的 AOT 优化；更良好的解析错误；支持 source map。

如果采用的是支持“摇树优化”的打包器，模板中使用到的那些可选特性，在生成的代码中将通过 ES的模块语法导入；而在打包后的文件中，那些没用到的可选特性就会被“摇掉”。 由于新的虚拟 DOM 实现所带来的提升，我们可以执行一些更加高效的编译耗时优化，如静态树提升(static tree hoisting)、静态属性提升(static props hoisting)；以及为运行时提供一些来自编译器的提示，以此避开子组件的规范过程 (children normalization)；提供VNode 快速创建路径等等。 解析器重写，以便在对模板进行编译发生错误时，可以提供错误发生的位置信息；除此之外还可以带来对模板的 source map支持；还可以支持第三方工具如 eslint-plugin-vue 和 IDE 的语言服务 (language services) 特性。

IE 11兼容

新的代码库目前只针对主流浏览器，而且我们假定他们都支持 ES2015。但是，哎，我们也知道在可预见的未来还有很多用户仍然需要支持 IE11。除了 Proxy 外，大多数 ES2015 的特性都可以用转译或者垫片的方式在 IE11 中使用。我们的计划是另外单独实现一个具有同样 API 的替代性 observer，不过是基于老式的 Object.defineProperty API；然后再通过单独构建一个使用这个实现的 Vue 3.x 版本 (build) 进行发布，不过这个单独的版本还是会有 Vue 2.x 在变动探测方面所存在的问题，所以它其实并不是一个完全兼容 3.x 的一个版本。我们也意识到这会给第三方库的作者们带来某些不便，因为他们需要考虑两个不同版本之间的兼容性问题，不过当我们真的推进到那个阶段时，那时我们肯定会确保提供一份清晰的指导。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/162974.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

疯狂堆料！技嘉钛雕Z790 AORUS PRO X主板图赏

疯狂堆料！技嘉钛雕Z790 AORUS PRO X主板图赏

技嘉推出了钛雕Z790 AORUS PRO X主板。 现在这款新品已经来到了我们评测室，下面为大家带来图赏。 技嘉钛雕Z790 AORUS PRO X主板采用新一代超耐久显卡插槽，约58KG承重能力、内衬保护显卡PCB。 其采用1812相供电设计，4根双通道DDR5内存插槽&am…
阅读更多...
开源情报之领英人脸情报收集，如何快速收集上亿张人脸情报

开源情报之领英人脸情报收集，如何快速收集上亿张人脸情报

一.前言 先看应用例子： 残忍至极！乌克兰用人脸识别战死俄军，联系母亲打“心理战” 情报机构，所掌握的数据，可以是市面上流出的任何数据，比如市面上泄露的领英数据，facebook，twitter&…
阅读更多...
Kylin麒麟系统下安装人大金仓

Kylin麒麟系统下安装人大金仓

虚拟机在线安装 install open-vm-tools-desktop -y 简要介绍 人大金仓数据库管理系统KingbaseES（简称：金仓数据库或KingbaseES）是北京人大金仓信息技术股份有限公司自主研制开发的具有自主知识产权的通用关系型数据库管理系统。金仓数据库主…
阅读更多...
YOLOv7改进：动态蛇形卷积（Dynamic Snake Convolution），增强细微特征对小目标友好，实现涨点 | ICCV2023

YOLOv7改进：动态蛇形卷积（Dynamic Snake Convolution），增强细微特征对小目标友好，实现涨点 | ICCV2023

💡💡💡本文独家改进：动态蛇形卷积（Dynamic Snake Convolution），增强细长微弱的局部结构特征与复杂多变的全局形态特征，对小目标检测很适用 Dynamic Snake Convolution | 亲测在多个数据集能够实现大幅涨点 收录： YOLOv7高阶自研专栏介绍： http://t.csdnimg.…
阅读更多...
Operator 开发实践 四 （WebHook）

Operator 开发实践 四 （WebHook）

1. WebHook介绍 我们知道访问Kubernetes API有好几种方式，比如使用kubectl命令、使用client-go之类的开发库、直接通过REST请求等。不管是一个使用kubectl的真人用户，还是一个Service Account，都可以通过API访问认证，这个过程官网…
阅读更多...
【Java学习之道】JDBC API介绍与使用方法

【Java学习之道】JDBC API介绍与使用方法

引言 对于初学者来说，数据库编程可能听起来有些复杂，但实际上，只要你掌握了JDBC（Java Database Connectivity）API，就可以轻松地连接和操作数据库。本章将为你详细介绍JDBC API的概念、使用方法以及一些实际…
阅读更多...
zabbix触发器与动作

zabbix触发器与动作

一、触发器（Trigger） 1、概念： 在 Zabbix 中，触发器用于监测 Zabbix 监控系统中的各种指标和条件，并在特定条件满足时触发警报。（触发器用于定义监控项的报警阈值） 2、触发器对象&#xff1a…
阅读更多...
chatglm配置

chatglm配置

推荐看这个链接，有些问题解决出处https://zhuanlan.zhihu.com/p/643824521 以及这个https://blog.csdn.net/weixin_40547993/article/details/131775275 1.需要pytorch2.0，所以CUDA推荐11.8 ChatGLM2-6B版本要装PYTORCH2.0，而且要2.0.1 &a…
阅读更多...
檀香香料经营商城小程序的作用是什么

檀香香料经营商城小程序的作用是什么

檀香香料有安神、驱蚊、清香等作用，办公室或家庭打坐等场景，都有较高的使用频率，不同香料也有不同效果，高品质香料檀香也一直受不少消费者欢迎。 线下流量匮乏，又难以实现全消费路径完善，线上是商家增长必…
阅读更多...
Python|Pyppeteer获取去哪儿酒店数据(20)

Python|Pyppeteer获取去哪儿酒店数据(20)

前言 本文是该专栏的第20篇，结合优质项目案例持续分享Pyppeteer的干货知识，记得关注。 本文以去哪儿为例，笔者将详细介绍使用pyppeteer获取去哪儿的酒店数据。如果对pyppeteer的使用以及知识点不太熟悉的同学，可往前查看本专栏前面介绍的pyppeteer知识点。 接下来，我们言…
阅读更多...
web前端基础CSS------美化页面“footer”部分

web前端基础CSS------美化页面“footer”部分

一&#xff0c;实验代码 <!DOCTYPE html> <html><head><meta charset"utf-8"><title>关于我们</title><style type"text/css">#footer{margin: 10px 0px;background: #f5f5f5;border: top 1px solid #eee ;}#f…
阅读更多...
Electron webview 内网页 与 preload、 渲染进程、主进程的常规通信 以及企业级开发终极简化通信方式汇总

Electron webview 内网页 与 preload、 渲染进程、主进程的常规通信 以及企业级开发终极简化通信方式汇总

Electron 嵌入的页面中注入的是 preload.js 通过在标签中给 prelaod赋值&#xff0c;这里提到了 file://前缀&#xff0c;以及静态目录 static 怎么获取 实际代码&#xff0c;其中__static就是我们存放静态文件的地方&#xff0c;这个 static 是 electron 源代码根目录下的文件…
阅读更多...
Linux开发工具：vim的介绍和用法及其简单配置

Linux开发工具：vim的介绍和用法及其简单配置

前言 Vim 简介. 编辑. Vim是从 vi 发展出来的一个文本编辑器。. 代码补全、编译及错误跳转等方便编程的功能特别丰富&#xff0c;在程序员中被广泛使用&#xff0c;和Emacs并列成为类Unix系统用户最喜欢的文本编辑器。. [1] vim的设计理念是命令的组合。. 用户学习了各种各样的…
阅读更多...
《深入理解java虚拟机 第三版》学习笔记一

《深入理解java虚拟机 第三版》学习笔记一

第 2 章 Java 内存区域与内存溢出异常 2.2 运行时数据区域 Java 虚拟机在执行 Java 程序的过程中会把它所管理的内存划分为若干个不同的数据区域。这些区域有各自的用途&#xff0c;以及创建和销毁的时间&#xff0c;有的区域随着虚拟机进程的启动而一直存在&#xff0c;有些…
阅读更多...
解决Github Markdown图片显示残缺的问题

解决Github Markdown图片显示残缺的问题

title: 解决Github Markdown图片显示残缺的问题 tags: 个人成长 categories:杂谈 在Github存放Markdown文档&#xff0c;如果图片没有存放在Github服务器上&#xff0c;github会尝试生成Github图片缓存&#xff0c;使用Github图片缓存&#xff0c;进行实际的展示。但比较蛋疼的…
阅读更多...
PHP 智能物业管理系统mysql数据库web结构apache计算机软件工程网页wamp

PHP 智能物业管理系统mysql数据库web结构apache计算机软件工程网页wamp

一、源码特点 PHP 智能物业管理系统是一套完善的web设计系统&#xff0c;对理解php编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。 PHP小区物业管理系统1 代码 https://download.csdn.net/download/qq_41221322/88444…
阅读更多...
Git——解决 TortoiseGit 提示 No supported authentication methods available 错误

Git——解决 TortoiseGit 提示 No supported authentication methods available 错误

快速导航 问题描述解决方案步骤1 打开Git 的 Settings窗口步骤2 选择Network步骤3 选择安装目录usr\bin 下的 ssh.exe 文件 问题描述 git 推送&#xff08;push&#xff09;后提示No supported authentication methods available 错误 解决方案 步骤1 打开Git 的 Settings窗…
阅读更多...
MySQL——七、MySQL备份恢复

MySQL——七、MySQL备份恢复

MySQL 一、MySQL日志管理1、MySQL日志类型2、错误日志3、通用查询日志4、慢查询日志5、二进制日志5.1 开启日志5.2 二进制日志的管理5.3 日志查看5.4 二进制日志还原数据 二、MySQL备份1、备份类型逻辑备份优缺点 2、备份内容3、备份工具3.1 MySQL自带的备份工具3.2 文件系统备…
阅读更多...
数据分析入门

数据分析入门

B站&#xff1a;01第一课 数据分析岗位职责和数据分析师_哔哩哔哩_bilibili 一、岗位&#xff1a;数据分析师 Q1 数据分析师在公司做什么工作&#xff1f; 数据来源于公司核心业务&#xff0c;通过监测业务健康度来确定业务的健康状况&#xff1b; 通过对用户精细化分析&am…
阅读更多...
Java面试题总结（二）：Java多线程

Java面试题总结（二）：Java多线程

文章目录 1.进程和线程的区别&#xff0c;进程间如何通信2. 什么是线程上下文切换3.什么是死锁4.死锁的必要条件5.Synchronized和lock的区别6.什么是AQS锁?7.为什么AQS使用的双向链表&#xff1f;8.有哪些常见的AQS锁9.sleep()和wait()的区别10.yield()和join()区别11.线程池七…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023