zl程序教程

您现在的位置是:首页 >  其他

当前栏目

Vue cli ,2与3

2023-04-18 16:08:57 时间

一 CLI是什么意思?

  • CLI是Command-Line Interface,翻译为命令行界面俗称脚手架.
  • Vue CL是一个官方发布vue.js项目脚手架,使用vue-cli可以快速搭建Vue开发环境以及对应的webpack配置.

二 vue cli使用前提

  • node安装(npm顺带着就安装了)
  • webpack安装
    • Vuejs官方脚手架工具就使用了webpack模板口对所有的资源会压缩等优化操作
    • 它在开发过程中提供了一套完整的功能,能够使得我们开发过程中变得高效.

三 安装Vue CLI

npm install -g @vue/cli (-g 我们直接用-g让它全局安装即可) 注意:Vue CLI一月一个小版本,一年一个大版本,我们用上面安装的是比较新的版本,如果需要想按照Vue CLI2的方式初始化项目时不可以的。官网上也有些以前的cli版本安装方式如↓

Vue CLI2初始化项目

vue init webpack my-project

Vue CLI3之后初始化项目

vue create my-project

四 Vue Cli2创建项目

创建项目的步骤以及可选项

创建完项目后,项目的结构

关于我们用脚手架创建工程时候要不要用Runtime-compiler

选择项

Runtime-Compiler和Runtime-only的区别

总结:

  • 如果在之后的开发中,你依然使用template,就需要选择Runtime-Compiler
  • 如果你之后的开发中,使用的是.vue文件开发,那么可以选择Runtime-only

vue-cli 3 与 2 版本有很大区别

  • vue-cli 3 是基于 webpack 4 打造,vue-cli 2 还是 webapck 3
  • vue-cli 3 的设计原则是“0配置”,移除的配置文件根目录下的,build和config等目录
  • vue-cli 3 提供了 vue ui 命令,提供了可视化配置,更加人性化
  • 移除了static文件夹,新增了public文件夹,并且index.html移动到public中

Vue CLI3目录结构

配置去哪里了?

自定义别名